​Нецелевое использование assert-функций в TypeScript

Представьте, что у вас есть старый JS API, зависящий от мутирования передаваемого ему объекта, или не представляйте, а взгляните на код, с которым вы работаете сейчас и всплакните ещё раз. Так вот, автор этой статьи придумал, как применить assert-функцию, чтобы актуализировать старый код с учётом типов данных.

Подробнее:

https://habr.com/ru/company/ruvds/blog/664600/

#typescript

​«Я всё время неправильно создавал формы в React.js»

Если вам часто приходится создавать формы с помощью React, то вы наверняка сталкивались с необходимостью использования множества useState для различных элементов формы.

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

https://dev.to/kuvambhardwaj/i-was-creating-forms-the-wrong-way-all-along-in-reactjs-hl3

#фронтенд #react

Если что-то не работает — возвращай строку!

​Wasp — язык для разработки полнофункциональных веб-приложений на Javascript без использования шаблонов

Встречайте Wasp — новый язык программирования для разработки полнофункциональных веб-приложений с меньшим количеством кода. Он упрощает разработку веб-приложений, но при этом позволяет использовать новейшие технологии, такие как React, Node.js и Prisma.

В этой статьей вы узнаете, чем полезен Wasp, в каких ситуациях может пригодится и какие перспективы имеет:

https://blog.devgenius.io/wasp-language-for-developing-full-stack-javascript-web-apps-with-no-boilerplate-84137afd4f4b

Необычный datepicker на GSAP

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

https://codepen.io/aaroniker/pen/MWQjxro

#codepen

​Web Speech API в JavaScript: от текста к речи

Для того, чтобы преобразовать текст в речь в JavaScript существует готовое API под названием Web Speech API. Если хотите добавить на ваш сайт или в ваше приложение такую удобную функцию, то в этой статье автор вместе с читателями разбирается в её возможностях и функционале:

https://nuancesprog.ru/p/16036/

#javascript

​Гарвардский университет сегодня запускает бесплатный курс по веб-программированию с помощью Python и JavaScript

Вы, возможно, уже слышали о популярном курсе университета CS50, который охватывает множество тем и при этом доходчиво разъясняет каждую из них. А сегодняшний курс позволит вам более глубоко погрузиться в разработку с помощью Python, JavaScript и SQL с использованием таких фреймворков, как Django, React и Bootstrap.

Это отличный шанс не только прокачать навыки разработки, но и подтянуть английский:

https://www.edx.org/course/cs50s-web-programming-with-python-and-javascript

#курс #javascript #python

​Как создавать игры на pixi.js

Небольшой плейлист по pixi.js для создания игр и динамики на сайте. Если вы давно хотели разрабатывать игры на javascript, то время пришло. Автор покажет вам, как с помощью библиотеки pixi.js можно создать игру:

https://youtu.be/chYS7Dt8_rA?list=PLoYUIcUCRmBxcMbtWDw0SbjAO3U_q3gBg

#видео #pixijs

​Как обнаружить мёртвый код во внешнем проекте

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

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

https://blog.logrocket.com/how-detect-dead-code-frontend-project/

​Виды анимации на верстке: свойства, особенности, примеры кода

Во фронтенде можно создать анимацию самыми разными способами. В этой статье высможете разобраться CSS Transition, CSS Animation, SVG animation, JS-Анимацию, JS canvas, WebGL и ThreeJs. Причём не только с точки зрения удобства, но и эффективности, плавности и оптимизации.

Подробнее:

https://tproger.ru/articles/vidy-animacii-na-verstke-svojstva-osobennosti-primery-koda/

#фронтенд

​Fresh — новый full stack фреймворк для Deno

Ещё один плюс в пользу Deno. Как мы уже рассказывали ранее, Deno является аналогом Node.js, но при этом быстрее. Теперь ещё больше смысла перейти с устаревшего Node.js.

Fresh позиционируется как современный фреймворк на TS/JS, спроектированный для легкого создания высококачественных и производительных веб-приложений. Подробнее о нём:

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

#deno #fullstack

​Scrollbar в современном CSS

Полоса прокрутки присутствует сегодня на любом сайте видимо или невидимо. Это вполне обыденный элемент, на который обычно никто не обращает особого внимания.

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

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

#фронтенд #css

​Почему ваш веб-сайт должен весить меньше 14 КБ?

А вы знали, что страница на 15 КБ будет грузиться гораздо медленнее, чем страница на 14 КБ? Несмотря на разницу всего в 1 КБ, приблизительная задержка резко возрастает на 612 мс.

Так происходит из-за алгоритма медленного старта TCP. В статье — о том, что это такое, как оно работает и почему это важно: https://habr.com/ru/post/684836/

#интернет

​Пишем переключатель темы на базе файлов cookie с помощью CSS и ванильного JavaScript

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

https://nuancesprog.ru/p/16119/

#фронтенд #css #javascript

Чувствуете это превосходство?

​Лайфхаки по созданию углов с помощью CSS Mask и свойства Clip-Path

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

Убедитесь сами и берите эти советы на вооружение:

https://css-tricks.com/cut-corners-using-css-mask-and-clip-path-properties/

#css #фронтенд

​Удобный способ использовать SVG в React

Добавить SVG на сайт можно совершенно разными способами. Но если вы хотите полноценно использовать все возможности SVG, то необходимо вставлять изображение непосредственно в HTML-разметку. Или нет?

В этой статье вы найдёте ещё один хитрый, но при этом удобный способ:

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

#react #svg

​Полное руководство по push-уведомлениям для разработчиков

Руководитель отдела дизайна OneSignal решил поделиться своим опытом и инсайтами касаемо работы push-уведомлений в веб-приложениях. В этой статье вы также узнаете интересные факты и рекомендации по использованию пушей:

https://www.smashingmagazine.com/2022/04/guide-push-notifications-developers/

Как создать многоуровневое выпадающее меню в React

Многоуровневое меню предоставляет несколько вариантов выбора, делая панель навигации динамичным и организованным. В этом руководстве вы пошагово рассмотрите процесс реализации функции раскрывающегося списка в React:

https://blog.logrocket.com/how-create-multilevel-dropdown-menu-react/

#фронтенд #react

Анимированная полка с вещами

Сodepen-проект «My Stuff» наглядно демонстрирует современные возможности препроцессоров для HTML и CSS, а именно Pug и SCSS. Посмотрите сами, как относительно малым количеством строк, можно реализовать интересный анимированный рисунок:

https://codepen.io/annampawl/pen/yLvoGQY

#codepen #pug #scss