Сокровища HTML: 7 тегов, которые упростят вам жизнь
В статье рассказали про 7 HTML-тегов: <sub>, <kbd>, <samp>, <bdo>, <abbr>, optgroup>, <datalist>. Возможно, вы еще не открыли их для себя, а зря! В статье разбирают, чем они полезны, как работают и насколько поддерживаются современными браузерами:
https://habr.com/ru/articles/774112/
#html
В статье рассказали про 7 HTML-тегов: <sub>, <kbd>, <samp>, <bdo>, <abbr>, optgroup>, <datalist>. Возможно, вы еще не открыли их для себя, а зря! В статье разбирают, чем они полезны, как работают и насколько поддерживаются современными браузерами:
https://habr.com/ru/articles/774112/
#html
❤17👍1
Реально ли создать 3D-шутер на React + Three.js?
В современной веб-разработке границы между классическими и веб-приложениями стираются с каждым днём. Сегодня можно создавать не только интерактивные сайты, но и полноценные игры прямо в браузере.
Автор серии статей делает шутер и рассказывает о процессе в формате пошагового гайда. Код проекта и ссылки на статьи на английском: https://github.com/JI0PATA/fps-game
Перевод одной из частей на русском: https://habr.com/ru/articles/774090/
#threejs #react #gamedev
В современной веб-разработке границы между классическими и веб-приложениями стираются с каждым днём. Сегодня можно создавать не только интерактивные сайты, но и полноценные игры прямо в браузере.
Автор серии статей делает шутер и рассказывает о процессе в формате пошагового гайда. Код проекта и ссылки на статьи на английском: https://github.com/JI0PATA/fps-game
Перевод одной из частей на русском: https://habr.com/ru/articles/774090/
#threejs #react #gamedev
🔥12👍4
Как сделать сайт в стиле терминала за считанные минуты
Забавный, настраиваемый и простой в использовании шаблон в стиле терминала, созданный на базе Next.js.
Для изменения контента сайта нужно работать только с одним файлом config.json. А ещё LiveTerm также можно использовать с Docker.
Сохраните, чтобы не потерять: https://github.com/Cveinnt/LiveTerm
#nextjs
Забавный, настраиваемый и простой в использовании шаблон в стиле терминала, созданный на базе Next.js.
Для изменения контента сайта нужно работать только с одним файлом config.json. А ещё LiveTerm также можно использовать с Docker.
Сохраните, чтобы не потерять: https://github.com/Cveinnt/LiveTerm
#nextjs
👍11🤯2
Атомарный веб-дизайн: принципы работы и разница с UI-китом
Атомарный дизайн (Atomic Design) — новый подход к дизайну интерфейсов, который позволяет дизайнерам и разработчикам структурировать и организовывать элементы дизайна на базовом уровне. Он помогает создавать гибкие, масштабируемые интерфейсы, доступные для всех пользователей независимо от их устройств или предпочтений.
У атомарного дизайна 4 основы:
— Фокус на задачах. Важно определить, какие задачи стоят перед продуктом и как он будет использоваться.
— Простота и ясность. Каждый элемент дизайна должен быть понятным, легко заменяемым и функциональным.
— Гибкость и адаптивность. Продукт может адаптироваться к различным условиям использования и потребностям пользователей.
— Эффективность и производительность. Продукт работает быстро и эффективно, используя минимальное количество ресурсов.
Подробнее в статье: https://tproger.ru/articles/atomarnyj-veb-dizajn-principy-raboty-i-raznica-s-ui-kitom
#дизайн #вёрстка
Атомарный дизайн (Atomic Design) — новый подход к дизайну интерфейсов, который позволяет дизайнерам и разработчикам структурировать и организовывать элементы дизайна на базовом уровне. Он помогает создавать гибкие, масштабируемые интерфейсы, доступные для всех пользователей независимо от их устройств или предпочтений.
У атомарного дизайна 4 основы:
— Фокус на задачах. Важно определить, какие задачи стоят перед продуктом и как он будет использоваться.
— Простота и ясность. Каждый элемент дизайна должен быть понятным, легко заменяемым и функциональным.
— Гибкость и адаптивность. Продукт может адаптироваться к различным условиям использования и потребностям пользователей.
— Эффективность и производительность. Продукт работает быстро и эффективно, используя минимальное количество ресурсов.
Подробнее в статье: https://tproger.ru/articles/atomarnyj-veb-dizajn-principy-raboty-i-raznica-s-ui-kitom
#дизайн #вёрстка
👍8👎2
Больше codepen-проектов вам в ленту: на этот раз делимся 3D-инсталяцией на основе HTML, CSS и ThreeJS
Конечно, сходу сложно представить, где можно использовать именно ее. Но можно почерпнуть что-то полезное из исходников: https://codepen.io/ricardoolivaalonso/pen/NWeodeN
#codepen
Конечно, сходу сложно представить, где можно использовать именно ее. Но можно почерпнуть что-то полезное из исходников: https://codepen.io/ricardoolivaalonso/pen/NWeodeN
#codepen
🔥15👍3❤1
Old but gold: Как повысить производительность бэкенд-приложений
Со временем бэкенд может разрастаться до гигантских масштабов. Неправильная стратегия при проектировании бэкенд-системы может сыграть с вами злую шутку и сделать систему не производительной. Как этого избежать и выжимать из бэкенда максимум, узнаете тут:
Многие вещи из статьи по-прежнему актуальны. Особенно, если знаете, как получить доступ к «ньюрелик» и «датадог»: https://nuancesprog.ru/p/16485/
#бэкенд
Со временем бэкенд может разрастаться до гигантских масштабов. Неправильная стратегия при проектировании бэкенд-системы может сыграть с вами злую шутку и сделать систему не производительной. Как этого избежать и выжимать из бэкенда максимум, узнаете тут:
Многие вещи из статьи по-прежнему актуальны. Особенно, если знаете, как получить доступ к «ньюрелик» и «датадог»: https://nuancesprog.ru/p/16485/
#бэкенд
❤2
Cyber Swiss Army Knife: швейцарский нож для данных
Иногда мы делимся годными инструментами для разработчиков: по мере того, как находим их сами. Сегодня именно такой день. Оригинальное название хорошо передает предназначение инструмента — Cyber Swiss Army Knife.
Платформа предназначена для выполнения широкого спектра «кибер» задач через браузер, включая кодирование и декодирование данных, шифрование, создание двоичных и шестнадцатеричных дампов, сжатие и распаковку данных, вычисление хешей и контрольных сумм, анализ сетевых данных и т.д
Это отличный сборник готовых конструкций, который решает проблемы работы с данными. Отдельно здорово, что в нём можно собирать цепочки из операций над данными и делиться ими простой ссылкой.
Исходники доступны на гитхабе: https://gchq.github.io/CyberChef/
#инструменты
Иногда мы делимся годными инструментами для разработчиков: по мере того, как находим их сами. Сегодня именно такой день. Оригинальное название хорошо передает предназначение инструмента — Cyber Swiss Army Knife.
Платформа предназначена для выполнения широкого спектра «кибер» задач через браузер, включая кодирование и декодирование данных, шифрование, создание двоичных и шестнадцатеричных дампов, сжатие и распаковку данных, вычисление хешей и контрольных сумм, анализ сетевых данных и т.д
Это отличный сборник готовых конструкций, который решает проблемы работы с данными. Отдельно здорово, что в нём можно собирать цепочки из операций над данными и делиться ими простой ссылкой.
Исходники доступны на гитхабе: https://gchq.github.io/CyberChef/
#инструменты
👍1
Объясните делегирование событий в JavaScript
Всплытие событий позволяет реализовать один из самых важных приёмов разработки — делегирование.
Он заключается в том, что если у нас есть много элементов, события на которых нужно обрабатывать похожим образом, то вместо того, чтобы назначать обработчик каждому, мы ставим один обработчик на их общего предка.
Из него можно получить целевой элемент event.target, понять на каком потомке произошло событие и обработать его.
Алгоритм:
1. Вешаем обработчик на контейнер.
2. В обработчике: получаем event.target.
3. В обработчике: если event.target или один из его родителей в контейнере (this) – интересующий нас элемент – обрабатываем его.
Зачем использовать:
1. Упрощает инициализацию и экономит память: не нужно вешать много обработчиков.
2. Меньше кода: при добавлении и удалении элементов не нужно ставить или снимать обработчики.
3. Удобство изменений: можно массово добавлять или удалять элементы путём изменения innerHTML.
#основы #собеседование #javascript
Всплытие событий позволяет реализовать один из самых важных приёмов разработки — делегирование.
Он заключается в том, что если у нас есть много элементов, события на которых нужно обрабатывать похожим образом, то вместо того, чтобы назначать обработчик каждому, мы ставим один обработчик на их общего предка.
Из него можно получить целевой элемент event.target, понять на каком потомке произошло событие и обработать его.
Алгоритм:
1. Вешаем обработчик на контейнер.
2. В обработчике: получаем event.target.
3. В обработчике: если event.target или один из его родителей в контейнере (this) – интересующий нас элемент – обрабатываем его.
Зачем использовать:
1. Упрощает инициализацию и экономит память: не нужно вешать много обработчиков.
2. Меньше кода: при добавлении и удалении элементов не нужно ставить или снимать обработчики.
3. Удобство изменений: можно массово добавлять или удалять элементы путём изменения innerHTML.
#основы #собеседование #javascript
👍22🤔2🤩1
С помощью пет-проектов можно научиться чему-то и получить удовольствие. А если этот пет-проект — игра, удовольствие удваивается.
Нашли репозиторий с базовыми реализациями нескольких игр: от Doodle Jump до Boomberman и «тетриса». Все на основе HTML и JS. Просто выбираете понравившийся проект, вникаете в его устройство и допиливаете до идеала: https://gist.github.com/straker/b96a4a68bd6d79cf75a833d98a2b654f
#gamedev #петпроект
Нашли репозиторий с базовыми реализациями нескольких игр: от Doodle Jump до Boomberman и «тетриса». Все на основе HTML и JS. Просто выбираете понравившийся проект, вникаете в его устройство и допиливаете до идеала: https://gist.github.com/straker/b96a4a68bd6d79cf75a833d98a2b654f
#gamedev #петпроект
❤7👍3
Как команде учиться вместе, когда все такие разные?
Обучение команды может помочь сотрудникам обменяться опытом, обогатить багаж знаний и сплотить коллектив. Но как это сделать, если каждый участник группы специализируется на чём-то своём, и у всех уникальные любимые и нелюбимые области и особенный опыт?
В этой статье вы узнаете, как подобрать для разнородной команды оптимальные форматы и ритм занятий. Нужен ли волшебный пинок коллективу и как правильно донести до коллег важность образовательных мероприятий.
Обучение команды может помочь сотрудникам обменяться опытом, обогатить багаж знаний и сплотить коллектив. Но как это сделать, если каждый участник группы специализируется на чём-то своём, и у всех уникальные любимые и нелюбимые области и особенный опыт?
В этой статье вы узнаете, как подобрать для разнородной команды оптимальные форматы и ритм занятий. Нужен ли волшебный пинок коллективу и как правильно донести до коллег важность образовательных мероприятий.
К нам на сайт пришли разработчики SQL Academy и рассказали про внутрянку разработки своего проекта
Рекомендуем к прочтению, если вы:
— искали годную платформу для обучения SQL,
— интересуетесь продуктовой веб-разработкой,
— кайфуете от мотивирущих историй самых обычных ребят.
Enjoy: https://tproger.ru/articles/opyt-razrabotki-sql-academy-ot-sql-trenazhera-do-onlajn-kursa-s-soobshhestvom
#инструмент #sql #курс
Рекомендуем к прочтению, если вы:
— искали годную платформу для обучения SQL,
— интересуетесь продуктовой веб-разработкой,
— кайфуете от мотивирущих историй самых обычных ребят.
Enjoy: https://tproger.ru/articles/opyt-razrabotki-sql-academy-ot-sql-trenazhera-do-onlajn-kursa-s-soobshhestvom
#инструмент #sql #курс
👍4❤2
Selenium: пишем парсер для меняющегося сайта
Перед большинством Python-разработчиков рано или поздно встает вопрос сбора данных из сети. У дата-сайентистов, например, этот навык вообще считается само собой разумеющимся, и трудности освоения парсинговых библиотек принято проскакивать как нечто простое. На деле же легко упереться и в меняющиеся классы, и в необходимость проскочить защиту сайта.
В этой статье мы разберемся, как обходить защиту в виде меняющихся классов и изучим некоторые нюансы этой популярнейшей библиотеки: https://tproger.ru/articles/selenium-pishem-parser-dlya-menyayushhegosya-sajta
#python #библиотека #парсинг
Перед большинством Python-разработчиков рано или поздно встает вопрос сбора данных из сети. У дата-сайентистов, например, этот навык вообще считается само собой разумеющимся, и трудности освоения парсинговых библиотек принято проскакивать как нечто простое. На деле же легко упереться и в меняющиеся классы, и в необходимость проскочить защиту сайта.
В этой статье мы разберемся, как обходить защиту в виде меняющихся классов и изучим некоторые нюансы этой популярнейшей библиотеки: https://tproger.ru/articles/selenium-pishem-parser-dlya-menyayushhegosya-sajta
#python #библиотека #парсинг
👍4
TinyMCE: простой, но мощный текстовый редактор для веба
TinyMCE идеально подходит для создания и редактирования контента, обеспечивая пользователям интуитивный интерфейс и широкий набор инструментов для форматирования текста
Интерфейс интуитивный, поэтому с редактором справятся юзеры всех уровней. Недостатком же может быть ограниченный набор продвинутых функций в бесплатной версии. Но для базовых задач ее достаточно.
#инструменты
TinyMCE идеально подходит для создания и редактирования контента, обеспечивая пользователям интуитивный интерфейс и широкий набор инструментов для форматирования текста
Интерфейс интуитивный, поэтому с редактором справятся юзеры всех уровней. Недостатком же может быть ограниченный набор продвинутых функций в бесплатной версии. Но для базовых задач ее достаточно.
#инструменты
👍4
Интересные трюки HTML: экстремальный минимализм
Что будет, если перегнуть палку оптимизации сайтов? Например, придумать способ поместить весь сайт в адресную строку браузера.
Оказывается, и такое возможно. А с помощью сокращателя ссылок даже большой сайт сжимается до восьми байт. Подробнее о том, как это работает — в статье: https://habr.com/ru/companies/ruvds/articles/771388/
#html #css #лучшиепрактики
Что будет, если перегнуть палку оптимизации сайтов? Например, придумать способ поместить весь сайт в адресную строку браузера.
Оказывается, и такое возможно. А с помощью сокращателя ссылок даже большой сайт сжимается до восьми байт. Подробнее о том, как это работает — в статье: https://habr.com/ru/companies/ruvds/articles/771388/
#html #css #лучшиепрактики
👍4
Что учить веб-разработчику: проект, на котором в удобной форме собраны большинство инструментов/тем с пояснениями и ссылками на ресурсы.
HTML, CSS, JS, PWA, фреймворки, тестирование, безопасность, архитектура, дизайн, алгоритмы, базы данных — всё есть:
https://andreasbm.github.io/web-skills/
#инструменты #шпаргалки
HTML, CSS, JS, PWA, фреймворки, тестирование, безопасность, архитектура, дизайн, алгоритмы, базы данных — всё есть:
https://andreasbm.github.io/web-skills/
#инструменты #шпаргалки
👍23