Как написать калькулятор на HTML и CSS без JavaScript
Материалом о разработке калькулятора на CSS и HTML, без файла JS, тега script и обработчиков событий в HTML делимся к старту курса по Fullstack-разработке на Python. За подробностями приглашаем под кат.
Реализация простой HTML5-панели управления серверами на Apache Guacamole
Для удаленного доступа к физическим серверам клиенты хостеров используют программные средства, которые работают только при наличии операционной системы и специального софта.
Если система не установлена или возникли какие-то проблемы с ее настройкой (например, при попытке изменить правила межсетевого экрана), доступ можно потерять. В таких ситуациях на помощь приходят специализированные контроллеры, позволяющие управлять серверами без ОС, как если бы вы сидели за физической консолью. Рассказываем, как это работает у нас в HOSTKEY.
Всё о веб-анимациях в 2022
Анимация — это переход элемента от одного состояния к другому. Пользователям нравится, когда на сайте что-то вращается, появляются новые элементы или происходит что-то неожиданное. Если на сайте много таких «вау-эффектов», он может стать вирусным или получить какую-нибудь премию, например, Awwwards.
Чаще всего дизайнер отрисовывает анимацию в специальной программе, например, After Effects, и присылает верстальщику видео, по которому нужно повторить анимацию. А вот как реализовать эту идею — решать разработчику. Он может использовать три вида анимаций: CSS-анимации, SVG-анимации или JavaScript-анимации.
Давайте разберёмся, что представляет собой каждый из видов, а ещё как создать и оптимизировать простую анимацию своими руками. И осторожно, под катом много гифок и видео.
Анимация на КПДВ: Дилан Баунманн, codepen.
Глубокое погружение в функцию CSS :where()
Функция CSS :where() — новейшее детище в блоке псевдоклассов. Она принимает список селекторов в качестве аргументов и минимизирует их, позволяя вам писать меньше кода и в то же время стилизовать их все вместе.
В этом уроке мы узнаем про функцию псевдокласса :where() и покажем, как ее можно использовать в продакшене. Мы обсудим наложение, специфичность в отношении функции :where(), а также рассмотрим некоторые конкретные варианты использования.
Поехали!
Атрибуты HTML, которыми вы никогда не пользовались
В январе этого года Мэдисон Канна спросила у своих подписчиков в Twitter:
Какие языки/технологии вам бы хотелось изучить или узнать глубже в этом году?
Мой выбор: typescript, next.js, react, graphql, solidity, node — Мэдисон Канна (@Madisonkanna) January 3, 2022
Мой ответ был очень простым: HTML. И я ни в коей мере не был саркастичным или насмешливым. Разумеется, я неплохо знаю, какие теги использовать в каких случаях и как обеспечивать семантику и доступность моего HTML.
Однако существует целая куча малоиспользуемых атрибутов, о которых я забыл, и, вероятно, целая куча атрибутов, о существовании которых я и не знал. Этот пост стал результатом моих исследований, и я надеюсь, что он окажется для вас полезным при создании страниц на HTML.
Фронтенд-новости №1
Дайджест новостей из мира фронтенд-разработки за последнюю неделю 5—11 апреля.
Спецификации
Опубликован первый рабочий черновик (First Public Working Draft) Region capture.
Последний призыв к рассмотрению предлагаемых изменений в Media Queries Level 3.
W3C приглашает к реализации WebXR Device API.
Спецификации preload становится отключенным черновиком (Discontinued Draft), чтобы продолжить развитие в HTML living standard.
Письмо генерального директора W3С к 33-й годовщине интернета.
Больше новостей о HTML, CSS, JavaScript и инструментах разработчика — под катом.
Как Discord реализовал навигацию клавиатурой по всему приложению
Мы делаем Discord доступным для каждого. В 2020 году мы многое сделали, чтобы значительно улучшить ассебилити в приложении. Остаётся ещё много работы, но мы уже сейчас можем рассказать об одном из наших последних проектов - Навигация по клавиатуре.
Далее по катом.
Резиновая верстка: универсальная сетка под все брейкпоинты, примеры и правила
«Почему бы не сделать одну сетку и работать с ней?», — подумал Senior Frontend Developer @manmo и внедрил идею стандартизированных резиновых эластичных сеток в департамент Frontend-разработки компании.
Рассказываем, как это решение облегчило работу верстальщиков и сэкономило время на проектах.
Материал предназначен для дизайнеров и frontend-разработчиков. Дизайнеры поймут, как минимизировать количество работы для верстальщиков, и тем самым получить их одобрение. Верстальщики научатся экономить свои ресурсы, силы и мозги, чтоб потратить их на более полезные задачи, чем расчёт непонятных сеток.
4.04: День веб-мастера. Дело пахнет нафталином?
Так получается, что веб-мастеринг тоже — того, всё?
Олдовый котик машет лапкой из олдового web 1.0. Кстати, многие лендинги и сайты выглядели как раз в стилистике этой картинки: куча цветов, максимум информации, непонятные клипарты и неизменный WordArt с самыми забористыми шрифтами
Почему разработчики любят Bulma?
5 причин для того чтобы использовать Bulma в вашем следующем проекте.
Bulma это open-source, адаптивный и легковесный CSS фреймворк базирующийся на flexbox сетке. Этот новый фреймворк уже завоевал сердца многих разработчиков.
Итак, в этой статье, я расскажу о пяти причинах, почему разработчики любят Bulma.
Ближайшие события
Как побороть интервалы или разберитесь с бэком
Попытки побороть баг связанный с временем доставки, и синхронизировать обновление интервалов на сервере и на клиенте.
Как использовать CSS ::before и ::after для создания пользовательских анимаций и переходов
Как сделать плавный анимированный переход на сайте без использования специальных библиотек? Урок использования псевдоэлементов CSS для создания эффектов: от анимированной кнопки до карточки профиля. Подходит новичкам.
Как правильно верстать в 2022 году. Часть 1
Меня зовут Николай, я Frontend-разработчик IT-компании Relog. Хочу рассказать о самых распространённых ошибках в вёрстке современных проектов.
Дело в том, что лишь малая часть современных фронтендеров обращает внимание на работу с HTML и CSS, предпочитая готовые решения, вроде UI-библиотек и систем сеток. Но эти решения неидеальные и приходится дописывать обёртки вокруг них, видоизменять код, переписывать стили и совершать прочие действия для соответствия требованиям проекта. Тут-то и начинаются проблемы: вёрстка местами становится избыточной, стили переназначются через important и с каждым релизом проект всё сложней поддерживать. Я уже не говорю об удобстве использования и доступности. Об этом думают вообще в последнюю очередь.
В этой статье я расскажу лишь о небольшой части проблем, которые можно достаточно быстро решить, не прибегая к радикальному переписыванию больших частей проекта.
Простые сайты снова в моде. Минимализм возвращается
Сколько раз говорили об ожирении софта и сайтов, а воз и ныне там. Ситуация совершенно не улучшается. В 1993 году Word открывался за секунду, а сейчас за пять. Простейшие странички обвешаны десятками скриптов и грузятся бесконечно долго даже на многоядерной рабочей станции.
Такая ситуация напрягает и самих веб-разработчиков. Приходится тратить кучу времени на оптимизацию, тестирование новомодных фич в разных браузерах, осваивать сложные CMS. Зачем? На самом деле HTML и CSS — исключительно мощные инструменты, если ими умело пользоваться.
Как создать каскадную анимацию, используя SCSS
Необычная анимация делает сайт интересным для изучения и наблюдения за ним. Пользователям нравятся стильные, гармоничные решения. Анимация позволяет разнообразить контент, оживить его.
Когда-нибудь наводили мышку или кликали на элемент, чтобы посмотреть на его преображение ещё раз? Для достижения такого "вау-эффекта" нужна оригинальная анимация. В сети есть целые страницы, наполненные примерами анимация для кнопок.
Другой пример для полёта фантазии, появление элементов на странице. Тут нам может пригодиться каскадная анимация. Можно конечно явить миру все элементы разом, это просто и вместе с тем скучно. Появление группы элементов друг за другом, смотрится гармонично и интересно. В качестве основы для появления элемента, можно использовать изменение прозрачности от 0 до 1, увеличение или уменьшение элемента, а также линейное движение в плоскости экрана.
Раздоры вокруг <div>
<div> — это самый универсальный и широко используемый HTML-элемент. Сам по себе <div> не представляет ничего, но он, в то же время, позволяет разработчикам превратить его почти во всё что угодно. Делается это посредством использования CSS (для стилизации), JavaScript (для функционала) и ARIA (для обеспечения доступности контента).Эта универсальность позволяет использовать теги
<div> для множества самых разных целей, но, к сожалению, такая вседозволенность может легко привести к злоупотреблениям. Когда тегом <div> пользуются недостаточно осмотрительно, в итоге может получиться <div>-суп, контент, лишённый семантического значения, интерактивные элементы, не отличающиеся доступностью, или некая комбинация этих нехороших явлений.Грубые нарушения при использовании
<div> выявить сравнительно просто (подробнее об этом поговорим ниже). Но мы дошли до того, что кто-то может назвать «образцом недоступности контента» полностью правильное использование <div>, или, как минимум, пример лёгкого отклонения от правильности. В таких ситуациях говорят о том, что «кому-то стоило бы вместо <div> воспользоваться семантическим HTML-элементом».
Ладно. Притормозим немного. Прежде чем дружно задирать нос перед применением тегов
<div> — давайте вспомним о том, что контекст — это важно.Конечно, всегда, когда это возможно, нужно использовать семантические элементы. Но предлагаю проявить осторожность, создавая такую атмосферу, когда может показаться, что любой вариант использования
<div> — это плохо… или — что замена некоего <div> на «более семантический» элемент способна улучшить доступность некоего документа.Прежде чем об этом поговорить — ненадолго вернёмся в прошлое и заглянем туда, откуда взялся тег
<div>.
Собеседование по Javascript, мой опыт. Часть вторая
“И есть еще белые, белые дни, белые горы и белый лед.
Но все, что мне нужно - это несколько слов и место для шага вперед.”
(Виктор Цой)
Это вторая часть статьи, где будут вопросы, которые мне задавали и ответы на них. Я не берусь оценивать полезность вопросов и их смысл. Просто пишу все как есть, надо признать, что часть из них меня здорово обескуражили и мне пришлось уходить не солоно хлебавши, вспоминая один забавный анекдот:
"- Ну как на собеседование сходил? Успешно? - Да. Ручку у них спер" (ссылка)
Часть вопросов будет по typescript, часть по javascript, что-то будет из html, Node.js, настройки, библиотеки, концепции. В общем всё то, о чем говорят на собеседованиях.