fix(trie): node.value instead of node.name

fix: heading syntax should have space after hashes
This commit is contained in:
Mahdi Dibaiee 2016-11-02 18:31:42 +03:30
parent 39d302b4be
commit a903456f2b
4 changed files with 56 additions and 31 deletions

View File

@ -16,7 +16,8 @@ CSS Filters are supported by most modern browsers ([Can I Use CSS Filters](http:
I don't like long-bla-bla-articles, so let's get to it. I don't like long-bla-bla-articles, so let's get to it.
#Introduction Introduction
============
CSS Filters introduce a few useful effects and some image adjusting functions, namely blur, drop-shadow, contrast, brightness, [and a few others](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) which can be really useful if used properly. CSS Filters introduce a few useful effects and some image adjusting functions, namely blur, drop-shadow, contrast, brightness, [and a few others](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) which can be really useful if used properly.
@ -26,10 +27,12 @@ A simple demo showing blur, contrast and brightness combined (hover over image):
I group filters by the type of value they take, let's explain them briefly: I group filters by the type of value they take, let's explain them briefly:
##Length Length
------
These filters accept a length value (px, em, cm, [etc](http://www.w3.org/Style/Examples/007/units)). blur is the only member of this family. These filters accept a length value (px, em, cm, [etc](http://www.w3.org/Style/Examples/007/units)). blur is the only member of this family.
##Percentage Percentage
----------
These filters accept percentage values, but if you omit the percentage sign, the value is multiplied by 100, e.g. `contrast(2)` is another way of writing `contrast(200%)`. Negative values have the same effect as zero. These filters accept percentage values, but if you omit the percentage sign, the value is multiplied by 100, e.g. `contrast(2)` is another way of writing `contrast(200%)`. Negative values have the same effect as zero.
Most filters explain themselves, I'm not going to repeat \`Adjusts ${x} level\` like a parrot. Most filters explain themselves, I'm not going to repeat \`Adjusts ${x} level\` like a parrot.
@ -42,15 +45,17 @@ I group filters by the type of value they take, let's explain them briefly:
* saturate * saturate
* sepia * sepia
###invert ### invert
I first understood how cool this filter can be after I saw Tim Nguyen using this in theme switching. Yeah you can't invert everything and "Yay, I have a new theme", but you can use invert on some elements and it works flawlessly, believe me. I first understood how cool this filter can be after I saw Tim Nguyen using this in theme switching. Yeah you can't invert everything and "Yay, I have a new theme", but you can use invert on some elements and it works flawlessly, believe me.
<iframe width="100%" height="100" src="//jsfiddle.net/mdibaiee/373dnby8/embedded/result,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe> <iframe width="100%" height="100" src="//jsfiddle.net/mdibaiee/373dnby8/embedded/result,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
###opacity ### opacity
You might wonder why do we have this function, as we already have an opacity property in CSS, that's because the opacity property is not hardware accelerated, but the filter property is hardware accelerated in most browsers, which includes this function. You might wonder why do we have this function, as we already have an opacity property in CSS, that's because the opacity property is not hardware accelerated, but the filter property is hardware accelerated in most browsers, which includes this function.
##Angle Angle
-----
hue-rotate is the only function to accept an angle value (degree / radian). hue-rotate is the only function to accept an angle value (degree / radian).
###hue-rotate ###hue-rotate
@ -58,10 +63,11 @@ I group filters by the type of value they take, let's explain them briefly:
<iframe width="100%" height="300" src="//jsfiddle.net/mdibaiee/smk922fh/embedded/result,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe> <iframe width="100%" height="300" src="//jsfiddle.net/mdibaiee/smk922fh/embedded/result,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
##Special Special
-------
These filter's don't fit in any of the groups above, they have special/mixed values. These filter's don't fit in any of the groups above, they have special/mixed values.
###drop-shadow ### drop-shadow
The drop-shadow filter accepts a *shadow-list*, four length values, and one color. box-shadow and text-shadow also accept shadow lists. The drop-shadow filter accepts a *shadow-list*, four length values, and one color. box-shadow and text-shadow also accept shadow lists.
You're probably familiar with shadow lists already: `drop-shadow(x y radius spread color)`. Unfortunaly spread doesn't work in either Chrome or Firefox as of this writing — It is treated as an error. You're probably familiar with shadow lists already: `drop-shadow(x y radius spread color)`. Unfortunaly spread doesn't work in either Chrome or Firefox as of this writing — It is treated as an error.
@ -76,7 +82,7 @@ I group filters by the type of value they take, let's explain them briefly:
<iframe width="100%" height="150" src="//jsfiddle.net/mdibaiee/z077vbs0/embedded/result,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe> <iframe width="100%" height="150" src="//jsfiddle.net/mdibaiee/z077vbs0/embedded/result,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
###url ### url
With the url function we have the power of CSS and SVG Filters in one place. You can reference an SVG element by linking to it with a hash of the filter element's ID: With the url function we have the power of CSS and SVG Filters in one place. You can reference an SVG element by linking to it with a hash of the filter element's ID:
{% highlight css %} {% highlight css %}
@ -85,7 +91,7 @@ filter: url(/example.svg#filter)
If you want to know more about SVG Filters, I recommend [MDN's tutorial on SVG Filters](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Filter_effects). If you want to know more about SVG Filters, I recommend [MDN's tutorial on SVG Filters](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Filter_effects).
###Custom ### Custom
Now those filters are pretty cool, but what if I told you this is [going to be] done with CSS? Now those filters are pretty cool, but what if I told you this is [going to be] done with CSS?
![Map Folding with Custom CSS Filters](/img/map.jpg) ![Map Folding with Custom CSS Filters](/img/map.jpg)
@ -98,11 +104,13 @@ filter: url(/example.svg#filter)
* [Introducing CSS shaders: Cinematic effects for the web](http://www.adobe.com/devnet/archive/html5/articles/css-shaders.html) * [Introducing CSS shaders: Cinematic effects for the web](http://www.adobe.com/devnet/archive/html5/articles/css-shaders.html)
* [CSS shaders specifications](http://dev.w3.org/fxtf/custom/) * [CSS shaders specifications](http://dev.w3.org/fxtf/custom/)
#Gotchas Gotchas
=======
You now have a basic understanding of filters, good. Here are a few gotchas you'd better know. You now have a basic understanding of filters, good. Here are a few gotchas you'd better know.
##Order matters Order matters
-------------
The order in which filters are applied matters. Take this example: The order in which filters are applied matters. Take this example:
{% highlight css %} {% highlight css %}
@ -121,17 +129,20 @@ Here is the actual comparison:
<iframe width="100%" height="300" src="//jsfiddle.net/mdibaiee/51nLy3vs/embedded/result,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe> <iframe width="100%" height="300" src="//jsfiddle.net/mdibaiee/51nLy3vs/embedded/result,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
##Inheritance Inheritance
-----------
Okay, you now know the order of filters matters, the filter property is not actually *inherited*, but when you apply a filter on a parent element, of course it's children are affected too, but what if the children have their own css filters? Ah-ha! CSS properties are applied bottom-up, which means childrens' filters are applied first. Okay, you now know the order of filters matters, the filter property is not actually *inherited*, but when you apply a filter on a parent element, of course it's children are affected too, but what if the children have their own css filters? Ah-ha! CSS properties are applied bottom-up, which means childrens' filters are applied first.
<iframe width="100%" height="300" src="//jsfiddle.net/mdibaiee/o40d7cs7/embedded/result,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe> <iframe width="100%" height="300" src="//jsfiddle.net/mdibaiee/o40d7cs7/embedded/result,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
##Implementation Implementation
--------------
I said using the url function we have "the power of CSS and SVG filters in one place", but the CSS filters are actually implemented using SVG filters! You know, the functions are actually referencing to an svg generated in the browser. Here is the list of [CSS Filter equivalents](http://www.w3.org/TR/filter-effects/#ShorthandEquivalents). I said using the url function we have "the power of CSS and SVG filters in one place", but the CSS filters are actually implemented using SVG filters! You know, the functions are actually referencing to an svg generated in the browser. Here is the list of [CSS Filter equivalents](http://www.w3.org/TR/filter-effects/#ShorthandEquivalents).
#Go Wild Go Wild
=======
You can use CSS Filter on *any* element, experiment different things; `<video>`, `<canvas>`, `<iframe>`, GIF images, etc. You can use CSS Filter on *any* element, experiment different things; `<video>`, `<canvas>`, `<iframe>`, GIF images, etc.
@ -152,4 +163,4 @@ That's it, you can subscribe to my [RSS]({{ "/feed.xml" | prepend: site.baseurl
filter: blur(3px); filter: blur(3px);
-webkit-filter: blur(3px); -webkit-filter: blur(3px);
} }
</style> </style>

View File

@ -9,14 +9,16 @@ categories: api
[BroadcastChannel API](https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API) [BroadcastChannel API](https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API)
is a new API used to communicate between same-origin tabs opened by the same user. is a new API used to communicate between same-origin tabs opened by the same user.
#Why Why
===
Let's say you open two GitHub tabs, the [rust repository](https://github.com/rust-lang/rust) and [your stars](https://github.com/stars) page. You decide to star the awesome rust repository, but then you have to Let's say you open two GitHub tabs, the [rust repository](https://github.com/rust-lang/rust) and [your stars](https://github.com/stars) page. You decide to star the awesome rust repository, but then you have to
refresh your stars page to see your new star. That's sad. There must be a way for GitHub to refresh refresh your stars page to see your new star. That's sad. There must be a way for GitHub to refresh
your stars page in case you star something in another tab, right? your stars page in case you star something in another tab, right?
![Broadcast Channels, SATISFIED](/img/broadcast-channels.jpg) ![Broadcast Channels, SATISFIED](/img/broadcast-channels.jpg)
#Show me something! Show me something!
==================
Okay, open another page of my blog in a new tab. Now open up your console and enter this: Okay, open another page of my blog in a new tab. Now open up your console and enter this:
{% highlight javascript %} {% highlight javascript %}
@ -39,10 +41,12 @@ channel.addEventListener('message', message => {
{% endhighlight %} {% endhighlight %}
#How How
===
BroadcastChannels are pretty easy, here I'm going over the small details. BroadcastChannels are pretty easy, here I'm going over the small details.
##Creating channels Creating channels
-----------------
BroadcastChannels are constructed with a single argument, their name. Browsing contexts should use BroadcastChannels are constructed with a single argument, their name. Browsing contexts should use
this name to communicate over a specified channel. There's no limit to how many channels you can create. this name to communicate over a specified channel. There's no limit to how many channels you can create.
@ -55,7 +59,8 @@ var channel = new BroadcastChannel('star');
Channels have only one property, `name`. Channels have only one property, `name`.
##Methods Methods
-------
Channels have two methods: Channels have two methods:
### #postMessage(data: Anything) ### #postMessage(data: Anything)
@ -66,18 +71,21 @@ This method is used to leave a channel, in case you don't want to hear from the
Try leaving `channel` from my blog pages, and posting messages with others. Try leaving `channel` from my blog pages, and posting messages with others.
##Events Events
------
Channels inherit from [`EventTarget`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget), so you can use `addEventListener`, `removeEventListener` and `dispatchEvent` methods. Channels inherit from [`EventTarget`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget), so you can use `addEventListener`, `removeEventListener` and `dispatchEvent` methods.
Channels have only one event: Channels have only one event:
###message ### message
The event object passed to this event is a [`MessageEvent`](https://developer.mozilla.org/en-US/docs/Web/API/MessageEvent) with the `data` property set to the actual message sent using `postMessage`. The event object passed to this event is a [`MessageEvent`](https://developer.mozilla.org/en-US/docs/Web/API/MessageEvent) with the `data` property set to the actual message sent using `postMessage`.
--- ---
#Another example Another example
##Let's Fix GitHub ===============
Let's Fix GitHub
----------------
Okay, let's try something cool, I promise you will love it. Open a browser with [BroadcastChannel support](http://caniuse.com/#feat=broadcastchannel) and Install [GreaseMonkey](http://www.greasespot.net/). Okay, let's try something cool, I promise you will love it. Open a browser with [BroadcastChannel support](http://caniuse.com/#feat=broadcastchannel) and Install [GreaseMonkey](http://www.greasespot.net/).

View File

@ -17,7 +17,8 @@ Generator comprehensions allow us to easily write single-line generators, which
Comprehensions are currently only supported by Firefox, use Firefox 30+ or [Babel](https://babeljs.io/repl/) to run the examples. The Node.js version of examples using generator `function* ()`s is available at the [repository](https://github.com/mdibaiee/array-vs-generator) (doesn't require transpilation, use latest node). Comprehensions are currently only supported by Firefox, use Firefox 30+ or [Babel](https://babeljs.io/repl/) to run the examples. The Node.js version of examples using generator `function* ()`s is available at the [repository](https://github.com/mdibaiee/array-vs-generator) (doesn't require transpilation, use latest node).
#Syntax Syntax
======
The syntax is pretty simple, you can only use `for of` and `if` inside comprehensions. The syntax is pretty simple, you can only use `for of` and `if` inside comprehensions.
@ -79,7 +80,8 @@ console.table(Array.from(nested));
// 6, 7, 8 // 6, 7, 8
{% endhighlight %} {% endhighlight %}
#Laziness Laziness
========
This is one of the most important advantages of generators over arrays and things alike. This is one of the most important advantages of generators over arrays and things alike.
The reason why I'm including this here is to give you a good reason to write generators instead of arrays The reason why I'm including this here is to give you a good reason to write generators instead of arrays
while generator comprehensions make it extremely easy to write them — this is a proof of their usefulness. while generator comprehensions make it extremely easy to write them — this is a proof of their usefulness.

View File

@ -8,7 +8,9 @@ categories: algorithms
In this article, I'm going over creating an autocompletion/prediction system using a data-structure called Trie, it's fast and easy to customize. In this article, I'm going over creating an autocompletion/prediction system using a data-structure called Trie, it's fast and easy to customize.
#Trie Trie
====
[Trie](https://en.wikipedia.org/wiki/Trie) is a simple data-structure most commonly used as a dictionary, it looks like so: [Trie](https://en.wikipedia.org/wiki/Trie) is a simple data-structure most commonly used as a dictionary, it looks like so:
![Trie](/img/trie.jpg) ![Trie](/img/trie.jpg)
@ -24,7 +26,8 @@ child.value = parent.value + 'c';
It's pretty easy to traverse this tree and predict the next possible words. It's pretty easy to traverse this tree and predict the next possible words.
##Implementation Implementation
--------------
We're going to use ES6 classes to create our `Trie` and `Node` classes. We're going to use ES6 classes to create our `Trie` and `Node` classes.
@ -83,7 +86,8 @@ It might be a little hard to grasp at first, so I created a visualization of thi
Then we have our find method, which searches for the given value in the trie. The algorithm for searching is the same, comparing by index and moving to the next branch. Then we have our find method, which searches for the given value in the trie. The algorithm for searching is the same, comparing by index and moving to the next branch.
#Example Example
========
That's it for our simple Trie class, now let's create an actual input with autocomplete functionality using our Trie. That's it for our simple Trie class, now let's create an actual input with autocomplete functionality using our Trie.
{% highlight html %} {% highlight html %}
@ -126,7 +130,7 @@ input.addEventListener('keyup', () => {
for (let node of nodes.children) { for (let node of nodes.children) {
const category = node.category ? `- ${node.category}` : ''; const category = node.category ? `- ${node.category}` : '';
results.innerHTML += `<li>${node.name} ${category}</li>`; results.innerHTML += `<li>${node.value} ${category}</li>`;
} }
}); });
{% endhighlight %} {% endhighlight %}