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

В этом 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 #фронтенд

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

Евгений — 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 #фронтенд