​Практикуемся в React, TypeScript и MobX

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

https://tproger.ru/articles/sozdanie-todo-list-beskonechnoj-vlozhennosti-react-typescript-mobx

#веб react #typescript #фронтенд

​Стал ли пользователь ленивее?

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

Действительно ли пользователи стали ленивыми? Давайте разбираться: https://tproger.ru/articles/stal-li-polzovatel-lenivee-spojler-net-no-karty-emu-vsyo-ravno-nuzhny

#тренды #ux #веб

​Как работает современный веб?

На картинке — краткая архитектура современного веба. А по ссылке до сих пор актуальная статья, которая поможет разобраться с тем, как это работает:

https://tproger.ru/translations/web-architecture-101/

#веб

​httpx vs. requests vs. aiohttp: что лучше?

С библиотекой requests питонисты знакомятся в первый же год, ведь на взаимодействии программ с веб-приложениями держится очень многое. HTTP-запросы позволяют общаться с API всевозможных сервисов, автоматизировать сбор данных с веб-страниц и в целом дают всевозможным системам взаимодействовать на расстоянии.

Разобрали на примере, какая из библиотек справляется лучше и как асинхронность влияет на скорость исполнения массовых запросов: https://tproger.ru/articles/http-vs-requests-vs-aiohttp-kto-luchwe

#python #веб

​Четыре новые функции CSS, которые обеспечивают плавную анимацию и переходы в новых версиях Chrome

Если у вас уже перестал дергаться глаз от времён, когда нужно было поддерживать IE, пришла пора обратить на новые фичи Chrome.

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

И вот как использовать новые фичи: https://tproger.ru/articles/chetyre-novye-funkcii-css-dlya-plavnoj-animacii-vhoda-i-vyhoda

#веб #chrome #фронтенд

Разработчики Node.js сообщили о выпуске версии 21

Что нового, вкратце:
— обновили JavaScript-движок V8 до 11.8,
— включили стабильные версии fetch и WebStreams,
— в конце октября Node.js 20 перейдёт в LTS,
— 21 версия будет поддерживаться следующие шесть месяцев.

Основные нововведения:
— fetch и WebStreams получили статус стабильных после недавнего обновления.
— Добавили экспериментальную имплементацию WebSocket, активируется флагом --experimental-websocket.
— Включили JavaScript-движок V8, который поддерживает новые функции и улучшенную производительность.
— Во время запуска тестов теперь можно использовать glob-выражения в параметрах --test.
— Новый экспериментальный флаг --experimental-default-type позволяет изменить систему модулей по умолчанию.
— Если передать флаг --experimental-wasm-modules, то файлы без расширений будут восприниматься как WebAssembly, если они начинаются на \0asm.
— Удалили поддержку globalPreload, вместо этого рекомендуется initialize для установки связи между потоками и register для отправки данных из потока приложения.

Подробнее о нововведениях: https://nodejs.org/en/blog/announcements/v21-release-announce

#javascript #веб #nodejs

​Разработчик придумал грубое наказание для сайтов, которые воруют его веб-игру при помощи iframe

Бесплатная игра Sqword — несложная головоломка, в которой нужно последовательно размещать буквы в сетке 5×5, чтобы получилось как можно больше слов.

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

Чтобы это исправить, Симмонс добавил в код пасхалку. Теперь, если сайт обнаружит, что игра загружается в iframe-окне, он отобразит goatse, старый NSFW-мем. Для посетителей сайта будет отображаться непристойное фото и сообщение: «Я краду чужой код, потому что я полное ничтожество».

Как минимум несколько сайтов до сих пор не заметили, что украденная ими игра заменилась на одну из самых неприятных картинок в интернете. Другие сайты просто заменили игру.

Веб-разработчики, будьте повнимательнее с iframe. Геймдевелоперы, к вам вопросов нет.

#кек #веб #gamedev

​Вышла новая версия React-фреймворка Next.js 14

26 октября разработчики выпустили новый релиз Next.js. Из основных нововведений: релиз ускоряет время сборки в 2 раза, а Server Actions позволяет выполнять код на сервере.

