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

Скорость выборки css селекторов

Разные селекторы по-разному обрабатываются браузером (капитан очевидность). Как следствие одни работают быстрее чем другие. Имеет смысл внимательно подходить к работи с селекторами с самого начала, потому что когда уже нужно решать проблему с перформансом написано столько кода, что мама не горюй.

Разные селекторы по скорости работы. Чем ниже, тем хуже.

  1. ID, например #header
  2. Класс, например .promo
  3. Тип, например div
  4. Выбрать относительно соседей, например h2 + p
  5. Прямое родство, например li > ul
  6. Вложенность, например ul a
  7. Универсальный, например *
  8. Атрибут, например [type="text"]
  9. Псевдо классы, например a:hover

Ссылки по теме:
Writing efficient CSS selectors

Поделиться:

Задаем node environment через webpack

Node environment требуется задавать, для того чтобы react собирался максимально оптимально, без лишних отчетов в консоль и без лишних проверок. Многие npm пакеты используют такой же подход, поэтому имеет смысл знать и помнить об этом подходе.

Есть несколько способов задать среду, в конце концов это всего лишь переменная. Один из вариантов, это задавать ее через webpack – делается очень просто:

Поделиться:

Нельзя проголосовать за свой собственный пост

Вот она реальность того, что у программистов тоже ограниченное количество памяти 😂

vote-for-your-own-post

Транскрипт:
На картинке пример решения некой проблемы от Мартина Середински, датирован январем 2010. Ниже комментарий от того же Мартина от 12 сентября 2011 – “Я только что столкнулся точно с такой же проблемой, загуглил ответи и нашел этот. Он мне идеально подошел и я рашил поблагодарить автора проголосовав за его решение и получил сообщение ‘Вы не можете голосовать за свой собственный комментарий’. Слишком много работы убивает мозговые клетки..”

Поделиться:

Полифил по юзерагенту

Интересное решение – https://polyfill.io/. Ребята предоставляют CDN с полифилами для браузера. Причем он умный – читает юзерагента из заголовков запроса и передает только нужные полифилы, а не все скопом.

polyfill

Поделиться:

Коллеция веб демок – анимация, скрипты

Очень приятная коллеция примеров визуальных веб решений – анимация, скрипты. Аж больше 300 штук, собранных отовсюду в сети. Автор конечно проделал большую работу, разумеется большая часть этих примеров так и останется на полках фронтендеров, но для вдохнавления все равно стоит посмотреть 😉

demo-house

Ссылки по теме:
https://github.com/airen/DemoHouse
https://airen.github.io/DemoHouse/

Update
По какой-то причине автор удалили этот репозиторий, но github пользователи так просто не сдаются и есть копии:
https://github.com/ichance/DemoHouse-copy

Поделиться:

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

В кои-то веки у меня есть видео на русском! Сетки – это очень важная часть фронтенд разработки. Наша задача не только писать качественный 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, то у вас должно хватать денег на такие мелочи. Программное обеспечение сегодня либо бесплатно, либо очень дешево. Это же касается и всех подручных материалов – скриптов, шаблонов и т.д. и т.п.

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

Поделиться: