fix(trie): node.value instead of node.name
fix: heading syntax should have space after hashes
This commit is contained in:
Mahdi Dibaiee
parent
39d302b4be
commit
a903456f2b
@ -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.
|
||||
|
||||
#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.
|
||||
|
||||
@ -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:
|
||||
|
||||
##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.
|
||||
|
||||
##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.
|
||||
|
||||
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
|
||||
* 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.
|
||||
|
||||
<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.
|
||||
|
||||
##Angle
|
||||
Angle
|
||||
-----
|
||||
hue-rotate is the only function to accept an angle value (degree / radian).
|
||||
|
||||
###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>
|
||||
|
||||
##Special
|
||||
Special
|
||||
-------
|
||||
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.
|
||||
|
||||
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>
|
||||
|
||||
###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:
|
||||
|
||||
{% 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).
|
||||
|
||||
###Custom
|
||||
### Custom
|
||||
Now those filters are pretty cool, but what if I told you this is [going to be] done with CSS?
|
||||
|
||||
|
||||
@ -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)
|
||||
* [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.
|
||||
|
||||
##Order matters
|
||||
Order matters
|
||||
-------------
|
||||
The order in which filters are applied matters. Take this example:
|
||||
|
||||
{% 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>
|
||||
|
||||
##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.
|
||||
|
||||
<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).
|
||||
|
||||
#Go Wild
|
||||
Go Wild
|
||||
=======
|
||||
|
||||
You can use CSS Filter on *any* element, experiment different things; `<video>`, `<canvas>`, `<iframe>`, GIF images, etc.
|
||||
|
||||
|
||||
@ -9,14 +9,16 @@ categories: 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.
|
||||
|
||||
#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
|
||||
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?
|
||||
|
||||
|
||||
|
||||
#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:
|
||||
|
||||
{% highlight javascript %}
|
||||
@ -39,10 +41,12 @@ channel.addEventListener('message', message => {
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
#How
|
||||
How
|
||||
===
|
||||
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
|
||||
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`.
|
||||
|
||||
##Methods
|
||||
Methods
|
||||
-------
|
||||
Channels have two methods:
|
||||
|
||||
### #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.
|
||||
|
||||
##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 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`.
|
||||
|
||||
---
|
||||
|
||||
#Another example
|
||||
##Let's Fix GitHub
|
||||
Another example
|
||||
===============
|
||||
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/).
|
||||
|
||||
|
||||
@ -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).
|
||||
|
||||
#Syntax
|
||||
Syntax
|
||||
======
|
||||
|
||||
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
|
||||
{% endhighlight %}
|
||||
|
||||
#Laziness
|
||||
Laziness
|
||||
========
|
||||
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
|
||||
while generator comprehensions make it extremely easy to write them — this is a proof of their usefulness.
|
||||
|
||||
@ -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.
|
||||
|
||||
#Trie
|
||||
Trie
|
||||
====
|
||||
|
||||
[Trie](https://en.wikipedia.org/wiki/Trie) is a simple data-structure most commonly used as a dictionary, it looks like so:
|
||||
|
||||
|
||||
@ -24,7 +26,8 @@ child.value = parent.value + 'c';
|
||||
|
||||
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.
|
||||
|
||||
@ -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.
|
||||
|
||||
#Example
|
||||
Example
|
||||
========
|
||||
That's it for our simple Trie class, now let's create an actual input with autocomplete functionality using our Trie.
|
||||
|
||||
{% highlight html %}
|
||||
@ -126,7 +130,7 @@ input.addEventListener('keyup', () => {
|
||||
for (let node of nodes.children) {
|
||||
const category = node.category ? `- ${node.category}` : '';
|
||||
|
||||
results.innerHTML += `<li>${node.name} ${category}</li>`;
|
||||
results.innerHTML += `<li>${node.value} ${category}</li>`;
|
||||
}
|
||||
});
|
||||
{% endhighlight %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user