html (70)

Інтро до Веб-компонентів

Фронтенд-розробка розвивається з шаленою швидкістю. Варто лише поглянути на численні статті, туторіали та треди у Twitter зі скаргами на технології, колись такі прості та зрозумілі. У цій статті ми з'ясуємо, чому для якісного користувацького досвіду...

Codeguida · 5 років тому · 25

Інклюзивні компоненти: картки

Деякі з компонентів, які розглядаються в блозі Хейдона Пікерінґа, мають задокументовані рекомендації для коректної роботи. Наприклад, стандарт WAI-ARIA передбачає певну структуру і поведінку для вкладок. Наскільки точно слідувати цим рекомендаціям —...

Codeguida · 26 лютого 2020 · 45

Front-end воїн - Scroll Progress

Сьогодні ми розглянемо кілька методів демонстрації прогресу прокрутки веб- сторінки. Ця техніка використовується на багатьох сайтах, і не дарма; вона забезпечує контекстуальне розуміння кількості інформації даної сторінки. Коли користувач виконує про...

Codeguida · 13 грудня 2021 · 29

CSS магія - створюємо пошукову форму

У цьому уроці я хотів би обговорити, як можна прикрасити просту форму пошуку. Ми не будемо робити нічого занадто складного. Просто дослідимо чотири різних варіанти форми пошуку за допомогою CSS. У вас вже є Basic Search Box У вашому HTML файлі ви пов...

Codeguida · 05 березня 2021 · 110

Скролінг в майбутнє

Можливість прогортати інформацію сприймається як належне всіма користувачами. Однак реалізувати скролінг, який добре працюватиме поміж браузерами й чудово вписуватиметься в дизайн, може бути непросто. Коли веб-стандарти розвиваються швидше, ніж коли-...

Codeguida · 22 червня 2018 · 38

Досить зловживати div: інтро до семантичного HTML

div проявив себе Усі ми любимо тег div. Він існує вже давно і за цей час став найпопулярнішим елементом для огортання будь-якого контенту в блок, щоб стилізувати чи структурувати його. Навіть зараз у продакшені часто можна натрапити на подібний код:...

Codeguida · 5 років тому · 59

Форми в React: використовуємо ref

React дозволяє отримати значення <form> у два способи. Перший полягає в імплементації так званих контрольованих компонентів, а другий — в застосуванні React властивості ref. Головною характеристикою контрольованих компонентів є те, що значення, яке в...

Codeguida · 13 вересня 2017 · 27

Повне керівництво по Flexbox

Це повне керівництво пояснює все про flexbox, зосереджуючись на всіх можливих властивосях для батьківського елемента (контейнер flex) та дочірніх елементів (елементи flex). Воно також включає в себе історію, демонстрації, шаблони і таблицю підтримки...

Alex · 11 жовтня 2020 · 3.9K

Створюємо власний блог з допомогою Parse.js, частина 5: Router

Попередні уроки: Створюємо власний блог з допомогою Parse.js Створюємо власний блог з допомогою Parse.js: Працюємо з даними Створюємо власний блог з допомогою Parse.js: Авторизація користувачів Створюємо власний блог з допомогою Parse.js, час...

Codeguida · 3 роки тому · 4

10 рекомендацій для покращення веб-доступності вашого сайту

Ми склали список із 10 рекомендацій для покращення веб-доступності вашого сайту будь-якою людиною, не зважаючи на певні розлади здоров'я. Керівник W3C і винахідник Всесвітньої мережі Інтернет Тім Бернерс-Лі, сказав: Сила вебу в його універсально...

Codeguida · 15 вересня 2017 · 59

Створення 3D логотипу за допомогою three.js

В цій статті, ми створимо 3D версію логотипу Treehouse використовуючи three.js. Нажміть та перетягуйте мишу для переміщення камери! Також ви можете використовувати колесо миші для масштабування. Демо Завантажити код 3D графіка може бути складною, осо...

Codeguida · 28 вересня 2020 · 14

Спілкування в режимі реального часу

Socket.io \- це дійсно крута річ, вона дає вам можливість обмінюватися даними між клієнтами в режимі реального часу. Реалізуючи її разом з AngularJS, ви можете легко оновлювати вікно перегляду користувача. Перед тим, як заглибитись у код, давайте роз...

Codeguida · 25 березня 2020 · 16