Еволюція CSS: від CSS, SASS, BEM і CSS–модулів до styled-components



З самого початку історії інтернету ми потребували стилях для наших сайтів. Багато років нам для цього служив CSS, розвивався в своєму темпі. І тут ми розглянемо історію його розвитку.

Думаю, всі погодяться з таким визначенням: CSS використовується для опису подання документа, написаного на мовою розмітки. Також ні для кого не буде новиною, що за час розвитку CSS став досить потужним засобом і що для використання в команді потрібні додаткові інструменти.

Читати далі →

Як навчають у Школі розробки інтерфейсів Яндекса, і чому там навчився я

Мене звуть Павло Грінченка. Я був одним з учасників Школи розробки інтерфейсів Яндекса в Сімферополі. Коли-то давно я подивився відеозапису самої першої Школи 2012 року і почерпнув з них дуже багато корисної інформації. Потім я дізнався, що в моєму місті пройде нова Школа, і вирішив обов'язково взяти участь.
, Щоб потрапити в Школу, потрібно було заповнити анкету і зробити два тестових завдання. Одне з них — по верстці, досить просте. Звучало воно так: зверстати список ачивік, але максимально гнучко і реюзабельно (наприклад, використовуючи СЅЅ counters). Друге завдання виявилося складніше: написати обфускатор CSS-класів без використання сторонніх бібліотек. На вході — масив класів, на виході — їх обфусцированная версія. Але ось пара нюансів:
  • Довжина результуючих класів повинна була вийти мінімальною.
  • Найбільш часто зустрічаються класи повинні були займати найменший обсяг.
3 липня, зробивши завдання, я відправив заявку і забув про Школу, а 26 липня мені прийшов лист про те, що я прийнятий. Сьогодні хочу розповісти вам про те, як проходив процес навчання, які інструменти розробки я відкрив для себе, які завдання нам доводилося з цікавістю вирішувати.
Читати далі →

поправити у верстці перед випуском у продакшн?


Це стаття — чек-лист того, що потрібно не забути поправити в будь-якому проекті. Список корисних дрібниць. Весь текст поділений на дві частини. Перша — про прості елементи сторінки, такі як текст, кнопки, зображення, форми та інші. Друга частина про продуктивність, масштабованість, безпека та доступність.
Читати далі →

Дайджест свіжих матеріалів зі світу фронтенда за останній тиждень №245 (9 — 15 січня 2017)

Пропонуємо вашій увазі підбірку з посиланнями на корисні ресурси і цікаві матеріали з області фронтенда.


Читати далі →

Тренди і події в світі веб-технологій в 2016 році



Фото: Flickr / Dennis Skley / CC

Початок року — чудовий привід ще раз поговорити про цікаві події недавнього минулого. Але нас цікавить не все підряд, а те, як розвивалася наша улюблена галузь — веб. Отже, ми представляємо вашій увазі підбірку ключових подій і трендів, які оформилися в 2016 році і будуть впливати на те, яким інтернет стане в найближчому майбутньому.
Читати далі →

Власний слайдер зображень на jQuery

image
Почну з того, що дана стаття написана з метою розповісти про те, яким чином створюється слайдер прокрутки зображень для веб-сторінок. Ця стаття ні в якому разі не несе повчальний характер, вона лише служить прикладом того, як можна реалізувати наш об'єкт розгляду. Код, наданий у цій статті ви можете використовувати як якийсь шаблон для подібних розробок, сподіваюся, що мені вдасться досить докладно і доступно донести до читача всю суть мною написаного.

Читати далі →

Верстка інтернет-магазину: список товарів



Вимоги до верстання каталогів інтернет-магазинів мають властивість повторюватися з проекту в проект. Тому у мене виробився набір стандартних прийомів, якими я хочу поділитись у цій статті.
Деякі прийоми вже були розглянуті в різних статтях. Однак у мене виникло бажання об'єднати їх і проілюструвати окремими демо. Сподіваюся, в такому вигляді напрацювання виявляться корисними верстальникам, яким часто доводиться працювати над інтернет-магазинами.
Читати далі →