unicode-is-awesome

A curated list of delightful Unicode tidbits, packages and resources.

Unicode is Awesome! Prior to Unicode, international communication was grueling- everyone had defined their separate extended character set in the upperhalf of ASCII (called Code Pages) that would conflict- Just think, German speakers coordinating with Korean speakers over which 127 character Code Page to use. Thankfully the Unicode standard caught on and unified communication. Unicode 8.0 standardizes over 120,000 characters from over 129 scripts – some modern, some ancient, and some still undeciphered. Unicode handles left-to-right and right-to-left text, combining marks, and includes diverse cultural, political, religious characters and emojis. Unicode is awesomely human – and ultimately underappreciated.


What Characters Does the Unicode Standard Include?

The Unicode Standard defines codes for characters used in all the major languages written today. Scripts include the European alphabetic scripts, Middle Eastern right-to-left scripts, and many scripts of Asia.

The Unicode Standard further includes punctuation marks, diacritics, mathematical symbols, technical symbols, arrows, dingbats, emoji, etc. It provides codes for diacritics, which are modifying character marks such as the tilde (~), that are used in conjunction with base characters to represent accented letters (ñ, for example). In all, the Unicode Standard, Version 9.0 provides codes for 128,172 characters from the world’s alphabets, ideograph sets, and symbol collections.

The majority of common-use characters fit into the first 64K code points, an area of the codespace that is called the basic multilingual plane, or BMP for short. There are sixteen other supplementary planes available for encoding other characters, with currently over 850,000 unused code points. More characters are under consideration for addition to future versions of the standard.

The Unicode Standard also reserves code points for private use. Vendors or end users can assign these internally for their own characters and symbols, or use them with specialized fonts. There are 6,400 private use code points on the BMP and another 131,068 supplementary private use code points, should 6,400 be insufficient for particular applications.

Unicode Character Encodings

Character encoding standards define not only the identity of each character and its numeric value, or code point, but also how this value is represented in bits.

The Unicode Standard defines three encoding forms that allow the same data to be transmitted in a byte, word or double word oriented format (i.e. in 8, 16 or 32-bits per code unit). All three encoding forms encode the same common character repertoire and can be efficiently transformed into one another without loss of data. The Unicode Consortium fully endorses the use of any of these encoding forms as a conformant way of implementing the Unicode Standard.

UTF-8 is popular for HTML and similar protocols. UTF-8 is a way of transforming all Unicode characters into a variable length encoding of bytes. It has the advantages that the Unicode characters corresponding to the familiar ASCII set have the same byte values as ASCII, and that Unicode characters transformed into UTF-8 can be used with much existing software without extensive software rewrites.

UTF-16 is popular in many environments that need to balance efficient access to characters with economical use of storage. It is reasonably compact and all the heavily used characters fit into a single 16-bit code unit, while all other characters are accessible via pairs of 16-bit code units.

UTF-32 is useful where memory space is no concern, but fixed width, single code unit access to characters is desired. Each Unicode character is encoded in a single 32-bit code unit when using UTF-32.

All three encoding forms need at most 4 bytes (or 32-bits) of data for each character.

Lets talk Numbers

