Пишу про разработку вообще и в частности про: JavaScript, HTML5, CSS3, AngularJS, ReactJS, Agile, Bitcoins

Современные традиции в сетках

В кои-то веки у меня есть видео на русском! Сетки – это очень важная часть фронтенд разработки. Наша задача не только писать качественный JS код, но и знать как все красиво сверстать. Очень многогранная профессия, скучно точно не бывает.

Сетки, адаптивная верстка, приоритет блоков на разных устройствах – все это очень важные темы и им нужно уделять столько же внимания сколько и выбору фреймворка для разработки. Видео как раз и говорит о сетках, шрифтах и о том зачем они и что сегодня требуется

Поделиться:

Facebook page

Кстати, если вы не обратили внимание, то у меня появилась страничка в фейсбуке www.facebook.com/artemdemo.me, а в колонке справа есть виджет страницы. Так что заходите и лайкайте, если вам удобнее пользоваться этой социальной сетью. Да и вообще лайк – дело святое, самый лучший способ поддержки 😉

Поделиться:

Кнопки “поделиться” и inferno.js

Наконец-то дошли руки прикрутить кнопки “Поделиться” к постам. Меня совершенно не нравились существующие решения, да и самому хотелось разобраться, поэтому и пришлось тянуть, пока не появится свободное время. И вот это произошло – теперь можно кликнуть по социальной кнопочке и поделиться постом с френдами. Просто чудеса на виражах. 🎊 🎉

Причем оказалось, что каждая соц. сеть наровит по-своему заделать эти кнопки и это просто какой-то тихий ужас. Самый простой и топорный способ у твиттера. Там вообще никаких заморочек – сам открываешь попап и сам же дайшь ссылку, регистрироваться не надо.

У фейсбука процесс сложнее. Нужно качнуть их SDK и уже использовать его API, но в общем и целом у него нет проблем с тем, что я буду сам вызывать событие share. Единственное что нужно зарегистрироваться, и использовать ключик. Ну да ладно – главное работает.

А вот с вконтакте все смешнее. Регистрироваться не нужно, но и самому вызывать событие share вроде как нельзя. У них подход такой – мы обо всем подумали и сами все нарисуем и сделаем и пофиг, что дизайн не подходит, ты вообще кто такой? Мда, пришлось потанцевать с бубном рядом с ними.

Заглянул так же в сторону одноклассников, ужаснулся и вышел. Моя нервная система пока не готова с ними разбираться. Пусть они идут своим путем, а я своим.

Под все это дело, я так же решил выбрать фреймворк с которым буду работать для написания компонентов. Понятно, что сайт у меня не SPA, но и писать на vanilla js как-то уж очень опасно. Знаю я как быстро в таком подходе код превращается в одну большую макоронину. Так вот стал я смотреть на разные фреймворки и мне попался на глаза inferno.js

Не первый раз уже смотрю на него, но все руки не доходили (как обычно). А вот сейчас такой повод! Итак что мне в принципе нужно было:

  • Небольшой фреймворк для рендеринга и работы с событиями
  • Должен работать в парадигме компонентов
  • Хочется чтобы был быстрым
  • Простой API, в идеале похожий на React
  • Должен поддерживать ES6

Все это есть в inferno. Поэтому я решил как раз его и использовать. Я еще напишу о нем и о том, как использую в сайте, который не является одностраничным приложением.

А пока – можете протестировать кнопочки “Поделиться” 😉

Поделиться:

Что мы получим в ES7 (ES2016)?

Весь дополнительный функционал, который мы получим с приходом ES7 (ES2016) в одной картинке:

es7-features

Да, он будет значительно меньше предыдущего 🙂 Достаточно логично, не каждый же год проводить революцию, верно?

Ссылки по теме:
The final feature set of ECMAScript 2016 (ES7)

Поделиться:

IT-профессионалы и расходы

Простите, накипело…
© Народная мудрость

Как ни странно, но есть один вопрос, которым задаются многие IT-профессионалы – платить или нет за курсы, книги, лицензии и тому подобные не материальные блага? Причем вопрос свойственен не только на территории СНГ, как может показаться. Тратить деньги никто не любит и все стараются делать это как можно реже. Сложно их упрекнуть в этом, потому что экономика, все-таки должна быть экономной.

