Как переключаться между классами HTML-элемента

В JavaScript уже есть функция toggle(), которая отлично работает, когда речь идёт об одном или двух классах. Но как быть, если необходимо переключаться между тремя или более классами? На самом деле способов масса. Несколько из них представлены в этой статье — выбирайте какой нравится больше и берите на вооружение:

https://css-tricks.com/cycle-through-classes-html-element/

#html #фронтенд

​Повышение производительности с помощью Web Worker: подробное руководство


JavaScript однопоточен и это может быть проблем для приложений, требующих многозадачности. Однако, для решения этой проблемы существует Web Worker — инструмент, предоставляемый браузерами, который позволяет разработчикам запускать дополнительный скрипт в фоновом режиме.

Подробнее о нём и о том, как с ним работать:

https://blog.bitsrc.io/web-workers-a-step-by-step-guide-to-boosting-performance-with-web-workers-11307238b36e

#javascript

Пинг-понг на JavaScript

Нашли для вас крутую серию статей, по которой вы сможете создать пинг-понг для игры вдвоём на JavaScript. В проекте будет применять Canvas для отрисовки игрового поля и элементов игры.

Подробнее:

https://thecode.media/ping-pong/

#gamedev #canvas #javascript

​Базовый уровень для веб-разработки в 2022 году

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

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

https://engineering.linecorp.com/en/blog/the-baseline-for-web-development-in-2022/

​​Как ведёт себя веб-сайт на сгибающихся смартфонах:

​Топ-5 встроенных баз данных для приложений JavaScript

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

На самом деле, есть много вариантов, например встроенные БД. Подробнее о них в этой статье:

https://blog.bitsrc.io/top-5-embedded-databases-for-javascript-applications-1c68496aebac

#javascript #бд

​Работа с геоданными в Go: как обойти ограничения OpenStreetMaps

OpenStreetMap — это не совсем карта в привычном её понимании, по сути это база данных, которая содержит огромной количество информации о точках земной поверхности, добавляемых простыми пользователями. Из-за этого возникает «разношерстность», когда один и тот же параметр может быть записан в разных форматах. И это также создаёт избыточность при решении многих задач.

В этой статье автор поделился собственным опытом создания сервиса на основе OSM на Go, который по задумке должен определять местоположение транспорта и сравнивать его фактическую скорость с разрешённой в конкретной точке маршрутка, выявляя нарушения скоростного режима. Что в итоге получилось можно прочитать здесь:

https://tproger.ru/articles/rabota-s-geodannymi-v-go-kak-obojti-ogranichenija-openstreetmaps-v-kommercheskoj-razrabotke/

#go #osm

Необычный способ создавать фигуры с помощью CSS

Посмотрите на картинку выше. Как думаете, сколько градиентов необходимо, чтоб нарисовать каждую из фигур? Если вы ответили один, то вы правы.

Если же вы сказали больше и теперь не понимаете, как это возможно, то скорее переходите по ссылке и читайте статью:

https://css-live.ru/tricks/border-image-gradients-sorcery.html

#css #фронтенд

​40 полезных однострочников для JavaScript на любой случай

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

В этой подборке вы найдёте более 40 полезных однострочников, решающих ваши задачи:

https://medium.com/@dreamy-player/40-killer-javascript-one-liners-fc76edaf8439

#javascript

3D-лев без единой строчки JavaScript

Это анимированная картинка бегущего льва, которая выполнена без использования JavaScript. Вся анимация реализована с помощью препроцессоров Pug и SCSS.

Посмотреть, код можно здесь:

https://codepen.io/grantjenkins/pen/ZExEOex

#codepen #javascript

​React: наглядное пособие для начинающих. Создаем свой компонент без знаний JavaScript

Некоторые, наверное, помнят, как терялись в обилии новых слов и технологий, не понимая с чего начинать своё обучение: HTML, CSS, JavaScript, React, Canvas, Vue и прочее.