The Unicode characterset is divided into 17 core segments called “planes”, which are further divided into blocks. Each plane has space for 65,536 (2¹⁶) codepoints, supporting a grand total of 1,114,112 codepoints. There are two “Private Use Area” planes (#16 & #17) that are allocated to be used however one wishes. These two Private Use planes account for 131,072 codepoints.

# Name Range
1. Basic Multilingual Plane (U 0000 to U FFFF)
2. Supplementary Multilingual Plane (U 10000 to U 1FFFF)
3. Supplementary Ideographic Plane (U 20000 to U 2FFFF)
4. Tertiary Ideographic Plane (U 30000 to U 3FFFF)
5. Plane 5 (unassigned) (U 40000 to U 4FFFF)
6. Plane 6 (unassigned) (U 50000 to U 5FFFF)
7. Plane 7 (unassigned) (U 60000 to U 6FFFF)
8. Plane 8 (unassigned) (U 70000 to U 7FFFF)
9. Plane 9 (unassigned) (U 80000 to U 8FFFF)
10. Plane 10 (unassigned) (U 90000 to U 9FFFF)
11. Plane 11 (unassigned) (U A0000 to U AFFFF)
12. Plane 12 (unassigned) (U B0000 to U BFFFF)
13. Plane 13 (unassigned) (U C0000 to U CFFFF)
14. Plane 14 (unassigned) (U D0000 to U DFFFF)
15. Supplementary Special-purpose Plane (U E0000 to U EFFFF)
16. Supplementary Private Use Area – A (U F0000 to U FFFFF)
17. Supplementary Private Use Area – B (U 100000 to U 10FFFF)

The first plane is called the Basic Multilingual Plane or BMP. It contains the code points from U 0000 to U FFFF, which are the most frequently used characters. The other sixteen planes (U 010000 → U 10FFFF) are called supplementary planes or astral planes.

UTF-16 Surrogate Pairs

Characters outside the BMP, e.g. U 1D306 tetragram for centre (?), can only be encoded in UTF-16 using two 16-bit code units: 0xD834 0xDF06. This is called a surrogate pair. Note that a surrogate pair only represents a single character.


The first code unit of a surrogate pair is always in the range from 0xD800 to 0xDBFF, and is called a high surrogate or a lead surrogate.


The second code unit of a surrogate pair is always in the range from 0xDC00 to 0xDFFF, and is called a low surrogate or a trail surrogate.

Mathias Bynens

Surrogate pair: A representation for a single abstract character that consists of a


sequence of two 16-bit code units, where the first value of the pair is a high-surrogate


code unit and the second value is a low-surrogate code unit. Surrogate pairs are used only in UTF-16.

Unicode 8.0 Chapter 3.9 – Surrogates (See Unicode Encoding)

Calculating Surrogate Pairs

The Unicode character ? Pile of Poo (U 1F4A9) in UTF-16 must be encoded as a surrogate pair, i.e. two surrogates. To convert any code point to a surrogate pair, use the following algorithm (in JavaScript). Keep in mind that we’re using hexidecimal notation.

 var High_Surrogate = function(Code_Point){ return Math.floor((Code_Point - 0x10000) / 0x400)   0xD800 };
 var Low_Surrogate  = function(Code_Point){ return (Code_Point - 0x10000) % 0x400   0xDC00 };

 // Reverses The Conversion
 var Code_Point = function(High_Surrogate, Low_Surrogate){
	return (High_Surrogate - 0xD800) * 0x400   Low_Surrogate - 0xDC00   0x10000;
 };
 > var codepoint = 0x1F4A9;   					// 0x1F4A9 == 128169
 > High_Surrogate(codepoint).toString(16)
 "d83d"  										// 0xD83D == 55357
 > Low_Surrogate(codepoint).toString(16)
 "dca9"  										// 0xDCA9 == 56489

 > String.fromCharCode(  High_Surrogate(codepoint) , Low_Surrogate(codepoint) );
  "?"
> String.fromCodePoint(0x1F4A9)
  "?"
 > 'ud83dudca9'
  "?"

Composing & Decomposing

Unicode includes a mechanism for modifying character shape that greatly extends the supported glyph repertoire. This covers the use of combining diacritical marks. They are inserted after the main character. Multiple combining diacritics may be stacked over the same character. Unicode also contains precomposed versions of most letter/diacritic combinations in normal use.

Certain sequences of characters can also be represented as a single character, called a precomposed character (or composite or decomposible character). For example, the character “ü” can be encoded as the single code point U 00FC “ü” or as the base character U 0075 “u” followed by the non-spacing character U 0308 “¨”. The Unicode Standard encodes precomposed characters for compatibility with established standards such as Latin 1, which includes many precomposed characters such as “ü” and “ñ”.

Precomposed characters may be decomposed for consistency or analysis. For example, in alphabetizing (collating) a list of names, the character “ü” may be decomposed into a “u” followed by the non-spacing character “¨”. Once the character has been decomposed, it may be easier for the collation to work with the character because it can be processed as a “u” with modifications. This allows easier alphabetical sorting for languages where character modifiers do not affect alphabetical order. The Unicode Standard defines the decompositions for all precomposed characters. It also defines normalization forms to provide for unique representations of characters.

Myths of Unicode

From Mark Davis’s Unicode Myths slides.

  • Unicode is simply a 16-bit code – Some people are under the misconception that Unicode is simply a 16-bit code where each character takes 16 bits and therefore there are 65,536 possible characters. This is not, actually, correct. It is the single most common myth about Unicode, so if you thought that, don’t feel bad.

  • You can use any unassigned codepoint for internal use – No. Eventually that hole will be filled with a different character. Instead use private use or noncharacters.

  • Every Unicode code point represents a character – No. There are lots of nonCharacters (FFFE, FFFF, 1FFFE,…)


    There are also surrogate code points, private and unassigned codepoints, and control/format “characters” (RLM, ZWNJ,…)

  • Unicode will run out of space – If it were linear, we would run out in 2140 AD. But it isn’t linear. See https://www.unicode.org/roadmaps/

  • Case mappings are 1-1 – No. They can also be:

    • One-to-many: (ß → SS )
    • Contextual: (…Σ ↔ …ς AND …ΣΤ… ↔ …στ… )
    • Locale-sensitive: ( I ↔ ı AND İ ↔ i )

Applied Unicode Encodings

Encoding Type Raw Encoding
HTML Entity (Decimal) ?
HTML Entity (Hexadecimal) ?
URL Escape Code ?
UTF-8 (hex) 0xF0 0x9F 0x96 0x96 (f09f9696)
UTF-8 (binary) 11110000:10011111:10010110:10010110
UTF-16/UTF-16BE (hex) 0xD83D 0xDD96 (d83ddd96)
UTF-16LE (hex) 0x3DD8 0x96DD (3dd896dd)
UTF-32/UTF-32BE (hex) 0x0001F596 (0001f596)
UTF-32LE (hex) 0x96F50100 (96f50100)
Octal Escape Sequence 360237226226

Source Code

Encoding Type Raw Encoding
JavaScript u1F596
JSON u1F596
C u1F596
C u1F596
Java u1F596
Python u1F596
Perl x{1F596}
Ruby u{1F596}
CSS 1F596




Special Characters

The Unicode Consortium published a general punctuation chart where you can find more details.

Char Name Description
'' U FEFF (Byte Order Mark – BOM) has the important property of unambiguity on byte reorder. It is also zerowidth, and invisible. In non-complying software (like the PHP interpreter) this leads to all sorts of fun behaviour.
'￯' ‘uFFEF’ Reversed Byte Order Mark (BOM) does not equate to a legal character, other than the beginning of text.
'​' ‘u200B’ zero-width non-break space (a character with no appearance and no effect other than preventing the formation of ligatures).
' ' U 00A0 NO-BREAK SPACE force adjacent characters to stick together. Well known as   in HTML.
'­' U 00AD SOFT HYPHEN (in HTML: ­) like ZERO WIDTH SPACE, but show a hyphen if (and only if) a break occurs.
'‍' U 200D ZERO WIDTH JOINER force adjacent characters to be joined together (e.g., arabic characters or supported emoji). Can be used this to compose sequentially combined emoji.
'⁠' U 2060 WORD JOINER the same as U 00A0, but completely invisible. Good for writing @font-face on Twitter.
' ' U 1680 OGHAM SPACE MARK a space that looks like a dash. Great to bring programmers close to madness: 1  2 === 3.
';' U 037E GREEK QUESTION MARK a look-alike to the semicolon. Also a fun way to annoy developers.
'‭' U 202D change the text direction to Left-to-Right.
'‮'‭ ‭ U 202E change the text direction to Right-to-Left:
'ꓸ' U A4F8 LISU LETTER TONE MYA TI A lookalike for the period character.
'ꓹ' U A4F9 LISU LETTER TONE NA PO A lookalike for the comma character.
'ꓼ' U A4FC LISU LETTER TONE MYA NA A lookalike for the semi-colon character.
'ꓽ' U A4FD LISU LETTER TONE MYA JEU A lookalike for the colon character.
'︀' Variation Selectors ( U FE00 to U FE0F & U E0100 to U E01EF ) a block of 256 zero width characters that posess the ID_Continue proprerty- meaning they can be used in variable names (not the first letter). What makes these special is the fact that mouse cursors pass over them as they are combining characters – unlike most other zero width characters.
'ᅟ' U 115F HANGUL CHOSEONG FILLER In general it produces a space. Rendered as zero width (invisible) if not explicitly supported in rendering. Designated ID_Start
'ᅠ' U 1160 HANGUL JUNGSEONG FILLER Perhaps it produces a space? Rendered as zero width (invisible) if not explicitly supported in rendering. Designated ID_Start
'ㅤ' U 3164 HANGUL FILLER In general it produces a space. Rendered as zero width (invisible) if not explicitly supported in rendering. Designated ID_Start

Wait a second… what did I just read?

Variable identifiers can effectively include whitespace!

The U 3164 HANGUL FILLER character displays as an advancing whitespace character. The character is rendered as completely invisible (and non advancing, i.e. “zero width”), if not explicitly supported in rendering. That means the ugly character replacement (�) symbol should never be displayed.

I’m not yet sure why U 3164 was specified to behave this way. Interestingly, U 3164 was added to Unicode in version 1.1 (1993)- so the consortium must have had a lot of time to think it through. Anyway, here are a few examples.

> var ᅟ = 'foo';
undefined
> ᅟ
'foo'


> var ㅤ= alert;
undefined
> var foo = 'bar'
undefined
> if ( foo ===ㅤ`baz` ){} 	// alert
undefined


> var varㅤfooㅤu{A60C}ㅤπ = 'bar';
undefined
> varㅤfooㅤꘌㅤπ
'bar'

**NOTE:** I’ve tested U 3164 rendering on Ubuntu and OS X with the following: `node`, `php`, `ruby`, `python3.5`, `scala` ,`vim`, `cat`, `chrome` `github gist`. Atom is the only system that fails by (incorrectly) displaying empty boxes. I have yet to test it out on Emacs and Sublime. From what I understand, the Unicode Consortium will not reassign or rename characters or codepoints, but may be convinced to change character properties like ID_Start/ID_Continue.

Modifiers

The zero-width joiner (ZWJ) is a non-printing character used in the computerized typesetting of some complex scripts such as the Arabic script or any Indic script. When placed between two characters that would otherwise not be connected, a ZWJ causes them to be printed in their connected forms.

The zero-width non-joiner (ZWNJ) is a non-printing character used in the computerization of writing systems that make use of ligatures. When placed between two characters that would otherwise be connected into a ligature, a ZWNJ causes them to be printed in their final and initial forms, respectively. This is also an effect of a space character, but a ZWNJ is used when it is desirable to keep the words closer together or to connect a word with its morpheme.

> 'a'
 "a"

> 'au{0308}'
 "ä"

> 'au{20DE}u{0308}'
 "a⃞̈"

> 'au{20DE}u{0308}u{20DD}'
 "a⃞̈⃝"

// Modifying Invisible Characters
> 'u{200E}u{200E}u{200E}u{200E}u{200E}u{200E}u{200E}u{200E}u{200E}u{200E}'
 "‎‎‎‎‎‎‎‎‎‎"

> 'u{200E}u{200E}u{200E}u{200E}u{200E}u{200E}u{200E}u{200E}u{200E}u{200E}'.length
 10

Uppercase Transformation Collisions

Char Code Point Output Char
ß 0x00DF SS
ı 0x0131 I
ſ 0x017F S
0xFB00 FF
0xFB01 FI
0xFB02 FL
0xFB03 FFI
0xFB04 FFL
0xFB05 ST
0xFB06 ST

Lowercase Transformation Collisions

Char Code Point Output Char
0x212A k
  • String length is typically determined by counting codepoints. This means that surrogate pairs would count as two characters. Combining multiple diacritics may be stacked over the same character. a ̈ == ̈a , increasing length, while only producing a single character.

  • Similarily, reversing strings often is a non-trivial task. Again, surrogate pairs and diacritics must be reversed together. ES Reverser provides a pretty good solution.

  • Upper and lower case mappings are not always one-to-one. They can also be:

    • One-to-many: (ß → SS )
    • Contextual: (…Σ ↔ …ς AND …ΣΤ… ↔ …στ… )
    • Locale-sensitive: ( I ↔ ı AND İ ↔ i )

One-To-Many Case Mappings

Most of the below characters express their one-to-many case mappings when uppercased- while others should be lowercased. This list should be split up

Code Point Character Name Mapped Character Mapped Code Points
U 00DF ß LATIN SMALL LETTER SHARP S s, s U 0073, U 0073
U 0130 İ LATIN CAPITAL LETTER I WITH DOT ABOVE i, ̇ U 0069, U 0307
U 0149 ʼn LATIN SMALL LETTER N PRECEDED BY APOSTROPHE ʼ, n U 02BC, U 006E
U 01F0 ǰ LATIN SMALL LETTER J WITH CARON j, ̌ U 006A, U 030C
U 0390 ΐ GREEK SMALL LETTER IOTA WITH DIALYTIKA AND TONOS ι, ̈, ́ U 03B9, U 0308, U 0301
U 03B0 ΰ GREEK SMALL LETTER UPSILON WITH DIALYTIKA AND TONOS υ, ̈, ́ U 03C5, U 0308, U 0301
U 0587 և ARMENIAN SMALL LIGATURE ECH YIWN ե, ւ U 0565, U 0582
U 1E96 LATIN SMALL LETTER H WITH LINE BELOW h, ̱ U 0068, U 0331
U 1E97 LATIN SMALL LETTER T WITH DIAERESIS t, ̈ U 0074, U 0308
U 1E98 LATIN SMALL LETTER W WITH RING ABOVE w, ̊ U 0077, U 030A
U 1E99 LATIN SMALL LETTER Y WITH RING ABOVE y, ̊ U 0079, U 030A
U 1E9A LATIN SMALL LETTER A WITH RIGHT HALF RING a, ʾ U 0061, U 02BE
U 1E9E LATIN CAPITAL LETTER SHARP S s, s U 0073, U 0073
U 1F50 GREEK SMALL LETTER UPSILON WITH PSILI υ, ̓ U 03C5, U 0313
U 1F52 GREEK SMALL LETTER UPSILON WITH PSILI AND VARIA υ, ̓, ̀ U 03C5, U 0313, U 0300
U 1F54 GREEK SMALL LETTER UPSILON WITH PSILI AND OXIA υ, ̓, ́ U 03C5, U 0313, U 0301
U 1F56 GREEK SMALL LETTER UPSILON WITH PSILI AND PERISPOMENI υ, ̓, ͂ U 03C5, U 0313, U 0342
U 1F80 GREEK SMALL LETTER ALPHA WITH PSILI AND YPOGEGRAMMENI , ι U 1F00, U 03B9
U 1F81 GREEK SMALL LETTER ALPHA WITH DASIA AND YPOGEGRAMMENI , ι U 1F01, U 03B9
U 1F82 GREEK SMALL LETTER ALPHA WITH PSILI AND VARIA AND YPOGEGRAMMENI , ι U 1F02, U 03B9
U 1F83 GREEK SMALL LETTER ALPHA WITH DASIA AND VARIA AND YPOGEGRAMMENI , ι U 1F03, U 03B9
U 1F84 GREEK SMALL LETTER ALPHA WITH PSILI AND OXIA AND YPOGEGRAMMENI , ι U 1F04, U 03B9
U 1F85 GREEK SMALL LETTER ALPHA WITH DASIA AND OXIA AND YPOGEGRAMMENI , ι U 1F05, U 03B9
U 1F86 GREEK SMALL LETTER ALPHA WITH PSILI AND PERISPOMENI AND YPOGEGRAMMENI , ι U 1F06, U 03B9
U 1F87 GREEK SMALL LETTER ALPHA WITH DASIA AND PERISPOMENI AND YPOGEGRAMMENI , ι U 1F07, U 03B9
U 1F88 GREEK CAPITAL LETTER ALPHA WITH PSILI AND PROSGEGRAMMENI , ι U 1F00, U 03B9
U 1F89 GREEK CAPITAL LETTER ALPHA WITH DASIA AND PROSGEGRAMMENI , ι U 1F01, U 03B9
U 1F8A GREEK CAPITAL LETTER ALPHA WITH PSILI AND VARIA AND PROSGEGRAMMENI , ι U 1F02, U 03B9
U 1F8B GREEK CAPITAL LETTER ALPHA WITH DASIA AND VARIA AND PROSGEGRAMMENI , ι U 1F03, U 03B9
U 1F8C GREEK CAPITAL LETTER ALPHA WITH PSILI AND OXIA AND PROSGEGRAMMENI , ι U 1F04, U 03B9
U 1F8D GREEK CAPITAL LETTER ALPHA WITH DASIA AND OXIA AND PROSGEGRAMMENI , ι U 1F05, U 03B9
U 1F8E GREEK CAPITAL LETTER ALPHA WITH PSILI AND PERISPOMENI AND PROSGEGRAMMENI , ι U 1F06, U 03B9
U 1F8F GREEK CAPITAL LETTER ALPHA WITH DASIA AND PERISPOMENI AND PROSGEGRAMMENI , ι U 1F07, U 03B9
U 1F90 GREEK SMALL LETTER ETA WITH PSILI AND YPOGEGRAMMENI , ι U 1F20, U 03B9
U 1F91 GREEK SMALL LETTER ETA WITH DASIA AND YPOGEGRAMMENI , ι U 1F21, U 03B9
U 1F92 GREEK SMALL LETTER ETA WITH PSILI AND VARIA AND YPOGEGRAMMENI , ι U 1F22, U 03B9
U 1F93 GREEK SMALL LETTER ETA WITH DASIA AND VARIA AND YPOGEGRAMMENI , ι U 1F23, U 03B9
U 1F94 GREEK SMALL LETTER ETA WITH PSILI AND OXIA AND YPOGEGRAMMENI , ι U 1F24, U 03B9
U 1F95 GREEK SMALL LETTER ETA WITH DASIA AND OXIA AND YPOGEGRAMMENI , ι U 1F25, U 03B9
U 1F96 GREEK SMALL LETTER ETA WITH PSILI AND PERISPOMENI AND YPOGEGRAMMENI , ι U 1F26, U 03B9
U 1F97 GREEK SMALL LETTER ETA WITH DASIA AND PERISPOMENI AND YPOGEGRAMMENI , ι U 1F27, U 03B9
U 1F98 GREEK CAPITAL LETTER ETA WITH PSILI AND PROSGEGRAMMENI , ι U 1F20, U 03B9
U 1F99 GREEK CAPITAL LETTER ETA WITH DASIA AND PROSGEGRAMMENI , ι U 1F21, U 03B9
U 1F9A GREEK CAPITAL LETTER ETA WITH PSILI AND VARIA AND PROSGEGRAMMENI , ι U 1F22, U 03B9
U 1F9B GREEK CAPITAL LETTER ETA WITH DASIA AND VARIA AND PROSGEGRAMMENI , ι U 1F23, U 03B9
U 1F9C GREEK CAPITAL LETTER ETA WITH PSILI AND OXIA AND PROSGEGRAMMENI , ι U 1F24, U 03B9
U 1F9D GREEK CAPITAL LETTER ETA WITH DASIA AND OXIA AND PROSGEGRAMMENI , ι U 1F25, U 03B9
U 1F9E GREEK CAPITAL LETTER ETA WITH PSILI AND PERISPOMENI AND PROSGEGRAMMENI , ι U 1F26, U 03B9
U 1F9F GREEK CAPITAL LETTER ETA WITH DASIA AND PERISPOMENI AND PROSGEGRAMMENI , ι U 1F27, U 03B9
U 1FA0 GREEK SMALL LETTER OMEGA WITH PSILI AND YPOGEGRAMMENI , ι U 1F60, U 03B9
U 1FA1 GREEK SMALL LETTER OMEGA WITH DASIA AND YPOGEGRAMMENI , ι U 1F61, U 03B9
U 1FA2 GREEK SMALL LETTER OMEGA WITH PSILI AND VARIA AND YPOGEGRAMMENI , ι U 1F62, U 03B9
U 1FA3 GREEK SMALL LETTER OMEGA WITH DASIA AND VARIA AND YPOGEGRAMMENI , ι U 1F63, U 03B9
U 1FA4 GREEK SMALL LETTER OMEGA WITH PSILI AND OXIA AND YPOGEGRAMMENI , ι U 1F64, U 03B9
U 1FA5 GREEK SMALL LETTER OMEGA WITH DASIA AND OXIA AND YPOGEGRAMMENI , ι U 1F65, U 03B9
U 1FA6 GREEK SMALL LETTER OMEGA WITH PSILI AND PERISPOMENI AND YPOGEGRAMMENI , ι U 1F66, U 03B9
U 1FA7 GREEK SMALL LETTER OMEGA WITH DASIA AND PERISPOMENI AND YPOGEGRAMMENI , ι U 1F67, U 03B9
U 1FA8 GREEK CAPITAL LETTER OMEGA WITH PSILI AND PROSGEGRAMMENI , ι U 1F60, U 03B9
U 1FA9 GREEK CAPITAL LETTER OMEGA WITH DASIA AND PROSGEGRAMMENI , ι U 1F61, U 03B9
U 1FAA GREEK CAPITAL LETTER OMEGA WITH PSILI AND VARIA AND PROSGEGRAMMENI , ι U 1F62, U 03B9
U 1FAB GREEK CAPITAL LETTER OMEGA WITH DASIA AND VARIA AND PROSGEGRAMMENI , ι U 1F63, U 03B9
U 1FAC GREEK CAPITAL LETTER OMEGA WITH PSILI AND OXIA AND PROSGEGRAMMENI , ι U 1F64, U 03B9
U 1FAD GREEK CAPITAL LETTER OMEGA WITH DASIA AND OXIA AND PROSGEGRAMMENI , ι U 1F65, U 03B9
U 1FAE GREEK CAPITAL LETTER OMEGA WITH PSILI AND PERISPOMENI AND PROSGEGRAMMENI , ι U 1F66, U 03B9
U 1FAF GREEK CAPITAL LETTER OMEGA WITH DASIA AND PERISPOMENI AND PROSGEGRAMMENI , ι U 1F67, U 03B9
U 1FB2 GREEK SMALL LETTER ALPHA WITH VARIA AND YPOGEGRAMMENI , ι U 1F70, U 03B9
U 1FB3 GREEK SMALL LETTER ALPHA WITH YPOGEGRAMMENI α, ι U 03B1, U 03B9
U 1FB4 GREEK SMALL LETTER ALPHA WITH OXIA AND YPOGEGRAMMENI ά, ι U 03AC, U 03B9
U 1FB6 GREEK SMALL LETTER ALPHA WITH PERISPOMENI α, ͂ U 03B1, U 0342
U 1FB7 GREEK SMALL LETTER ALPHA WITH PERISPOMENI AND YPOGEGRAMMENI α, ͂, ι U 03B1, U 0342, U 03B9
U 1FBC GREEK CAPITAL LETTER ALPHA WITH PROSGEGRAMMENI α, ι U 03B1, U 03B9
U 1FC2 GREEK SMALL LETTER ETA WITH VARIA AND YPOGEGRAMMENI , ι U 1F74, U 03B9
U 1FC3 GREEK SMALL LETTER ETA WITH YPOGEGRAMMENI η, ι U 03B7, U 03B9
U 1FC4 GREEK SMALL LETTER ETA WITH OXIA AND YPOGEGRAMMENI ή, ι U 03AE, U 03B9
U 1FC6 GREEK SMALL LETTER ETA WITH PERISPOMENI η, ͂ U 03B7, U 0342
U 1FC7 GREEK SMALL LETTER ETA WITH PERISPOMENI AND YPOGEGRAMMENI η, ͂, ι U 03B7, U 0342, U 03B9
U 1FCC GREEK CAPITAL LETTER ETA WITH PROSGEGRAMMENI η, ι U 03B7, U 03B9
U 1FD2 GREEK SMALL LETTER IOTA WITH DIALYTIKA AND VARIA ι, ̈, ̀ U 03B9, U 0308, U 0300
U 1FD3 GREEK SMALL LETTER IOTA WITH DIALYTIKA AND OXIA ι, ̈, ́ U 03B9, U 0308, U 0301
U 1FD6 GREEK SMALL LETTER IOTA WITH PERISPOMENI ι, ͂ U 03B9, U 0342
U 1FD7 GREEK SMALL LETTER IOTA WITH DIALYTIKA AND PERISPOMENI ι, ̈, ͂ U 03B9, U 0308, U 0342
U 1FE2 GREEK SMALL LETTER UPSILON WITH DIALYTIKA AND VARIA υ, ̈, ̀ U 03C5, U 0308, U 0300
U 1FE3 GREEK SMALL LETTER UPSILON WITH DIALYTIKA AND OXIA υ, ̈, ́ U 03C5, U 0308, U 0301
U 1FE4 GREEK SMALL LETTER RHO WITH PSILI ρ, ̓ U 03C1, U 0313
U 1FE6 GREEK SMALL LETTER UPSILON WITH PERISPOMENI υ, ͂ U 03C5, U 0342
U 1FE7 GREEK SMALL LETTER UPSILON WITH DIALYTIKA AND PERISPOMENI υ, ̈, ͂ U 03C5, U 0308, U 0342
U 1FF2 GREEK SMALL LETTER OMEGA WITH VARIA AND YPOGEGRAMMENI , ι U 1F7C, U 03B9
U 1FF3 GREEK SMALL LETTER OMEGA WITH YPOGEGRAMMENI ω, ι U 03C9, U 03B9
U 1FF4 GREEK SMALL LETTER OMEGA WITH OXIA AND YPOGEGRAMMENI ώ, ι U 03CE, U 03B9
U 1FF6 GREEK SMALL LETTER OMEGA WITH PERISPOMENI ω, ͂ U 03C9, U 0342
U 1FF7 GREEK SMALL LETTER OMEGA WITH PERISPOMENI AND YPOGEGRAMMENI ω, ͂, ι U 03C9, U 0342, U 03B9
U 1FFC GREEK CAPITAL LETTER OMEGA WITH PROSGEGRAMMENI ω, ι U 03C9, U 03B9
U FB00 LATIN SMALL LIGATURE FF f, f U 0066, U 0066
U FB01 LATIN SMALL LIGATURE FI f, i U 0066, U 0069
U FB02 LATIN SMALL LIGATURE FL f, l U 0066, U 006C
U FB03 LATIN SMALL LIGATURE FFI f, f, i U 0066, U 0066, U 0069
U FB04 LATIN SMALL LIGATURE FFL f, f, l U 0066, U 0066, U 006C
U FB05 LATIN SMALL LIGATURE LONG S T s, t U 0073, U 0074
U FB06 LATIN SMALL LIGATURE ST s, t U 0073, U 0074
U FB13 ARMENIAN SMALL LIGATURE MEN NOW մ, ն U 0574, U 0576
U FB14 ARMENIAN SMALL LIGATURE MEN ECH մ, ե U 0574, U 0565
U FB15 ARMENIAN SMALL LIGATURE MEN INI մ, ի U 0574, U 056B
U FB16 ARMENIAN SMALL LIGATURE VEW NOW վ, ն U 057E, U 0576
U FB17 ARMENIAN SMALL LIGATURE MEN XEH մ, խ U 0574, U 056D
  • PhantomScript – :ghost: :flashlight: Invisible JavaScript code execution & social engineering
  • ESReverser – A Unicode-aware string reverser written in JavaScript.
  • mimic – [ab]using Unicode to create tragedy
  • python-ftfy – Given Unicode text, make its representation consistent and possibly less broken.
  • vim-troll-stopper – Stop Unicode trolls from messing with your code.

Diversity

The Unicode Consortium has made a huge effort better reflect and incorporate human diversity, including cultural practices. Here is the Consortium’s diversity report.

Emojis of mixed gender situations are now available, such as same sex families, holding hands, and kissing. The real kicker are Emoji combined sequences. Basically:

Further, emojis now support skin color modifiers.

Five symbol modifier characters that provide for a range of skin tones for human emoji were released in Unicode Version 8.0 (mid-2015). These characters are based on the six tones of the Fitzpatrick scale, a recognized standard for dermatology (there are many examples of this scale online, such as FitzpatrickSkinType.pdf). The exact shades may vary between implementations.

Unicode Consortium’s Diversity report

Just follow the desired Emoji with one of the skin color modifiers u{1F466}u{1F3FE}.

 
 → 

Examples are written in JavaScript (ES6)

In general, characters designated the ID_START property may be used at the beggining of a variable name. Characters designated with the ID_CONTINUE property may be used after the first character of a variable.


function rand(μ,σ){ ... };

String.prototype.reverseⵑ = function(){..};

Number.prototype.isTrueɁ = function(){..};

var WhatDoesThisDoɁɁɁɁ = 42

Here are some really creative variable names from Mathias Bynes

// How convenient!
var π = Math.PI;

// Sometimes, you just have to use the Bad Parts of JavaScript:
var ಠ_ಠ = eval;

// Code, Y U NO WORK?!
var ლ_ಠ益ಠ_ლ = 42;

// How about a JavaScript library for functional programming?
var λ = function() {};

// Obfuscate boring variable names for great justice
var u006Cu006Fu006Cu0077u0061u0074 = 'heh';

// …or just make up random ones
var Ꙭൽↈⴱ = 'huh';

// While perfectly valid, this doesn’t work in most browsers:
var foou200Cbar = 42;

// This is *not* a bitwise left shift (`<<`):
var 〱〱 = 2;
// This is, though:
〱〱 << 〱〱; // 8

// Give yourself a discount:
var price_9̶9̶_89 = 'cheap';

// Fun with Roman numerals
var Ⅳ = 4;
var Ⅴ = 5;
Ⅳ   Ⅴ; // 9

// Cthulhu was here
var Hͫ̆̒̐ͣ̊̄ͯ͗͏̵̗̻̰̠̬͝ͅE̴̷̬͎̱̘͇͍̾ͦ͊͒͊̓̓̐_̫̠̱̩̭̤͈̑̎̋ͮͩ̒͑̾͋͘Ç̳͕̯̭̱̲̣̠̜͋̍O̴̦̗̯̹̼ͭ̐ͨ̊̈͘͠M̶̝̠̭̭̤̻͓͑̓̊ͣͤ̎͟͠E̢̞̮̹͍̞̳̣ͣͪ͐̈T̡̯̳̭̜̠͕͌̈́̽̿ͤ̿̅̑Ḧ̱̱̺̰̳̹̘̰́̏ͪ̂̽͂̀͠ = 'Zalgo';

And here's some Unicode CSS Classes from David Walsh





You do not have access to this page.
Your changes have been saved successfully!
.ಠ_ಠ {
	border: 1px solid #f00;
}

.❤ {
	background: lightgreen;
}

Recursive HTML Tag Renaming Script

If you want to rename all your HTML tags to what appears as nothing, the following script is just what your looking for.

Do note however that HTML does not support all unicode characters.

// U 1160 HANGUL JUNGSEONG FILLER
transformAllTags('ᅠ');

// An actual HTML element node designed to look like a comment node, using the U 01C3 LATIN LETTER RETROFLEX CLICK 
//	<ǃ-- name="viewport" content="width=device-width">
transformAllTags('ǃ--');

// or even <ᅠ⃝
transformAllTags('u{1160}u{20dd}');

// and for a bonus, all existing tag names will have each character ensquared. h⃞t⃞m⃞l⃞
transformAllTags();


function transformAllTags (newName){
   // querySelectorAll doesn't actually return an array.
   Array.from(document.querySelectorAll('*'))
     .forEach(function(x){
         transformTag(x, newName);
   });
}

function wonky(str){
  return str.split('').join('u{20de}')   'u{20de}';
}

function transformTag(tagIdOrElem, tagType){
    var elem = (tagIdOrElem instanceof HTMLElement) ? tagIdOrElem : document.getElementById(tagIdOrElem);
    if(!elem || !(elem instanceof HTMLElement))return;
    var children = elem.childNodes;
    var parent = elem.parentNode;
    var newNode = document.createElement(tagType||wonky(elem.tagName));
    for(var a=0;a

Here is what it does support:

function testBegin(str){
 try{
    eval(`document.createElement( '${str}' );`)
    return true;
 }
 catch(e){ return false; }
}

function testContinue(str){
 try{
    eval(`document.createElement( 'a${str}' );`)
    return true;
 }
 catch(e){ return false; }
}

And heres some basic results

// Test if dashes can start an HTML Tag
> testBegin('-')
< false

> testContinue('-')
< true

> testBegin('ᅠ-')	// Prepend dash with U 1160 HANGUL JUNGSEONG FILLER
< true

A single TrueType / OpenType font format cannot cover all UTF-8 characters as there is a hard limit of 65535 glyphs in a font. Since there are over 1.1 million UTF-8 glphys, you will need to use a font-family to cover them all.

A map of the Basic Multilingual Plane

Each numbered box represents 256 code points.

A map of the Basic Multilingual Plane. Each numbered box represents 256 code points.

The Chinese, Japanese and Korean (CJK) scripts share a common background, collectively known as CJK characters. In the process called Han unification, the common (shared) characters were identified and named "CJK Unified Ideographs".

Unicode Blocks

The Unicode standard arranges groups of characters together in blocks. This is the complete list of blocks across all 17 planes.

The Unicode Standard set forth the following fundamental principles:

  • Universal repertoire - Every writing system ever used shall be respected and represented in the standard
  • Logical order - In bidirectional text are the characters stored in logical order, not in a way that the representaion
  • Efficiency - The documentation must be efficient and complete.
  • Unification - Where different cultures or languages use the same character, it shall be only included once. This point is
  • Characters, not glyphs - Only characters, not glyphs shall be encoded. In a nutshell, glyphs are the actual graphical
  • Dynamic composition - New characters can be composed of other, already standardized characters. For example, the character “Ä” can be composed of an “A” and a dieresis sign (“ ¨ ”).
  • Semantics - Included characters must be well defined and distinguished from others.
  • Stability - Once defined characters shall never be removed or their codepoints reassigned. In the case of an error, a codepoint shall be deprecated.
  • Plain Text - Characters in the standard are text and never mark-up or metacharacters.
  • Convertibility - Every other used encoding shall be representable in terms of a Unicode encoding.

Source: Principle descriptions are from codepoints.net

Let your fantasy run wild with

250 illustrations to create

unique scenes

Changing and overlapping

them, you can quickly illustrate

an idea of your startup

Get the opportunity to

design your characters using

our generator

Edit your person any way you like by using ready elements and styles

for your character. Use your creative to compose your ideal human.

Easy to use in Sign In, Sign Up

& Walkthrough Screens

These illustrations are perfect for web and mobile

projects. Bring your design to the next level with Smash.

You can see how we use these illustrations in our Dribbble


Create awesome design with

Smash illustrations to get more

attention of your users

250 Objects and Characters

Free Personal & Commercial License

Get for Free

Unlock all our assets in Unlimited Access just for $99/year and save more than $1200.

At least one new product every month and free updates.

how-to-prepare-for-an-awesome-product-designer-interview

Take a peek behind the scenes to see what questions we ask, and how we evaluate the answers to find great designers at Snapdocs

Wells Riley

Interviewing for a new job can be really rough.

Often times the process is completely opaque. There are portfolio presentations, sample projects, hours-long on-site interviews, and questions designed to trip up candidates or find the fraudsters. That is, if you even hear back from your application in the the first place.

Even though companies aren’t often asking about ping-pong balls in school busses anymore, the process can still come from a defensive, suspicious place. It’s less about attracting and energizing amazing candidates than it is about filtering out the bad ones. While I am a firm believer in hiring for role and values fit, I do believe there’s a better way than approaching hiring from a place of doubt.

Maybe the best way to find out if you can trust somebody is to trust them.

Snapdocs is a technology company that’s reimagining real estate transactions by helping everyone involved in the process work better together. Our talent team already responds to every applicant, no matter what—we’re all people, after all. Someone who might not be a great fit today could be a trusted colleague a year from now when our business changes, so it’s important to us that every candidate have a great experience.

But today I’d like to try something new—I’m going to share what every step in our process is, and what we’re looking for to find the best candidate. If you’re a strong, experienced designer who’s interested in the challenge of designing a product that makes real estate less frustrating and more accessible, I want to make sure you have the best opportunity to showcase your skill.

Step 1: Introduction

Your resume and portfolio are the ultimate design challenge. You need to know your audience, and what their goals are. The purpose is to give the hiring manager and recruiter enough signal, as quickly as possible, that your design skill and experience are a match for the role they’re trying to fill. We’re also assessing how clearly you communicate the context around your work and how polished the overall presentation is.

✨ Learn more and apply at https://www.snapdocs.com/careers

The strongest candidates…

  • Present a resume where form and function are in perfect harmony. A well-designed resume demonstrates attention to detail and visual design / layout skills.
  • Communicate their skills, experience, and interests clearly and succinctly. Enough information to grab the hiring manager’s interest, and nothing more.
  • Paint a complete picture for us. . If the candidate has a strong social presence (like a GitHub, Dribbble, LinkedIn, blog, etc.) working links are included. Weak social profiles (like a blank Dribbble account) are excluded. A strong candidate participates in the design industry and shares work and ideas they’re proud of.

Design a strong portfolio website. Squarespace templates or custom HTML/CSS are both fine. Case studies and mockups are both fine. No images at all — great! The best portfolios showcase the candidate’s strongest work, and leave everything else on the cutting room floor. The best portfolios clearly show the context, considerations, and solution for the piece of work in a way that an outsider can easily and completely understand.

Step 2: Recruiter call

At Snapdocs, the recruiter’s first job is creating a great candidate experience. Your recruiter will work to understand your past experience, your ideal next role, availability for interviews, potential commute, salary requirements, and where you’re at in the process with other companies.

This will also be your first opportunity to get to know our business and internal workings a bit. If you have a question about benefits, location, company structure, the product, etc. — please ask!

Step 3: Meet the hiring manager (me!)

This is likely the first time you’ll meet me, and my job in this call is to get you excited about the role, and the mission and vision of the company. I’m ultimately responsible for hiring the best person for the job and, once you arrive at Snapdocs, I will be instrumental in creating an environment in which you can do fulfilling, important, and challenging work.

Take advantage of this time to ask questions and get to know me. Take time before the meeting to think about what you really care about in a company and what your ideal role looks like. Research Snapdocs. Ask questions that help you decide if Snapdocs fits those criteria! I will do the same in return.

Questions:

  • Tell me about yourself. What’s your story?
  • What are you looking for in your next role?
  • What are you hoping to do or learn that you couldn’t do in your past roles?
  • Why Snapdocs in particular? What stands out?
  • What do you need to know about Snapdocs and the role to decide if it’s a good fit for you?

The strongest candidates…

  • Clearly and thoughtfully articulate what they’re looking for in their next role. They have an opinion, and articulate why they’re looking for those things.
  • Ask more than several questions that dig below the surface of the job description or stated company mission, looking for a good fit.
  • Show genuine interest in the company or space, and excitement for the job and opportunities at Snapdocs in particular. The interview process is a two-way street… we get the most excited about candidates who are excited to be here. Hopefully you feel the same way!

Step 4: Portfolio review (via Hangouts)

This is a critical stage. The ask is to share two or three projects you’re most proud of, that best represent your skills and experience as a product designer.

Portfolio review with a group of designers

Portfolio review with a group of designers

It’s not just your work that’s on display—we’re also looking at how you manage your time (45 minutes to completely run through–including time for questions!), how you organize and present information, how you tell a story, and how you help someone who has no prior context about the problem or the work gain a clear understanding.

These are all skills critical to the day-to-day job of being a product designer at a startup!

The strongest candidates…

  • Tell a story around their work, sharing context, their journey through the project, and tangible outcomes clearly and succinctly. Everyone leaves the room with a clear understanding of the work and why it was interesting.
  • Stop at key points to solicit questions. They know the work so well, they’re excited to go into detail wherever it’s needed.
  • Budget time for questions and discussion, so that the session can end right at 45 minutes without leaving projects or discussions with loose ends.
  • Design the whole experience of the presentation. The intent and attention to detail stands out more than just clicking around a personal website!

Step 5: On-site interview

The on-site is often our first opportunity to meet in person! It’s an exciting day because you’ll meet the people you’d be working with, visit our wonderful space, and get a feel for what it’d be like to actually work at Snapdocs.

Not only will you meet other designers, you’ll also meet cross functional partners from engineering and product too. Their job is to dig deeper into your skills and experience, and assess fit with the role and the job we’re trying to fill.

Session 1: Product walkthrough with a PM

The purpose of this session is to go deep and give you a clear understanding of the Snapdocs product and the business problems it solves. So, ask us questions about our business, the product, our design paradigms, or anything else!

Additional questions:

  • Tell me about a time you disagreed with a PM that was especially difficult for you. What happened, and what did you do to resolve the situation?
  • What’s been a particularly successful process you’ve used to collaborate with a PM on research and user testing? Walk me through a specific experience.
  • Tell me about a time where you had to ship something that was ‘good enough’
  • Tell me about a time where your PM had work spilling off their plate. What happened?

The strongest candidates…

  • Ask thoughtful questions with the aim of more deeply understanding the product, customer, and opportunity.
  • Actively participate in the conversation, and are not passively led. Their attempts at understanding drive the conversation forward.
  • Demonstrate what it’s like for a product manager to work in a collaborative setting with them.

Session 2: Design thinking exercise with a designer

The purpose of this session is to assess how you approach problem solving and ideating with a teammate. This is less about getting “the right answer” and more about understanding your process and ability to ask questions, think quickly, and manage ambiguity. This is a collaborative exercise!

The prompt: We’ve been tasked with building a new product that reimagines the eSigning experience on mobile devices. Let’s work together to try to come up with a compelling prototype we can build and share with our initial customers for feedback.

The strongest candidates…

  • Demonstrate natural talent in breaking down a big, ambiguous problem into approachable chunks.
  • Ask many clarifying questions before jumping to conclusions.
  • Collaborate with the designer, leveraging the partnership to do better work than either could do alone.

Session 3: Design implementation with an engineer

At Snapdocs designers and engineers work together very closely to create new benefits for our customers, and this session gives us a glimpse into how you collaborate with your technical partners and how you approach that critical relationship.

The prompt: Our engineering team is always looking for ways to improve our front-end development process, and we’ve been tossing around the idea of creating a design system in partnership with the design team. Can you help me think through the process and approach?

Additional questions:

  • Tell me about a time you struggled to work with an engineer on your team.
  • What’s something you recently learned from an engineer colleague that changed how you approach your design work?

The strongest candidates…

  • Demonstrate experience solving problems alongside engineers with empathy and understanding for their needs, constraints, and skills.
  • Ask questions and attempt to understand the deeper context.
  • Collaborate with the engineer, leveraging the partnership to do better work than either could do alone.

One on one interview with a member of the Snapdocs team

One on one interview with a member of the Snapdocs team

Session 4: Operating principles

The design team at Snapdocs isn’t looking for “culture fit”—in fact, we prioritize creating a team comprised of many different cultures! Instead we look at something we call principles fit. What do you value? how do you make decisions? And do those align with our principles?

Questions:

  • You’ll be asked to describe experiences that show how you’ve handled situations that put stress on our operating principles: Empathy, Pragmatism, Authenticity, Innovation, Teamwork, and Results.

The strongest candidates…

  • Align well with our operating principles , and can demonstrate how their values have helped them make decisions or face challenges in the past.
  • Ask many questions to more deeply understand what Snapdocs values and how those values are tested.

Session 5: Wrap up with the hiring manager (me again!)

That’s it! We’re pretty much done. I’ll wrap up any loose ends, and answer any final questions you have. I want you to leave your on-site with a strong sense of whether or not you think Snapdocs is the kind of place you can see yourself enjoying and creating a big impact in.

Questions:

  • How did the day go? How are you feeling about Snapdocs?
  • What questions can I answer for you?
  • What stood out during your interview (good or bad?)

The strongest candidates…

  • Reflect openly about their impressions of the company and, if they’re interested, share excitement and reservations they have.
  • Reflect on the interview and provide positive or constructive feedback.

After the on-site, the interview panel will provide feedback to the hiring manager in private, and then we will discuss the feedback as a group.

Next Steps

After the on-site, the interview panel will get together as a group to share feedback. Our recruiter will be in touch to share our feedback and hear yours.

Final step: Offer

If we believe there’s a great fit—impressive experience, strong skills, open mindset and hunger to learn, low ego, and genuine excitement for the opportunity Snapdocs presents—we’ll make an offer!

25+-awesome-responsive-blog-designs

Whether you’re a blogger looking for the perfect design for your next website or a web designer looking to get inspired for your next project, the process always starts the same way—by exploring designs made by others.

We’re here to make that process easier for you. In this post, we’re featuring a roundup of some of the best and most professional blog designs you can find on the Internet. If you’re working on a new blog layout design, or simply planning on making a new blog, you can start your search for inspiration right here!

We handpicked blogs from 5 popular categories:

Design & Development Blogs

Almost every blog in the design and development niche has beautiful and creative designs. Of all those blogs, these are our favorites.

Smashing Magazine

smashingmagazine

After its recent revamp, Smashing Magazine design looks absolutely gorgeous. The designers weren’t afraid to use bright and attractive brand colors throughout the blog design.

Sixth Story

sixthstory

Sixth Story’s blog layout offers a great lesson on how to design a perfectly minimalist header section to capture the heart of your brand and business.

Designmodo

designmodo

Designmodo’s blog layout looks fairly simple at first, but wait until you scroll down. You’ll notice how the layout automatically adjusts itself to fill the screen as soon as the sidebar area ends to take full advantage of the screen space.

Dieline

thedieline

Dieline blog uses a very bold design style that’s quite refreshing. Their choice of fonts is also interesting.

Creative Boom

creativeboom

Creative Boom shows off their love for minimalism and creativity with their uneven content layout design.

Awwwards Blog

awwwards-blog

Awwwards blog layout features a classic grid-based content design. As a result, it has a very responsive layout as well.

Canva Learn

canva

Canva’s Learn blog has one of the most user-friendly content designs that offer an impressive user experience.

Business & Agency Blogs

The following blogs from various startup businesses and agencies prove that even corporate blogs can be creative at times.

Help Scout Blog

helpscout-blog

Help Scout blog offers a very fast and smooth browsing experience to its users. The best feature of the layout is how the post blocks highlight itself when hovering, making it easier to click and view posts without having to search for the clickable link.

Buffer Blog

buffer

Buffer Blog not only looks and feels great but also offers some of the most informative content on the Internet. It deserves a spot on the list.

InVision Inside Design

invisionapp

InVision’s Inside Design blog uses a creative content layout that features different styles of grids for showcasing its blog posts and videos.

HubSpot Blog

hubspot

HubSpot blog also offers a very interactive experience to its visitors by highlighting posts whenever you hover your mouse over them. It also uses content blocks throughout its design as well.

Evernote Blog

evernote-blog

Evernote Blog has one of the most beautiful minimalist designs. If the blog opt-in for a slightly larger font size, the blog would look simply perfect.

Personal Blogs

With personal blogs, you get all the freedom to design something that shows off your personality. These blogs show how it’s done.

Gary Vaynerchuck

garyvaynerchuk

Gary Vaynerchuck is an entrepreneur who’s built businesses around his personal brand, which you can clearly see on his personal blog.

Austin Kleon

austinkleon

As a writer, you’ll have to use blog space wisely to promote your books and also highlight your profile at the same time. Austin Kleon’s blog does that job well.

Gates Notes

gatesnotes

Even though he’s one of the richest people on earth, Bill Gates uses a very simple layout on his personal blog. Something to think about when designing your personal blog.

Jeff Goins

goinswriter

Jeff Goins is also a writer, but instead of stuffing his blog design with ad space, he uses a minimalist and content-focused blog design to serve readers with minimum self-promotion.

Ethan Marcotte

ethanmarcotte

A list of responsive blogs wouldn’t be complete without mentioning Ethan Marcotte’s personal blog. He’s the guy who started the whole “responsive design” movement.

Technology Blogs

Blogs in the technology niche usually have similar layouts, but these blogs take a different approach.

TechCrunch

techcrunch

TechCrunch is the leader in startup and technology magazine blogs. Their minimal and content-focused blog design is actually quite inspiring.

The Verge

theverge

The Verge is another popular technology blog on the web that uses a metro-style content layout with lots of colors throughout the design.

Futurism

Futurism

Featuring a fixed sidebar section and clean minimalist design, Futurism also offers a great reading experience to its visitors.

Hacker Noon

hackernoon

Hacker Noon manages to truly capture its audience’s attention with its appropriate pixelated and bright colored design.

Engadget

engadget

In terms of readability and user experience, Engadget has the best responsive design and its use of soothing colors makes the design look even better.

Other Creative Blogs

These are blogs that have been designed with a unique approach to offering a more entertaining experience to its users.

MailChimp Blog

mailchimp

MailChimp’s blog uses a highly creative design that shows the true colors of the brand behind this company.

HuffPost Life

huffpost-life

HuffPost’s Life section is a great example of how to design an attractive lifestyle blog that covers multiple topics.

Abduzeedo

abduzeedo

Another impressive design blog that takes full advantage of the screen space.

BuzzFeed

buzzfeed

If you’re making a viral news blog, you can certainly learn a few lessons from the blog that started the viral news trend in the first place.

Adobe Blog

adobe-blog

Adobe’s official blog features a fully responsive and fullscreen design. It also uses many elements like floating navigation bars, read progress bars, and more to improve user experience.

We hope our list will help you find inspiration to design or build your own unique blog. Of course, today it’s much easier to build a blog using WordPress and grab a pre-made WordPress theme to make a blog within a few minutes.

This eliminates the time-consuming and expensive process of coding blogs from scratch. So if you’re new to building websites, it’s worth considering WordPress.

a-list-of-awesome-programming-talks-by-language

I watch a lot of talks that I love to share with my friends, fellows and coworkers.
As I consider all GitHubbers my friends (oh yeah!), I decided it’s time to share the
list.

There are talks on programming language specifics as well as a more general section I call “theory”.
But don’t expect to always get theoretical computer science for every talk there;
most of them are on the architecture and design of software.

I welcome every contribution to the list; for guidelines look below.

Disclaimer: I did not give any of the talks on the list and am responsible neither
for their content nor for their presentation. All links below will direct you to
external sites (mostly YouTube, really), be aware of that. If you are one of the people
responsible for the talks or the platform presenting it and want it removed,
tell me and I’ll sort it out with you.

[A] after a talk name denotes a talk that someone thought could be listened to as audio, without needing the video. This may not reflect your experience with the talk, but you can make a pull request to change it.

Names to look out for

To make choosing the right speakers a tad easier, let me give you a quick overview
over my favourite speakers in no particular order:

  • Scott Meyers (C ): Scott Meyers is one of the most entertaining and knowledgeable
    speaker when it comes to all things C . His talks cover a variety of topics, from type
    inference to API design and cache lines.
  • Rich Hickey (Clojure): I am not a Clojure programmer, but I like reasoning about
    and building programming languages. Even if you don’t, Rich Hickeys talks are inspiring
    and thought-provoking. Whenever he talks about the fundamentals of programming and reasoning,
    you are sure to learn a ton. Oh, and if you program in Clojure, you have no excuse for
    not watching this guy speak.
  • Reginald Braithwaite (JavaScript): one of my favourite JavaScript speakers. He
    also has a variety of talks on my list, but is more true to his realm (JavaScript) than
    most of the other speakers on my list.
  • David Nolen (Clojure/Clojurescript): The core maintainer of Clojurescript. His talks
    mostly focus on immutability and share a bit of their structure. He doesn’t get boring, though,
    and is another very smart person with deep insights in such fields as immutability.
  • David Beazley (Python): The person who singlehandedly made me a Pythonista. Need I say
    more? He has a lot of low-level knowledge about Python and makes poking at the Python interpreter
    seem more fun than it actually is.
  • Joe Armstrong (Erlang): One of the few people I actually had the chance to see live already.
    He is a funny, witty and smart guy and if you want to learn about Erlang, watch his talks. Most
    of his talks are also very beginner-friendly.
  • Brandon Rhodes (Python): Yet another Pythonista. His talks are enjoyable, enlightening
    and his way of talking is just enjoyable – you might think that is secondary, but it is really
    important. His talk on Tolkien is one of the most enjoyable diversions on this list (and a bit off-topic,
    mind you).
  • Aaron Patterson (Ruby): Probably the most entertaining speaker on the list. As a core
    developer of both Ruby and Rails, he works close to the heart of the Ruby community.
  • Philip Wadler (Haskell, Theory, …): Incredibly knowledgeable gentleman. If you use generics
    in Java, you owe that to him. If you use Haskell and/or monads, you probably already know him,
    but in case you do not, try to change that fact. He makes theoretical computer science more
    approachable than it actually is, and that is a good thing.
  • Zach Tellman (Clojure, Theory): Another person in the Clojure landscape
    with interesting, important insights that do not only apply to Clojure. His
    talks on theory should inspire you to think more deeply about what you are
    doing, which is probably the most important thing to take away from anything
    ever.

Contents

On Programming Languages

Alpaca

APL

Assembly

Bash

C

Clojure






C







Crystal

CSS

(yeah, I know, stylesheets are not traditionally programming)

D

Elixir




Elm

Erlang




F#

Factor

Frege

Go





Hackett

Haskell





Idris

Java & Android




JavaScript

(There is a good list of talks about JS to be found here)





Julia



Lisp

Objective C

OCaml

Prolog

PureScript

Python

(There is a good list of talks about Python to be found here)








Racket

Ruby






Rust




Scala



Scheme

Swift

Unison

VimL

Wolfram Language

Zig

On theory

Compilers/Interpreters

Computer Graphics and Vision

Creative Technology

Databases

Data Science

Data Structures & Algorithms

Debugging

DevOps

Distributed Systems

Entrepreneurship

Functional Programming

Hardware

Logic Programming

Machine Learning

Mathematics

Those are not necessarily programming-related and possibly very advanced mathematics.

On Languages

On the Industry/Community

Operating Systems

Performance Engineering

Programming Language Design

Research

Robotics

Security

Software Development

System Architecture

Theoretical Computer Science

Type Theory

UX/UI

Web Development

Miscellaneous

Contributing

Generally, a lot of talks are welcome on this list. The topic does not matter too much – it
should be linked to Computer Science – but the format does. Talks are welcome if

  • they were recorded at a conference or meetup (i.e. no screencasts or vlogging)
  • they are awesome™!

I hope that is straightforward, understandable and makes sense.

When adding a new section/subsection or entry, please try to ensure it’s sorted accordingly:

  • The two top-level sections (Languages and Theory) have their subsection headings organised alphabetically (APL > VimL).

  • The Languages subsections are sorted ascending by year (last field), then alphabetically by title. For example, an entry with (2012) should be below one with (2017) regardless of title; entries from the same year are then alphabetised within each year-group.

    • Groups of years are separated from one another by
      n
      (
      followed by an empty line), except if a group would contain only a few (<= 3) talks and it is near another small group, in which case small adjacent year-groups are consolidated. An entry or two might also be included in an adjacent larger year-group iff the entries have different years.
  • The Theory subsections are sorted only ascendingly by year, with no attention to title, and no grouping by year.

    • It doesn’t matter where in a group of same-year-talks a specific (added) talk goes.
awesome-demos-roundup-#6

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn’t matter if you are a beginner or intermediate, start learning CSS now.

Codrops uses cookies for its advertisement solutions and for analytics. We hope you’re ok with this, but you can opt-out if you wish. Read our Privacy Policy and Cookie Policy. OK