Если вы занимаетесь веб-разработкой, то высока вероятность того, что вам знакомы два чудовища, о которых пойдёт речь в статье. Речь идёт об изображениях и о дедлайнах. Иногда, по каким-то причинам, картинки никак не хотят помещаться в те места макетов страниц, которые для них предназначены, а вы не можете потратить несколько часов на то, чтобы с этим разобраться.

CSS-приёмы, которые помогают экономить время

#css #article

​​Shuffle Letters — это jQuery плагин, который создает интересный эффект вывода текста. Буквы выводятся рандомно, одна за другой.

Демо | GitHub

#text #animation #jquery

День программиста — неофициальный праздник программистов, отмечаемый на 256-й день года. Число 256 (два в восьмой степени) выбрано потому, что это количество чисел, которые можно выразить с помощью одного байта.

Этот день сегодня, 13 сентября. Поздравляю!

BEM’а не должно существовать. Есть огромное количество причин не использовать эту методологию, но из-за её простоты использования и непонимания работы CSS и HTML, методология широко распространилась среди фронтендеров всего мира, в большинстве случаев среди разработчиков СНГ.

В этой статье пойдёт подробный разбор плюсов и минусов этого подхода к разработке. Все примеры вёрстки будут взяты с официального сайта BEM.

BEM’a не должно существовать

#frontend #bem

​​AOS — это современная библиотека, которая менять позиции элементов при скролле. Библиотеку очень легко использовать, достаточно просто добавить класс aos-animate. Богатый функционал, есть возможность создавать свои анимации.

Демо | Туториал | GitHub

#js #scroll

Утиная типизация в JavaScript

«Утиная типизация» основана на одной известной пословице: «Если это выглядит как утка, плавает как утка и крякает как утка, то, вероятно, это утка (какая разница, что это на самом деле)».

Читать 1 минуту

#js

Автор статьи расскажет о своем опыте работы на должности тимлида в компании по разработке сайтов. Чтобы всем было полезнее и проще читать, статья разбита на главы, каждая из которых рассказывает об одной отдельной проблеме и её решению.

Надеюсь, что описанный ниже опыт станет для кого-то чужими граблями.

Работа тимлидом в 2018-ом году

#career #article

6 трюков VS Code за 60 секунд от Пола Льюиса

YouTube

#tricks #eng

Shortcut Mapper — позволяет освежить в памяти горячие сочетания клавиш для программ Adobe, JetBrains, Sublime Text и многих ругих. На сайте есть удобный поиск по shortcut'ам.

Shortcut Mapper

#shortcuts

​​Темная тема Chrome DevTools

Чтоб установить тему достаточно выполнить три простых шага:

1. Установите тему оформления из магазина приложений Chrome
2. Перейдите по адресу chrome://flags/#enable-devtools-experiments и нажмите Enable. Затем в этом же окне нажмите Relaunch Now
3. Откройте настройки инспектора Chrome и во вкладке Experiments tab поставьте галочку напротив Allow custom UI themes

Zero Dark Matrix в магазине Chrome

#devtools #theme

​​Number Plugin — плагин для стилизации <input type="number">. Плагин создаёт рядом текстовое поле и 2 стрелки с поддержкой полной кастомизации, проект постоянно дорабатывается.

Демо | GitHub

#jquery #input

​​handorgel — легковесная (~3.5 КБ) реализация аккордеона на ES6, соответствующая рекомендациям W3C.

Демо | GitHub

#js #es6

Автор материала говорит, что в последние несколько месяцев ему, при проверке пулл-реквестов, постоянно попадались одни и те же четыре недочёта, связанных с нерациональным использованием методов массивов в JavaScript. Для того чтобы таких недостатков кода, которые раньше появлялись и в его программах, стало меньше, он и написал эту статью.

Эффективное использование методов массивов в JavaScript

#js #article

​​WOW.js — это легковесная (3kb) библиотека, с помощью которой можно создать классные анимации при скролле страницы. Легко кастомизировать настройки: стиль, задержка, длина и многое другое.

Демо | GitHub

#js #scroll

Без понимания концептуальных основ работы современного веба тяжело назвать себя хорошим веб-программистом. В материале будет приведено краткое объяснение, которое поможет разобраться в происходящем.

Архитектура веба: основы для начинающих разработчиков

#article

​​Набор хелперов для Vue.js

Vue.js cheatsheet

#vue #cheatsheet

Каждый разработчик знаком с ситуацией выбора технологического стека для проекта. Приходится проанализировать множество факторов - от целей проекта и ресурсов до бюджета, соотнести все это с особенностями фреймворков, например, Angular и React, и на основе этого уже подбирать решение. Причем у разных разработчиков оно может быть разным: и каждый будет уверен, что он прав.

Выбирайте ваш фреймворк: Angular или React, и сражайтесь за него, отвечая на 30 вопросов теста. 21 и более правильных ответов принесут в копилку команды один балл.

Angular vs React

#frontend #angular #react

На прошлой неделе разработчики Yarn (пакетного менеджера для Javascript) анонсировали новую фичу — Plug’n’Play установку. Эта возможность позволяет запускать Node.js проекты без использования папки nodemodules, в которую обычно устанавливаются зависимости проекта перед запуском. Описание фичи декларирует, что nodemodules больше не понадобится — модули будут загружаться из общего кеша пакетного менеджера.

Одновременно с ними разработчики NPM также анонсировали свое аналогичное решение проблемы.

Давайте посмотрим на эти решения повнимательнее и попробуем протестировать их в реальных проектах.

Node.js без node_modules

#js #nodejs #article

​​animate-plus.js — это jQuery плагин, который создает анимации на странице. Для создания анимаций не нужен JavaScript, все работает через классы и data-атрибуты.

Демо | GitHub

#js #animation

В июне 2018 года стандарт ECMAScript 2015 отметил свой трёхлетний юбилей. В ES6, во-первых, появилось множество новых возможностей JavaScript, во-вторых, с этого стандарта начинается новая эра развития языка.

Новые возможности ES6 спроектированы куда лучше. Однако и в нём есть некоторые вещи, которых автор избегает. Они, по сути, являются «ловушками».

JavaScript ES6: слабые стороны

#js #article #es6