Вот эта статья как раз для таких же начинающих разработчиков, которые хотят понять, что же такое React и зачем он нужен:

https://habr.com/ru/company/quarkly/blog/552214/

#react

Иллюстрация для самых маленьких

​Как создать MVP бэкенда

История создания бэкенда на Go для системы учёта речных перевозок. Она поможет вам лучше понять, как устроен бэкенд и, возможно, подскажет какие-то интересные решения в коде.

Подробнее:

https://tproger.ru/articles/kak-sozdat-mvp-bjekenda/

#бэкенд #go

Делаем разработку в VS Code уютнее с помощью милых питомцев

Добавьте немного милоты в ваш редактор кода с помощью этого расширения для VS Code, которое будет бегать у вас по экрану, а если захотите, то и поиграет с вами. Это точно круче резиновой уточки на вашем столе, ведь она не принесёт вам мячик.

Кстати, выбрать вы можете не только кошечку или собачку, но также змею, уточку, краба, скрепку Клиппи и других персонажей. Скачайте и выберете себе подходящего питомца:

https://marketplace.visualstudio.com/items?itemName=tonybaloney.vscode-pets

#vscode

Добавляем календарь на ваш сайт с помощью плагина на ванильном JavaScript

Datedropper JS позволит вам добавить современный и простой в использовании дейтпикер. Но несмотря на его простоту, он позволяет гибко настраивать внешний вид, формат, диапазоны дат и многие другие аспекты.

Варианты дизайна и оформления, а также подробная информация тут:

https://felixg.io/products/datedropper-javascript

#библиотека #javascript #html

​Как магические методы в Python помогают прокачать ваш код?

Магические методы — это специальные методы, с помощью которых вы можете добавить в ваши классы «магию». Они всегда обрамлены двумя нижними подчеркиваниями (например, __init__ или __lt__).

Магические методы в языке программирования Python нужны, чтобы реализовывать свойства объектов при их взаимодействии. Вместе с Андреем Мальчуком, backend-разработчиком КРОК, раскроем их «магию» и остановимся на каждом из методов подробно:

https://tprg.ru/Tp52

#python

Красивый параллакс, работающий от скролла

В этом codepen-проекте автор реализовал анимацию смены времени суток с помощью скролла. Для создания анимации использовалась библиотека GSAP. Посмотреть, как это работает можно здесь:

https://codepen.io/isladjan/pen/abdyPBw

#codepen

Можно ли создать игру в духе Legend of Zelda весом всего 13 килобайт?

Оказывается, да. Это доказал автор этой статьи, который написал игру для соревнования s13kGames, где вес игры не может превышать 13 килобайт.

Как он этого добился, как выглядит код и что в итоге получилось, можно почитать здесь:

https://medium.com/hypersphere-codes/how-i-created-a-gameboy-like-game-in-13kb-5905bf6166b2

#javascript #gamedev

​Как повысить скорость разработки с помощью общедоступных функций JavaScript

Это практическое руководство поможет вам писать лаконичный код и повторно использовать вспомогательные функции JS в проектах. Вы сможете переносить их без копирования из проекта в проект, упрощая себе работу в будущем. При этом NPM вам не потребуется.

Подробнее:

https://habr.com/ru/company/rshb/blog/687868/

#javascript

​Как сделать навигацию на сайте документации

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

Подробнее:

https://tproger.ru/articles/krov-pot-i-slezy-kak-ja-peredelal-navigaciju-na-sajte-dokumentacii-i-v-chjom-profit-peredelki/

#ui

​Мини-курс по Bootstrap

Наш подписчик подготовил для вас короткий видеокурс по основам работы с bootstrap. В нём вы быстро научитесь работать с сеткой, узнаете, что такое атомарные классы и компоненты.

Смотрим тут:

Часть 1 — https://youtu.be/8Ti55TgqMZU
Часть 2 — https://youtu.be/YW05WfRKUjI
Часть 3 — https://youtu.be/FONwSmS7zCs

#bootstrap #фронтенд