HTML *

Можно ли расти профессионально, не меняя работу. Думаю, я не одна, кто задавался этим вопросом.

В данной статье будет рассказана история одной мобильной игры разрабатываемой на HTML, CSS, JavaScript, jQuery, Apache Cordova и Firebase. Также будут освещены следующие вопросы:

- Стоит ли использовать jQuery?

- Стоит ли вообще разрабатывать мобильные игры на JS с нуля?

Дайджест новостей из мира фронтенд-разработки за последнюю неделю 18 — 24 апреля 2022.

Появились первые рабочие черновики WebAssembly Core Specification 2.0 — стандарт, описывающий безопасный низкоуровневый код, WebAssembly JavaScript Interface 2.0 — стандарт взаимодействия API JavaScript с WebAssembly и WebAssembly Web API 2.0 — стандарт интеграции WebAssembly с остальной веб-платформой.

Chromium начинает экспериментальное прототипирование CSS Toggles. CSS Toggles - декларативный механизм для указания состояния, описывающего поведение.

Node.js v18.0.0 уже здесь, но Current. Не переживайте, так как переход на LTS планируется уже в октябре.

Вы когда-нибудь задумывались о селекторе CSS, где вы проверяете, существует ли конкретный элемент внутри родителя? Например, если у компонента карты есть миниатюра, нам нужно добавить к нему display: flex. Это было невозможно в CSS, но теперь у нас будет новый селектор CSS :has, который поможет нам выбрать родителя определенного элемента и многое другое.

В этой статье я объясню проблему, которую решает :has, как он работает, где и как мы можем его использовать с некоторыми вариантами использования и примерами, и, самое главное, как мы можем использовать его уже сегодня.

Demo | GitHub

Статья про редактор текста как на рисунке. Исходный код прилагается.

Дайджест новостей из мира фронтенд-разработки за последнюю неделю 11 — 17 апреля 2022.

Материалом о разработке калькулятора на CSS и HTML, без файла JS, тега script и обработчиков событий в HTML делимся к старту курса по Fullstack-разработке на Python. За подробностями приглашаем под кат.

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

Если система не установлена или возникли какие-то проблемы с ее настройкой (например, при попытке изменить правила межсетевого экрана), доступ можно потерять. В таких ситуациях на помощь приходят специализированные контроллеры, позволяющие управлять серверами без ОС, как если бы вы сидели за физической консолью. Рассказываем, как это работает у нас в HOSTKEY.

Анимация — это переход элемента от одного состояния к другому. Пользователям нравится, когда на сайте что-то вращается, появляются новые элементы или происходит что-то неожиданное. Если на сайте много таких «вау-эффектов», он может стать вирусным или получить какую-нибудь премию, например, Awwwards.

Чаще всего дизайнер отрисовывает анимацию в специальной программе, например, After Effects, и присылает верстальщику видео, по которому нужно повторить анимацию. А вот как реализовать эту идею — решать разработчику. Он может использовать три вида анимаций: CSS-анимации, SVG-анимации или JavaScript-анимации.

Давайте разберёмся, что представляет собой каждый из видов, а ещё как создать и оптимизировать простую анимацию своими руками. И осторожно, под катом много гифок и видео.

Анимация на КПДВ: Дилан Баунманн, codepen.

Функция CSS :where() — новейшее детище в блоке псевдоклассов. Она принимает список селекторов в качестве аргументов и минимизирует их, позволяя вам писать меньше кода и в то же время стилизовать их все вместе.

В этом уроке мы узнаем про функцию псевдокласса :where() и покажем, как ее можно использовать в продакшене. Мы обсудим наложение, специфичность в отношении функции :where(), а также рассмотрим некоторые конкретные варианты использования.

Поехали!

Какие языки/технологии вам бы хотелось изучить или узнать глубже в этом году?

Мой выбор: typescript, next.js, react, graphql, solidity, node — Мэдисон Канна (@Madisonkanna) January 3, 2022

Дайджест новостей из мира фронтенд-разработки за последнюю неделю 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 доступным для каждого. В 2020 году мы многое сделали, чтобы значительно улучшить ассебилити в приложении. Остаётся ещё много работы, но мы уже сейчас можем рассказать об одном из наших последних проектов - Навигация по клавиатуре.

Далее по катом.

«Почему бы не сделать одну сетку и работать с ней?», — подумал Senior Frontend Developer @manmo и внедрил идею стандартизированных резиновых эластичных сеток в департамент Frontend-разработки компании.

Рассказываем, как это решение облегчило работу верстальщиков и сэкономило время на проектах.

Материал предназначен для дизайнеров и frontend-разработчиков. Дизайнеры поймут, как минимизировать количество работы для верстальщиков, и тем самым получить их одобрение. Верстальщики научатся экономить свои ресурсы, силы и мозги, чтоб потратить их на более полезные задачи, чем расчёт непонятных сеток.

5 причин для того чтобы использовать Bulma в вашем следующем проекте.

Bulma это open-source, адаптивный и легковесный CSS фреймворк базирующийся на flexbox сетке. Этот новый фреймворк уже завоевал сердца многих разработчиков.

Итак, в этой статье, я расскажу о пяти причинах, почему разработчики любят Bulma.

Мой путь по созданию бота в Telegram.

Попытки побороть баг связанный с временем доставки, и синхронизировать обновление интервалов на сервере и на клиенте.

Как сделать плавный анимированный переход на сайте без использования специальных библиотек? Урок использования псевдоэлементов CSS для создания эффектов: от анимированной кнопки до карточки профиля. Подходит новичкам.

Меня зовут Николай, я Frontend-разработчик IT-компании Relog. Хочу рассказать о самых распространённых ошибках в вёрстке современных проектов.

Дело в том, что лишь малая часть современных фронтендеров обращает внимание на работу с HTML и CSS, предпочитая готовые решения, вроде UI-библиотек и систем сеток. Но эти решения неидеальные и приходится дописывать обёртки вокруг них, видоизменять код, переписывать стили и совершать прочие действия для соответствия требованиям проекта. Тут-то и начинаются проблемы: вёрстка местами становится избыточной, стили переназначются через important и с каждым релизом проект всё сложней поддерживать. Я уже не говорю об удобстве использования и доступности. Об этом думают вообще в последнюю очередь.

В этой статье я расскажу лишь о небольшой части проблем, которые можно достаточно быстро решить, не прибегая к радикальному переписыванию больших частей проекта.