Як досвід створення бітів може допомогти розібратися в HTML і CSS

Якось у суботу я засидівся до двох годин ночі за новим проектом. Так як я бітмейкер, ви, напевно, думаєте, що на екрані було щось на зразок цього:



Але насправді, там було ось що:


Джерело: Мій екран в ту суботу, в дві години ночі

Замість того, щоб займатися бочками (1) і снейрами (2), я бився над закріпленою навігаційною панеллю на своєму веб-сайті. Звичайно, не машинне навчання і не штучний інтелект, але для мене і це вже чимало.

Читати далі →

Знайомство з Styled components

Пропонуємо вашій увазі переклад свіжої ознайомчої статті Саші Грифа (Sacha Greif), співавтора книги «Discover Meteor», про специфіку роботи з бібліотекою Styled components.
«СЅЅ – дивна штука. Його основам можна навчитися за 15 хвилин, але на те, щоб знайти хороший спосіб організації стилів, можуть піти роки.



Почасти це пояснюється особливостями самого мови. У своєму початковому вигляді CSS досить обмежений — ніяких змінних, циклів або функцій. У той же час, він розв'язує вам руки, забезпечуючи можливість задавати стиль елементах, класах, ID або будь-яким їх комбінаціям.

Читати далі →

Робота з Flexbox в гіфці

Flexbox так і напрошується на те, щоб створювати з нього візуальні шпаргалки. Сьогодні ми пропонуємо вам переклад статті Скотта Домеса «Як працює Flexbox – у великих, яскравих анімованих гіфці», свого роду наочний посібник.



Flexbox обіцяє позбавити нас від недоліків стандартного CSS (таких як вертикальне вирівнювання).
Слід визнати, що Flexbox дійсно справляється з поставленим завданням. Однак освоєння цієї нової моделі може викликати деякі труднощі.
Спробуємо продемонструвати, як функціонує Flexbox, дозволяючи створювати більш досконалі макети сторінок.

Читати далі →

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



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

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

Читати далі →

Введення в систему 8-піксельних сіток

Будь-якого дизайнера, над чим би він не працював — сайтами, журналами або мобільними додатками, напевно, доводилося чути термін «сітка». Існують сітки для всіляких варіантів розташування контенту. Ми застосовуємо стовпчик сітки, щоб вибудовувати контент по горизонталі, сітки базових ліній, щоб вирівнювати блоки тексту по вертикалі, гнучкі (soft) та жорсткі (hard) сітки — в залежності від того, наскільки суворо збираємося їх дотримуватися. Я зацікавився системою 8-піксельних сіток, коли почув, з яким захопленням говорить про неї Брін Джексон, і вирішив подивитися, які переваги вона може дати моїм дизайнам (і чи взагалі).




Читати далі →

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


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

Особистий досвід: як нетехнарю стати фронтенд-розробником



Фото: Flickr / Scott & Elaine van der Chijs / CC

Раніше у нашому блозі ми говорили про те, як вивчення веб-технологій і верстки може допомагати в роботі представникам нетехнічних професій. Деякі люди, початківці глибше занурюватися у світ інтернету, розуміють, що хочуть змінити рід діяльності.

Це може бути страшно — змінити сферу діяльності і з нетехнаря перетворитися в ІТ-спеціаліста. Однак навколо нас усе більше прикладів таких успішних трансформацій. У тому числі — історії кількох випускників HTML Academy, які не лише отримали нові знання, але й змогли знайти роботу для їх застосування на практиці.
Читати далі →

Як я проект на БЕМ перекладав... і перевів

Зв'язка HTML і CSS (CSS більшою мірою) завжди здавалася мені кілька «туманною», найгірше піддається контролю і тестування. Я вигадував для себе різні правила і намагався так чи інакше стандартизувати свій підхід, але не було відчуття, що «ось, це воно». Я кілька разів мигцем знайомився з БЕМ (і не тільки), читав статті на цю тему, але далі читання справа не заходила. Але чим далі, тим сильніше було відчуття необхідності в наявності певної суворої методології. Зрештою, я вирішив спробувати впровадити БЕМ на одному зі своїх проектів, де без цього, на мій погляд, було не обійтися. Мова йде про CMS, спрощену сторінку бек-ендом якої я наведу як приклад верстки:



Відразу хочу помітити, що БЕМ — це далеко не методологія на всі випадки життя, і питання про необхідність її застосування в тому чи іншому проекті слід розглядати в приватному порядку (у тому числі виходячи з того, подобається вона вам чи ні). Також, в силу того, що я не використав пропоновану специфічну файлову структуру або генерацію HTML, про них говорити не будемо (пізніше я все-таки розділив CSS-файл на окремі частини, що відповідають блокам, але цим вирішив поки обмежитися). Також, вже досить багато (наприклад, ось і ось) написано про переваги і недоліки цього підходу в цілому, тому говорити про це теж не будемо, я просто поділюся своїм досвідом і роздумами на цю тему, припускаючи, що з суттю ви вже знайомі.

Читати далі →

Кнопка або посилання?

Кнопка або посилання?
Я знаю хабр не для скарг,

але доки

використовувати ти будеш

посилання замість кнопок
<UserName />
КДПВ
Автор ілюстрації
<Marat Hilmanov>
gray-monkey@yandex.ru

Якщо коротко:
Використовуйте кнопки — кнопки, а для посиланняпосилання.
Для кнопок
посилання
— не комільфо.

Читати далі →

Front-end і блокувальники реклами (на прикладі Adblock Plus)

Хочу поділитися невеликим досвідом роботи з блокувальниками реклами з боку front-end розробника. Всі розуміють, що наше завдання зробити так, щоб сайт нормально працював і мав при будь-яких настроюваннях користувача, на будь-яких пристроях. Я іноді поглядаю постійно перевіряю, як виглядає сайт при відключеному javascript, перевіряю роботу на touch-пристроях, пристроях з маленьким дозволом ітд. ітп. Після того, як у нас на сайті через Adblock Plus (далі по тексту просто Adblock) перестав працювати відео-плеєр — стало зрозуміло, що наявність блокувальника реклами також потрібно враховувати при верстці сайту…

Читати далі →