Что ещё нового в Next 14:
— Ускоренный компилятор: Rust-based компилятор Turbopack обеспечивает стабильность и производительность.
— Fast Refresh ускоряет обновление кода до 94,7%.
— Введены маршруты API для упрощения создания внутренних эндпоинтов.
— Серверные действия позволяют определить функции, выполняемые на сервере и вызываемые из React-компонентов.
— Частичная предварительная отрисовка (Prerendering) оптимизирует отрисовку динамического контента.
— Улучшена обработка метаданных для более плавного пользовательского опыта и предотвращения проблем.
— Запущен новый бесплатный курс Next.js Learn для обучения разработчиков.

Подробнее: https://github.com/vercel/next.js/releases/tag/v14.0.0

#react #веб #фронтенд

​Как сделать сайт в стиле терминала за считанные минуты

Нашли очень интересный, настраиваемый и простой в использовании шаблон в стиле терминала, созданный на базе Next.js. Делимся с вами.

Для изменения контента сайта нужно работать только с одним файлом config.json. А ещё LiveTerm также можно использовать с Docker.

Сохраните, чтобы не потерять. Кто знает, когда такая красота пригодится: https://github.com/Cveinnt/LiveTerm

#веб

​Новые единицы измерения в вебе — svh, lvh и dvh: для чего нужны и как их использовать?

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

Если вкратце, единицы измерения svh, lvh, dvh решают эту проблему, позволяя избавиться от ненужного скролла:
1. SVH (small viewport height) — единица измерения, которая задает самый маленький размер viewport, когда панель навигации отображается.
2. LVH (large viewport height) — задает размеры по самому большому размеру viewport, когда панель навигации скрыта.
3. DVH (Dynamic viewport height) динамически меняет значение высоты относительно того, открыта панель с навигацией или нет.

Их анонсировали несколько месяцев назад, они только начинают входить в обиход. Но эти единицы измерения можно использовать прямо сейчас. Согласно сайту can i use, они поддерживаются во всех современных браузерах.

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

Такого ужасного интерфейса вы ещё не видели

Наверное, все однажды встречали неудобную форму для ввода данных на сайте, но насколько она было неудобной? А что, если в одной месте будет собрана целая коллекция форм ввода номера с адовым UX.

Попробуйте ввести свой номер хотя бы в 3 формы и не получить при этом нервный срыв: https://fun.mishasaidov.com/badux/

#кек #веб

Что изменилось в CSS за последние несколько лет

Есть ли во фронтенде что-нибудь, что развивается так же быстро, как CSS в наши дни? Все чаще выходят обновления, позволяющие реже зависеть от замысловатых имен классов, меньше думать о выборе правильной функции и дающие возможность избежать необходимости предварительно вычислять математические параметры.

О том, что нового появилось в в CSS за последние годы вы сможете узнать здесь.

И нет, в статье не будет разбора и упоминания каждой новой функции за последние 5 лет, но в ней вы сможете узнать о новинках, оказавших наибольшее влияние на повседневную работу с CSS.

#веб #фронтенд #css

​​CSS в 2023 году: главные изменения

Не так давно компания Google представила обновления в CSS, вышедшие за прошлый год. А мы выделили для вас главные нововведения и рассказали о них кратко, просто и с примерами кода.

Узнать про архитектурные основы, работу с цветом, типографику, отзывчивую вёрстку и многое другое, вы сможете здесь.

#веб #фронтенд #cs

Самые чудовищные регуляторы громкости

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

Как вы думаете, на каком из них вы бы сдались?

#кек #веб

​​Как исполняется код JavaScript и почему эти знания — суперсила веб-разработчиков?

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

Зная тонкости преобразования кода, вы научитесь писать качественные программы, работающие без подвисаний и разумно использующие имеющиеся API. И наконец-то сможете понять, почему JavaScript может показаться странным.

Да, это не самая простая тема. Но вот несколько материалов, которые точно помогут в ней разобраться и здорово прокачать скилл работы c JavaScript:

1. Компактная статья с доступными объяснениями и крутыми анимациями: https://dev.to/lydiahallie/javascript-visualized-the-javascript-engine-4cdf

2. Серия из 19 статей на русском, после которых у вас точно не останется вопросов: https://habr.com/ru/company/ruvds/blog/337042/

#javascript #веб