​Как повысить скорость разработки с помощью общедоступных функций 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 #фронтенд

​Интервью с бэкендером: плюсы, минусы, подводные камни профессии

Евгений — backend-разработчик digital-студии INDEX. Уже несколько лет он занимается тем, о чём мечтал в детстве. В этом интервью он ответил на вопросы о том, как попал в профессию, с какими сложностями столкнулся, плюсах и минусах профессии и многом другом.

Почитать можно здесь:

https://vc.ru/dev/507107-intervyu-s-backender-om-kak-osvoitsya-chem-pridetsya-zanimatsya-plyusy-i-minusy-professii-a-takzhe-sovety-novichkam

#бэкенд #интервью

​Возможности и перспективы WebAssembly

WebAssembly был представлен почти 10 лет назад и является одной из важнейших разработок для веб-сферы. Он решил такую проблему, как компиляция кода в код (транспиляция). Также он предложил использовать более эффективный байт-код.

Но почему же он тогда до сих пор не убил JavaScript? В этой статье автор порассуждал на тему возможностей Wasm, его перспектив и недостатков:

https://nuancesprog.ru/p/16336/

#wasm

А что вы думаете об этой технологии?

​Идеи пет-проектов для фронтенд-разработчика

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

В этой статье вы найдёте несколько идей, который можно реализовать — от просто калькулятора до аналога Spotify и не только:

https://habr.com/ru/post/578740/

#фронтенд

​Когда перенёс кусок кода из прошлого проекта в новый:

Карточка с ховером запуска

Эту карточку вы сможете применить у себя на сайте. При наведении на неё изображении увеличивается, а также появляется кнопка пуск для запуска медиа. Реализована на HTML и CSS.

Подробности реализации здесь:

https://codepen.io/jh3y/details/NWMGxdL

#codepen

​Почему, мистер Андерсон, почему?

​Как войти в GameDev JS-разработчику

Многие считают, что идеальным языком программирования для геймдева являются С++ или С#. Но на самом деле даже для JavaScript-разработчиков есть немало вакансий в этой сфере.

Если вам надоело создавать веб-интерфейсы и тянет к играм, то в этом видео автор рассказал, как он перешёл в геймдев, оставаясь верным JavaScript:

https://youtu.be/EoEdWH7hAwU

#gamedev #javascript

​Что нас ожидает в мире веб-разработки в 2023 году

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

Поэтому тут мы предлагаем вам посмотреть на основные тенденции в веб-разработке, которые будут актуальны в следующем году и помогут вам создать наиболее актуальный сайт:

https://yellow.systems/blog/web-development-future-trends

​Семантические теги: зачем нужны и где их применять

Современная вёрстка не ограничивается одними лишь div’ами, несмотря на то, что и с ними она будет выглядеть одинаково для пользователя. Сегодня применяется множество различных семантических тегов, которые улучшают чтение HTML-кода не только разработчиками, но и программами, которые ранжируют сайты в поиске, озвучивают содержимое для людей с ограничениями и так далее.

В этом видео автор подробно рассказал какие семантические теги бывают и как они работают, а также продемонстрировал примеры:

https://youtu.be/VRtiPV0M1vA

#видео #html

Простой способ создать диаграмму с помощью JavaScript

Этот способ создания диаграмм не требует от вас каких-то сложных программ. Всё, что вам необходимо —использовать DgrmJS. Он реализован на ванильном JS, имеет открытый исходный код и весит при этом в 6,5 раз меньше bootstrap.

Подробнее:

https://habr.com/ru/post/648759/

#javascript #инструмент

​Как избежать сдвигов макета <img>: aspect-ratio против атрибутов width и height

Изначально <img> занимает нулевое пространство до загрузки изображения, из-за этого при открытии сайта часто происходит сдвиг, когда на пустом месте появляется изображение. Это очень неудобно и ухудшает качество сайта. К счастью, теперь есть выход, а точнее даже два.

Подробнее о них здесь:

https://jakearchibald.com/2022/img-aspect-ratio/

#css #фронтенд

​Stack Overflow запустил проект Overflow Offline

Он позволяет скачать последнюю версию архива форума через сервис Kiwix. Скачивание было доступно и раньше, но только в версии 2018 года. Теперь же актуальная версия доступна каждому.

Сейчас полная версия архива занимает 80 Гб. Вы можете скачать её здесь на случай проблем с интернетом:

https://library.kiwix.org/stackoverflow.com_en_all_2022-05

#stackoverflow

​Безопасная проверка URL-адреса в JavaScript

Разработчики часто применяют JavaScript, если им нужно обработать URL-адреса в разных формах для различных целей. И этим не прочь воспользоваться злоумышленники. Поэтому нам необходимо реализовать проверку URL-адресов в наших приложениях.

О том, как это сделать узнаете здесь:

https://snyk.io/blog/secure-javascript-url-validation/

#javascript #безопасность

​11 исходных программ JavaScript, предоставляющих шаблоны проектирования

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

https://nuancesprog.ru/p/15565/

#javascript

Контейнерные CSS-запросы наконец-то здесь

С выходом Google Chrome (105) и Safari 16 появилась поддержка контейнерных запросов в CSS. Это даёт гораздо больше возможностей вёрстки. В этой статье вы узнаете, как работают контейнерные запросы, как мы можем их использовать и как выглядит синтаксис, а также увидите несколько реальных примеров и вариантов использования:

https://ishadeed.com/article/container-queries-are-finally-here/

#css #фронтенд

​Как настроить плавную прокрутку свайпом 3D-колеса

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

В этом видео наш подписчик поделился собственным способом решения этой задачи:

https://youtu.be/LdkUGG8f_xg

#видео #фронтенд

Добавляем эффект конфетти на сайт с помощью CSS

Обычно, для этого используются существующие пакеты, но зачем добавлять сайту лишний вес, если можно использовать только чистый CSS и HTML? И это не так уж сложно. Вот подробная инструкция:

https://blog.logrocket.com/how-create-confetti-effect-css/

#css #фронтенд