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

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



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

Читати далі →

Нова сітка на inline-block: опис, приклад використання, плюси і мінуси

Для сучасної верстки використання сітки не новина. Практично всі html-фреймвоки використовують ту або іншу сітку. Я зустрічала 3 види сітки:

  • сітка на float;
  • сітка на inline-block;
  • сітка на flexbox.
Сітка на inline-block має свої особливості, плюси і мінуси, які слід розглянути.

Читати далі →

А якщо без JavaScript?

В нашому світі без JavaScript нікуди! Купа фреймворків, бібліотек та іншої радості! jQuery щільно ввійшов у наше життя. React з Angular пробивають дорогу до світлого майбутнього. Та й не за горами підтримка браузерами ES6 без Babel.

Але якщо тема заходить про звичайному сайті зі стандартним функціоналом, не рідкісні випадки, коли JavaScript починають «злоупотрелять». І всі, в принципі, нормально… Але деколи задаєшся питанням: «А якщо без JavaScript?».

Читати далі →

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

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



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

Читати далі →

Як я згадував шкільний курс геометрії

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

Верстаємо новинний сайт за допомогою Flexbox

image

Примітка: цей матеріал являє собою вільний переказ статьи Джеремі Томаса про те, як працювати з Flexbox на прикладі верстки шаблону новинного сайту.

Повірте, немає ніякої необхідності в детальному розборі всіх аспектів роботи з Flexbox, якщо ви хочете почати ним користуватися вже зараз. У цьому посібнику автор збирається познайомити вас з деякими властивостями Flexbox і зробити «новинний лейаут» на кшталт того, який ви могли бачити на сайті The Guardian.

Читати далі →

Валідація в HTML5

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

Читати далі →

Як відображати потокове відео з допомогою HTML5

Як використовувати HTML5, для програвання різних стриминговых відео файлів.

Введення
У цій статті я розповім і покажу як зробити живу відео трансляцію на вашому сайті. Нещодавно мене найняли з метою реалізувати даний функціонал для клієнта. Я порадив реалізувати це за допомогою HTML5 для mp4 відео форматів і flash для його .flv файлів.

Читати далі →

Поширені помилки починаючого HTML-верстальника

Привіт, читачу! Я верстаю сайти з 2011 року. Як і більшість верстальників того часу, я вчився самостійно відео-уроків. За цей час, я не раз помилявся з вибором позиціонування блоку, вибором тега елемента і звичайно, з назвою класів. У цій статті я хочу поділитися своїми помилками.
Читати далі →

Анімована заглушка «Sorry, your browser doesn't support WebGL»

Вітаю тебе читач. Сьогодні я хочу розповісти про свій досвід створення заглушки з помилкою «Sorry, your browser doesn't support WebGL». Цю заглушку я придумав, працюючи над одним із своїх компонентів, де я використовував технологію WebGL.

Читати далі →