roll-dollars_

К слову хочу отметить, что подобное отношение больше наблюдается у тех кто только начинает свой путь в IT. Оно и понятно – огромное количество бесплатных материалов, программ, курсов создают впечатление, что так и должно быть. Раз с меня с самого начала не требовали деньги то почему же я должен сейчас платить? Пусть это делает кто-то другой!

Отличный подход! Все правильно, только давайте теперь и вы будете оказывать услуги не требуя за это денег. Вот предположим вы научились по бесплатным курсам клепать сайтики: уверенно пишете на PHP, знаете чем отличается HTML от HTML5, что такое CSS3 и как при помощи jQuery сделать ajax запрос. Вы за все эти уникальные знания ничего не заплатили, только потратили свое время. Ну раз расходов нет, то зачем вам платить-то? Разве не та же логика? Нет?

Я даже готов закрыть глаза на то, что свежий разработчик после таких курсов ничего из себя толком не прадставляет. Ладно, пусть называется кем хочет. Но вот почему он свое время и труд ценит больше чем труд других мне не до конца понятно. Разумеется мы стараемся грести под себя, но гордится этим точно не стоит.

Труд должен быть оплачен и мой, и твой и тех парней, которые написали программу, сделали сайт, нарисовали иконки.

В конце концов, если вы работаете в IT, то у вас должно хватать денег на такие мелочи. Программное обеспечение сегодня либо бесплатно, либо очень дешево. Это же касается и всех подручных материалов – скриптов, шаблонов и т.д. и т.п.

Поэтому предлагаю не тратить времени и сил н поиск бесплатных или ворованных решений. Лучше заплатите автору, а освободившееся время потратьте на саморазвитие.

Поделиться:

Chrome 55 обещает улучшить работу с памятью

Chrome 55 обещает работать лучше и быстрее. В частности использовать меньше памяти. Сравнение исполнения js на популярных сайтов гигантов впечатляют. Ура, у нас теперь будет значительно больше мощностей чтобы писать говнокод лучшие приложения в мире.

chrome-55-memory-use

Ссылки по теме:
Fall cleaning: Optimizing V8 memory consumption

Поделиться:

Короткие команды для npm

А давайте экономить время при использовании npm команд. Скажем “да” коротким версиям горячо любимых строк:

Поделиться:

Fizzy sparks – пример работы с canvas

Симпатичный пример работы с canvas – Fizzy sparks. Canvas отлично подходит для таких анимаций – быстрый, поддерживается всеми современными браузерами.

fizzy-sparks

See the Pen Fizzy Sparks by Bennett Waisbren (@waisbren89) on CodePen.

Поделиться:

Как выводить unicode символы в react компонентах

Итак, если вы пишите react приложение, то рано или поздно вам потребуется вывести какой-нибудь unicode символ. Например вот такой: ♞, или такой: ☂ или что в этом духе: ☭. Все эти (как и многие другие) являются частью юникода и могут быть использованы очень просто. Не мне вас учить, но упомяну на всякий случай – каждый символ имеет html код, который можно использовать для вывода.

unicode

То есть вариантов несколько. Можно просто скопировать символ, вставить его в текст компонента и он отобразится. А можно использоваться html описание и он тоже должен отобразится. Для тех символов, что я перечислил коды будут следующие:

– ♞
– ☂
– ☭

Но вот тут-то и начинается проблема – если использовать html-код в реакте, то он выведет сам код, а не символ. Связанно это с тем, что реакт старается быть максимально правильным и безопасным и текст выводит текстом, а не старается отобразить юникодовские символы. Нужно самому решать этот вопрос, например вот так:

В чем тут магия? Все просто – метод fromCharCode возвращает юникодовские символы из переданных кодов.

Ссылки по теме:
Unicode character table
String.fromCharCode()

Поделиться:

WebGL particles demo

Очень симпатичная демонстрация WebGL particles. Если после этого вам не захочется сесть и разобраться с вами, то я не знаю чем вас можно удивить!

webgl-particles
WebGL particles

Да и вообще загляните вот на эту страничку yiwenl.github.io/Sketches/ – там много интересных работ. И ведь все это рендерится в браузере.

webgl-sketches

Поделиться: