​Возможности и перспективы 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 #фронтенд

​Как устроена Figma с точки зрения вёрстки

Ахмад Шадид покопался в вёрстке Figma и нашёл несколько интересных вариантов использования Flexbox и Grid. В этой статье он показал их и продемонстрировал насколько мощны сегодня эти способы расположения элементов.

Подробнее:

https://ishadeed.com/article/figma-css/

#css #figma

​Todo Tree — расширение для поиска слабых мест в коде по вашим комментариям

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

Скачать можно тут:

https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree

#vscode

​Как уменьшить размер JavaScript SDK на 29%

Разработчики из Sentry долго ломали голову над этим вопросом, ведь им необходимо было сохранить все возможности пакета, включая мониторинг производительности, сохраняя при этом управляемые размер пакета. Вдобавок, такой серьёзный рефакторинг мог повлиять на проекты разработчиков, использующих SDK Sentry.

Как в итоге им всё-таки удалось уменьшить размер пакета почти на треть, узнаете тут:

https://blog.sentry.io/2022/07/19/javascript-sdk-package-reduced/

#javascript #рефакторинг

​Что лучше: Flutter или React Native

Споры о том, какая из платформ лучше бурлят уже давно. И умные люди говорят, что всё зависит от конкретной задачи. Но автор этой статьи считает, что так неинтересно и настаивает на том, что Flutter всё же опережает React Native.

С его аргументами можно ознакомиться здесь:

https://shift.infinite.red/flutter-is-better-than-react-native-fed10c92a768

#flutter #reactnative #mobidev

Что почитать. JavaScript для профессиональных веб-разработчиков [4-е издание]

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

В книге вы найдете:

— последнюю информацию о классах, промисах, async/await, прокси, итераторах, генераторах, символах, модулях и операторах spread/rest;
— фундаментальные концепции веб-разработки: DOM, BOM, события, формы, JSON, обработка ошибок и веб-анимация;
— расширенные API-интерфейсы: service workers, fetch, атомизация, потоки, каналы сообщений и веб-криптография;
— а также сотни рабочих примеров кода.

#книга #javascript