Обложка канала

Библиотека фронтендера. Страница 5

19371 @frontendproglib
Открыть

Полезные материалы по всему, что может быть интересно frontend-разработчику.

  • Библиотека фронтендера

    «Стоимость» JavaScript в 2023 году: как и почему JavaScript является самым дорогим ресурсом, который сегодня использует ваш сайт, особенно на мобильных устройствах и десктопах. 📺 Смотреть
    The Cost Of JavaScript - 2023

    As we build sites that are more heavily reliant on JavaScript, we sometimes pay for what we send down in ways that we can’t always easily see. In this talk, Addy explains how and why JavaScript is the most expensive resource your site uses today—especially on mobile and lower-end desktops. Web developers should focus on optimizing JavaScript bundles by keeping them small to improve download speeds, especially on mobile devices. Small JavaScript bundles improve network transfer speeds, lower memory usage, and reduce CPU costs.This can be achieved by splitting bundles larger than 50-100 kB. Additionally, it's crucial to enhance execution time by avoiding tasks that overly engage the main thread and by not using large inline scripts over 1 kB. Avoid creating Long Tasks that can keep the main UI thread busy and can push out how soon pages are interactive by users. These steps are vital as parse and compile costs have become faster than before. He will also share tips for fixing JavaScript performance issues so everything loads quicker. A little discipline can help if you want your site to load and be interactive as soon as possible on mobile. A few things that will be covered: - What the dominant costs of heavy JavaScript are - How median hardware plus heavy JavaScript can impact user-experience - Tips and tricks for reducing the cost of JavaScript, reducing long-tasks and improving the Core Web Vitals metrics - Things frameworks and browsers are doing to try reducing the cost of JavaScript by default. - How new performance metrics can help you reason about where to optimize JavaScript to improve user interactions Target Audience: Intermediate web developers Originally presented at Web Unleashed #javascript #webdevelopers #programming #webperformance

    YouTube

  • Библиотека фронтендера

    ⚛ 🤌The React Handbook — то, что вам нужно после чтения официальной документации. Вот основные темы: ✔️Frameworks & Build Tools ✔️Project Standards for High-Quality Code ✔️Ecosystem ✔️Accessibility & Semantics ✔️Styling & UI Libraries ✔️Proficiency with the Hooks API ✔️State Management in React Applications ✔️React Performance & Optimization
    React Handbook

    Modern approaches to architecture and feature development for production-ready React apps.

    reacthandbook.dev

  • Библиотека фронтендера

    11 лучших практик оформления HTML-форм на примере форм входа/регистрации: чек-лист от Андрея Ситника. Читать
    11 HTML best practices for login & sign-up forms—Martian Chronicles, Evil Martians’ team blog

    Even popular sites fail to implement the 11 best practices mentioned in this article, and thus have at least one mistake. Use this checklist on your next pull request review that deals with any form.

    evilmartians.com

  • Реклама

  • Библиотека фронтендера

    Frontend meetup (Online) 1. Построение микрофронтендной архитектуры. Первый взгляд, боли и решения —Никита Морозов, АО "МТТ" В докладе будет представлен путь построения микрофронтендной архитектуры на примере проекта МТС «Exolve», а также поэтапный рассказ об эволюции проекта от webpack до vite, от SingleSPA до собственного решения 2. Бьем монолит. Основные практики — Гузенко Александр IT_ONE Рассмотрим основные подходы к разбиению монолитных фронтедов. 3. Безопасный TypeScript. Защищаемся от any в кодовой базе —Максим Земсков, Яндекс Как получить максимум безопастности при использования TypeScript. Какие настройки стоит использовать и как улучшить типизацию стандартных функций. 4. Beyond Frontend — Алексей Тюльдюков, VK Как T-shape подход может помочь фронтенд разработчику стать техническим менеджером 🗓 12 июля, начало в 19:00 мск, Среда 🚀 Телеграмм канал с анонсами митапов ✅ Регистрация на мероприятие Это #партнерский пост

  • Библиотека фронтендера

    GitHub - gibbok/typescript-book: The Concise TypeScript Book: A Concise Guide to Effective Development in TypeScript. Free and Open Source.

    The Concise TypeScript Book: A Concise Guide to Effective Development in TypeScript. Free and Open Source. - GitHub - gibbok/typescript-book: The Concise TypeScript Book: A Concise Guide to Effecti...

    GitHub

  • Библиотека фронтендера

    🗺️💼 Трудоустройство в России и за рубежом: в чем ключевые отличия Давно мечтали устроиться на работу в иностранную IT-компанию и получать зарплату в долларах или евро? Давайте разберемся, как происходит отбор за рубежом и чем он отличается от трудоустройства в России. 🔗 Основной сайт 🔗 Зеркало
    🗺️💼 Трудоустройство в России и за рубежом: в чем ключевые отличия

    Давно мечтали устроиться на работу в иностранную IT-компанию и получать зарплату в долларах или евро? Давайте разберемся, как происходит отбор за рубежом и чем он отличается от трудоустройства в России.

    Библиотека программиста

  • Библиотека фронтендера

    🎙Подкаст «Веб-стандарты»: Андрей Мелихов, Никита Дубко, Вадим Макеев, Алексей Симоненко про Safari TP, глубину CSS-нестинга, Chrome DevTools, @​property в Firefox, бету TS 5.2, Navigation API, Topics API и AI-ошибку MDN. 00:02:02 Safari TP 00:05:51 Глубина CSS-нестинга 00:15:46 Chrome DevTools 00:25:19 @​property в Firefox 00:27:29 Бета TypeScript 5.2 00:40:58 Navigation API 00:54:55 Реклама и Topics API 01:14:40 AI-ошибка MDN 01:27:48 Ответы на вопросы 🎙 Слушайте на Ютубе 🎙 Ссылки на сайте #podcast

    Веб-стандарты - 376. Safari, CSS-нестинг, DevTools, @property, бета TS 5.2, Navigation…

    audio/mpeg

  • Библиотека фронтендера

    CSS Auditing Tools — Smashing Magazine

    A complete guide to CSS auditing tools for debugging and refactoring your CSS. Tools to discover CSS specificity issues, duplicated and invalid selectors and improve your CSS architecture.

    Smashing Magazine

  • Библиотека фронтендера

    Пример более чистого и краткого способа записи нескольких значений в консоль, по сравнению с console.log(‘values of a/b’, a, b); #javascript #tip by Shripal Soni

  • Библиотека фронтендера

    Как эффективно тестировать хуки React с помощью Vitest: гайд для фронтенд-разработчика. Читать

    Tips for planning and testing custom React hooks with Vitest and React Testing Library.

    Test your React hooks with Vitest efficiently

  • Библиотека фронтендера

    Введение в потоковую передачу данных в вебе: чанки, обработка backpressure с помощью веб-потоков, server-sent events и многое другое. Читать

  • Библиотека фронтендера

    Глубокое техническое погружение в React Server Components с нуля: серия практических статей от Дэна Абрамова. Следите за обновлениями 👇 🗄 Часть 1. Server Components (доступно в видеоформате от Jesse Pence) 🗄 Часть 2. Client Components 🗄 Часть 3. TBD
    RSC From Scratch. Part 1: Server Components · reactwg/server-components · Discussion #5

    RSC From Scratch. Part 1: Server Components In this technical deep dive, we'll implement a very simplified version of React Server Components (RSC) from scratch. This deep dive will be publishe...

    GitHub

  • Библиотека фронтендера

    🔥 Новости и обновления популярных инструментов: подборка для фронтендера ◾️ Ecma International утвердила спецификацию ECMAScript 2023 ◾️ Анонс TypeScript 5.2 Beta ◾️ Возможности WebKit в бета-версии Safari 17 ◾️ Что нового в DevTools (Chrome 116)? ◾️ Firefox 115 и Chrome 116.0.5845.14 для разработчиков ◾️ Примечания к выпуску Safari Technology Preview 173 ◾️ NestJS 10 ◾️ Ember.js 5.0 ◾️ styled-components 6.0 ◾️ Remix 1.18.0 ◾️ esbuild 0.18.10 ◾️ Radash 11.0 ◾️ Tween.js 21.0 ◾️ psd 0.4 ◾️ DOCX 8.2 ◾️ NodeBB 3.2 #news
    Ecma International approves new standards - Ecma International

    The 125th General Assembly has approved the following standards: ECMA-262 14th edition, ECMA-402 10th edition, ECMA-419 2nd edition and ECMA-423 1st edition.

    Ecma International

  • Библиотека фронтендера

    В продолжение вчерашней темы, ловите 15 полезных советов и рекомендаций по использованию DevTools Здесь вам и про кейсы получения используемого списка шрифтов, и про измерение произвольного расстояния, и про обнаружение неиспользуемого кода, и про многое другое. Читать #devtool
    Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

    💭 Можете назвать ваш личный топ-3 инструментов, которые вы используете в ходе разработки/отладки/профилирования веб-приложений? Git в расчет не берем, ведь его и так все используют. Кажется, это будет VS Code, Chrome DevTools и ... #холивар #devtool

    Telegram

  • Библиотека фронтендера

    💭 Можете назвать ваш личный топ-3 инструментов, которые вы используете в ходе разработки/отладки/профилирования веб-приложений? Git в расчет не берем, ведь его и так все используют. Кажется, это будет VS Code, Chrome DevTools и ... #холивар

  • Реклама

  • Библиотека фронтендера

    🔥 Переходите на новый уровень в JS-разработке и разнообразьте свою работу! Пройди тест по JS и проверь как хорошо ты знаешь язык. Ответишь — пройдешь на продвинутый курс «JavaScript Developer. Professional» от OTUS по специальной цене + получишь видео-курс по Git в подарок 👉 ПРОЙТИ ТЕСТИРОВАНИЕ https://otus.pw/yM7c/ Нативная интеграция. Информация о продукте www.otus.ru

  • Библиотека фронтендера

    Анастасия Щедрина, фронтенд-техлид проекта размещения объявлений в компании Домклик, рассказывает об устройстве правил в ESLint и показывает примеры разработки собственных. Статья будет полезна как тем, кто уже задумался о создании своих правил, так и тем, кто использует линтер, но не знает принципов его работы. Читать
    ESLint. Анатомия правил линтинга: разбираем структуру, создаём собственное правило для React-приложения

    Всем привет! Меня зовут Анастасия Щедрина, я технический лидер по фронтенду проекта размещения объявлений в компании Домклик. Сегодня я расскажу вам немного о том, как устроены правила в ESLint, и...

    Хабр

  • Библиотека фронтендера

    4 способа перебора JavaScript-объекта, которые стоит знать: на заметку фронтенд-разработчику. #javascript #tip by Shripal Soni