Javascript

Как программисту успешно проходить собеседования? Я Андрей Шопинский — Frontend-разработчик из крупного Российского банка. ⚠️ 5 апреля в 18:30 по МСК я проведу бесплатный эфир в своём Telegram-канале про Frontend-разработку! На трансляции будут раскрыты следующие темы: — Как представить себя и говорить о своих достижениях? — Какие бывают красные флаги у работодателя? — Как получить сочный оффер на хороший прайс? 🔥 Ты сможешь задать свои вопросы в прямом ЭФИРЕ!🔥 Подписывайся на канал, чтобы не пропустить! Реклама. ИП Малев С.И. ИНН: 667101819072. erid: 2VtzqxXYTki

🖥 Основные тенденции развития JavaScript Каковы основные тренды в JavaScript? На какие технологии и инструменты стоит обратить пристальное внимание? Держите годный список от руководителя обучения JavaScript в EPAM Андрея Гордийчука — вот они, актуальные тренды: ⏩Переход к новым фреймворкам фронтенда Одностраничные приложения (SPAs) и соответствующие фреймворки JavaScript, такие как React, Angular и Vue.js, все еще остаются популярными. Существует четкая тенденция перехода приложений с обработки на стороне клиента (CSR) на отрисовку на стороне сервера (SSR). Это требует от инженеров изучения новых фреймворков, таких как Svelte, Solid.js и Qwik. ⏩Производительность и рендеринг Серверный рендеринг (SSR) и генерация статических сайтов (SSG) конкурируют в улучшении производительности и SEO. Последние несколько лет шаблоны рендеринга были относительно простыми, однако все более популярными становятся новые подходы, такие как Partial Hydration, Progressive Hydration и Island Architectures (Astro). ⏩Дизайн-фреймворки и дизайн-системы Тенденции в дизайне пользовательского интерфейса (UI) включают: — Minimal flat design и инструменты; — Neo-brutalism on UI (контрастные цвета, мультяшная графика); — Motion design. Со стороны разработчиков такие инструменты, как Tailwindcss (API для вашей системы проектирования), PureCSS и Primer становятся популярнее, чем Bootstrap. ⏩Создание инструментов и монорепозиториев На основе вышеупомянутых результатов, автоматизация процессов сборки, тестирования и развертывания приложений также будет претерпевать изменения. У Webpack более устоявшаяся экосистема и широкий спектр доступных плагинов, что делает его подходящим для более сложных проектов, но новые инструменты Vite и Turbopack становятся чрезвычайно востребованными благодаря своему более быстрому подходу встроенного модуля-скрипта и более простой конфигурации (что делает их более удобными в использовании), мгновенным обновлениям без полной пересборки, меньшим размером пакета. 📎 Читать подробнее @javascriptv

Бесплатный практический вебинар для всех возрастов: Профессия «Frontend-разработчик». ⏰ Когда: уже 10 апреля в 19:00 по мск. Вы узнаете о типичных рабочих задачах программиста и напишете мини-игру, которая работает прямо в браузере. Под капотом немного HTML+CSS и базовые конструкции JS. Расскажем, что ждут работодатели от джунов, какие есть грейды во фронтенд-разработке и на какую зарплату рассчитывать в перспективе. Какие JS фреймворки учить: Vue, React, а может, Angular? 🎁 Всем, кто зарегистрировался — Карта компетенций начинающего Frontend-разработчика, а каждому участнику — Гайд «Как заговорить на сленге IT-специалистов».

🖥 Microsoft представила инструмент для веб-разработки Babylon.js 7.0 с новыми опциями процедурной геометрии ⏩Microsoft представила инструмент для веб-разработки Babylon.js 7.0 с новыми опциями процедурной геометрии для создания сложных веб-игр. ⏩В своем блоге Microsoft объявила, что одним из крупнейших нововведений Babylon.js 7.0 является поддержка процедурной геометрии (Procedural Geometry) под названием Node Geometry, которая должна помочь создавать сложные игровые миры без необходимости создания огромных файлов для 3D-иллюстрации игры. Microsoft заявила, что эта опция позволяет локальному ПК создавать сложный графический контент. ⏩Microsoft открыла доступ к описанию Node Geometry Editor, демо работы Node Geometry и инструментарию новой опции. ⏩Пользователи, которые пытаются загрузить и поиграть в веб-игру с поддержкой Node Geometry, могут просто «загрузить данные Node Geometry объемом в несколько КБ и позволить своему собственному ПК или мобильному устройству создать геометрию». Очевидно, это означает более быструю загрузку сложной веб-игры и повышение общей производительности проекта. ⏩В Babylon.js 7.0 добавлена ещё одна опция, которая широко распространена в стандартных компьютерных и консольных играх. Это поддержка физики рэгдолла (Ragdoll Physics) для анимации тела персонажей. Microsoft заявляет, что эта опция позволит «любому скелетному ассету проявлять значительные изменения одним нажатием кнопки». 📎 Подробнее @javascriptv

Устроиться фронтендером в Яндекс за выходные 18–19 мая устраиваем Weekend Offer Frontend. До 15 мая решите одну задачу в Контесте, 18-го пройдите два собеседования, а 19 мая познакомьтесь с командами и получите офер. В мероприятии участвуют 13 команд: Поиск, E-com Поиска, Реклама, Бизнес, Cloud, 360, Игры, Умный дом, Путешествия, Аренда, Недвижимость, Авто.ру и Авто.ру Бизнес. Вы сможете пообщаться с менеджерами и выбрать проект, который покажется самым интересным. Нанимаем в офисы по всей России, помогаем релоцироваться внутри страны. Узнать подробности и зарегистрироваться можно здесь.

🔥 Совсем недавно был выпущен бенчмарк Speedometer 3.0 от Mozilla, Google, Microsoft и Apple для измерения скорости отклика веб-приложений. Speedometer 3.0, созданный совместными усилиями разработчиков из Mozilla, Google, Microsoft и Apple, представляет собой инструмент для оценки скорости отклика веб-приложений в различных браузерах. В новой версии Speedometer 3.0 были использованы новейшие версии фреймворков Angular, Backbone, jQuery, Lit, Preact, React, React+Redux, Svelte и Vue. Также были применены современные шаблоны проектирования сайтов и веб-приложений, такие как Webpack, Web Components и новые методы работы с DOM. В бенчмарк добавлены тесты для оценки производительности отрисовки при помощи элемента Canvas, генерации SVG, обработки сложных CSS, работы с очень большими деревьями DOM, а также использования методов, применяемых при редактировании контента в режиме WYSIWYG и работе с новостными сайтами. ▪Github @javascriptv

🖥 Список тестовых заданий на позицию JS-разработчика ⏩ Тестовое задание на позицию стажера-бекендера в юнит Авто (archived) ⏩ Тестовое задание для Javascript разработчика (JS, jQuery) ⏩ Тестовое задание на позицию cтажер-разработчик javascript HTML, CSS, JS) ⏩ JavaScript Developer (JS, Vue.js) ⏩ Frontend Developer (TypeScript/JavaScript, Angular/React/Vue) Отличный вариант вспомнить основы перед собеседованием, пользуйтесь) @javascriptv

🖥 DOM3D.js Кодеры, ловите абсолютно безумный проект: разработчик написал инструмент для просмотра HTML/DOM, который позволяет оценить ваш сайт в 3D. 🖥 GitHub

🖥 Какие темы освещаются в статье? ⏩Вы же знаете про HTMX? HTMX — это небольшая, свободная от зависимостей библиотека JavaScript, позволяющая создавать передовые пользовательские интерфейсы с лёгкостью языка разметки. Она предоставляет доступ к AJAX, CSS Transitions, WebSockets и Server Sent Events напрямую в HTML с помощью атрибутов. Это стало переломным моментом для разработчиков, поскольку позволяет им добиться интерактивности (которую даёт JS), но непосредственно из HTML разметки. И вот как раз о HTMX и идёт речь в этой статье ⏩Вот темы, которые освещаются: • Установка HTMX • Ajax-запросы с помощью HTMX • Триггер запроса • Модификаторы триггеров • Фильтры триггеров • Логирование и события в HTMX • и ещё много всего 📎 Статья P.S: Как думаете, какие перспективы у этой технологии? Из каких сфер HTMX может полностью вытеснить JS? @javascriptv

🚀 fetch-event-stream` 🥳 Крошечная утилита (745b) для обработки событий, отправляемых сервером через API "fetch" и/или WebStreams 🔹 Поддерживает все среды выполнения JS 🔸 Позволяет использовать WebWorker / ServiceWorker 🔹 Принимает AbortController для потоков, которые можно отменить GitHub: https://github.com/lukeed/fetch-event-stream @javascriptv

Сможете разгадать тайны Гиперкуба? Проявите смекалку и примените ИТ-скиллы на Tinkoff CTF — соревновании по спортивному хакингу. Победителям — призы до 420 000 ₽. Вот как все устроено: — Выберите лигу: опытных или новых игроков. Задания рассчитаны на ИТ-специалистов уровня мидл и выше. Если играете впервые, можете потренироваться с демоверсией заданий. — Соревнуйтесь в одиночку или командой до трех человек. Организаторы помогут найти команду, если нет своей. — Играйте онлайн или офлайн — в одном из 16 городов России, Беларуси и Казахстана. — Используйте время на решение заданий или общение с участниками — у вас будет 36 часов. Задания будут интересны разработчикам, QA- и SRE-инженерам, аналитикам и другим опытным ИТ-специалистам. Зарегистрируйтесь до 19 апреля и пробуйте свои силы erid:2VtzqvTnyqX Реклама. АО "Тинькофф Банк", ИНН 7710140679, лицензия ЦБ РФ № 2673

🖥 Асинхронность в JS Хорошая статья о том, как реализована асинхронность в JavaScript, когда и для чего её использовать Содержание статьи: ⏩Синхронный код и его проблемы ⏩Асинхронный код ⏩Стек вызовов ⏩Цикл событий ⏩Колбэки ⏩Промисы (Promise) ⏩Асинхронные функции — Связка async/await — Плюсы async/await Пару фактов из статьи: ⏩Асинхронный код включает функции обратного вызова (колбэки), которые вызываются в ответ на события. ⏩Ад колбэков — проблема, связанная с использованием большого количества обратных вызовов в асинхронном коде. ⏩Промисы — объект-обёртка для асинхронного кода, который содержит состояние и работает аналогично колбэкам. ⏩Асинхронные функции — функции, которые возвращают промисы и могут быть вызваны с помощью ключевого слова await. ⏩Связка async/await позволяет писать более чистый и короткий код, а также обрабатывать ошибки с try-catch. ⏩В Node.js и некоторых браузерах есть setImmediate(), который выполняет почти то же, что и setTimeout() с нулевым таймером. ⏩Promise.all() и Promise.race() используются для ожидания выполнения всех запросов или ожидания выполнения первого запроса из списка. ⏩Для обхода асинхронных итерируемых сущностей можно использовать for await...of. 📎 Статья @javascriptv

🖥 Асинхронность в JS Хорошая статья о том, как реализована асинхронность в JavaScript, когда и для чего её использовать Содержание статьи: ⏩Синхронный код и его проблемы ⏩Асинхронный код ⏩Стек вызовов ⏩Цикл событий ⏩Колбэки ⏩Промисы (Promise) ⏩Асинхронные функции — Связка async/await — Плюсы async/await Пару фактов из статьи: ⏩Асинхронный код включает функции обратного вызова (колбэки), которые вызываются в ответ на события. ⏩Ад колбэков — проблема, связанная с использованием большого количества обратных вызовов в асинхронном коде. ⏩Промисы — объект-обёртка для асинхронного кода, который содержит состояние и работает аналогично колбэкам. ⏩Асинхронные функции — функции, которые возвращают промисы и могут быть вызваны с помощью ключевого слова await. ⏩Связка async/await позволяет писать более чистый и короткий код, а также обрабатывать ошибки с try-catch. ⏩В Node.js и некоторых браузерах есть setImmediate(), который выполняет почти то же, что и setTimeout() с нулевым таймером. ⏩Promise.all() и Promise.race() используются для ожидания выполнения всех запросов или ожидания выполнения первого запроса из списка. ⏩Для обхода асинхронных итерируемых сущностей можно использовать for await...of. 📎 Статья @javascriptv

🚀 fetch-event-stream` 🥳 Крошечная утилита (745b) для обработки событий, отправляемых сервером через API "fetch" и/или WebStreams 🔹 Поддерживает все среды выполнения JS 🔸 Позволяет использовать WebWorker / ServiceWorker 🔹 Принимает AbortController для потоков, которые можно отменить GitHub: https://github.com/lukeed/fetch-event-stream @javascriptv

🖥 Хорошо ли ты знаешь JavaScript? Проверь себя Кто-то думает, что JavaScript — это простой язык для несложных скриптов на странице. Но на самом деле современный JS умеет куда больше, чем это было раньше. Проверь себя, насколько ты знаешь возможности JavaScript. 📎 Ссылка на тест @javascriptv

Исследуешь айтишную тему, но пока нет большого опыта? Соревнуйся с равными и будь на код впереди в «Цифровом марафоне» Сбера и «Школы 21»! Три счастливчика отправятся отдыхать на премиум-курорты и прокачивать знания в СберУниверситете. Конкурс проводят по всей России, а минимальный возраст для участия — от 18 лет. Отличная возможность оценить свои навыки и получить советы для дальнейшего развития. А главное — лучшие в своих категориях отправятся на очный финал в Москву с церемонией награждения. Для успеха нужно пройти онлайн-игру на проверку логики и памяти, тестирование в соответствии с твоим уровнем подготовки и цифровой диктант. Здесь ты выбираешь язык, на котором будешь писать код. Заработай как можно больше очков, чтобы попасть в суперфинал, расправиться с более сложными задачами и выиграть главные призы! Хочу участвовать!

🖥 Сравнение Bun.js и Node.js Держите полезную статью, в которой сравнивается Bun.js и Node.js А перед этим давайте немного поговорим о Bun.js ⏩Вот основные преимущества Bun.js: — Почти полная совместимость с Node.js/Deno. — В десятки раз быстрее Node.js и Deno. — Нативная поддержка JavaScript. — Богатый набор встроенных Web API. — Самый эффективный менеджер пакетов. — Встроенный dev-сервер. — Встроенный раннер тестов. — Встроенный бандлер. — Возможность почти моментального перехода с Node на Bun. ⏩Откуда такая скорость? В первую очередь это современные технологии и тонны большого труда при профилировке и оптимизации. ⏩За счет чего достигается эффект Blazingly Fast, которым так известен Bun.js сегодня? — Bun написан на языке Zig. Это альтернатива C++ и Rust. Zig предоставляет низкоуровневые возможности для ручной работы с памятью, за счет чего появляется возможность оптимизировать вообще все элементы платформы. К слову, это и было сделано: более 80% составных частей Bun, которые так или иначе уже были реализованы в Node, были переписаны на Zig с максимальной оптимизацией обращений к памяти. — Bun использует движок JSCore. Конечно, напрямую на производительность это не влияет, поскольку многие бенчмарки вам скажут, что JSC почти идентичен по скорости V8. Однако в данном случае дело вовсе не в производительности. JSCore предоставляет более открытую и удобную платформу для выполнения JS-кода, в отличие от V8, который изолирует этот процесс, поэтому накладные расходы на многие процессы снижаются. 📎 Статья @javascriptv

❓Как тестировщику расширить карьерные возможности в сфере QA? Перейти в нагрузочное тестирование всего за 4 месяца на онлайн-курсе от OTUS. Вы научитесь: - писать скрипты в Performance Center, Jmeter, Gatling, k6.io; - настраивать CI/CD; - мониторить различные метрики, когда проводите тестирование с помощью Grafana и других инструментов; - анализировать результаты и составлять информативные отчёты; - разбираться в методиках и отчётности; - оценивать точность и качество тестирования, чтобы улучшать процессы и повышать достоверность результатов. Все это позволит вам увеличить доход и ценность в команде, а также получить возможность повышения. 👉 Стартуем 28 марта. Пройдите бесплатный тест прямо сейчас и получите специальную цену: https://otus.pw/iFOg/?erid=LjN8JtNot Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.

Объект URL в JavaScript: полный разбор ⏩Итак, создать объект URL можно 2 способами: — Конструктор URL():

const url = new URL("https://www.example.com/path?query=123#hash");

— Использование window.location:

const currentUrl = new URL(window.location.href);

⏩Из чего состоит URL Вот некоторые составляющие URL : — href: полный URL. — protocol: протокол, например https:. — host: хост (доменное имя и порт). — hostname: только доменное имя. — port: только порт. — pathname: путь после доменного имени и порта. — search: строка запроса, начинающаяся с ?. — hash: якорь, начинающийся с #. — origin: протокол + домен + порт. ⏩Допустим, у нас есть такой URL, включающий все эти части:

https://www.example.com:8080/path/page.html?query=123#section

⏩Тогда объект URL для него будет выглядеть так:

const url = new URL("https://www.example.com:8080/path/page.html?query=123#section");

⏩А если мы попытаемся вывести значения разных свойств, получим следующее:

console.log(url.href);     // https://www.example.com:8080/path/page.html?query=123#section
console.log(url.protocol); // https:
console.log(url.host);     // www.example.com:8080
console.log(url.hostname); // www.example.com
console.log(url.port);     // 8080
console.log(url.pathname); // /path/page.html
console.log(url.search);   // ?query=123
console.log(url.hash);     // #section
console.log(url.origin);   // https://www.example.com:8080

⏩Ещё вы можете изменить любую часть URL, изменяя соответствующее свойство.

url.search = "?newquery=456";
console.log(url.href); 
// https://www.example.com:8080/path/page.html?newquery=456#section

⏩Объект URLSearchParams в сочетании с объектом URL упрощает работу с параметрами запроса.

const params = new URLSearchParams(url.search);
params.set("newparam", "value");
url.search = params.toString();
console.log(url.href); 
// https://www.example.com:8080/path/page.html?newquery=456&newparam=value

@javascriptv

🖥 Создание приложения Node.js с TypeScript ⏩Полезная статья о том, как настроить TypeScript для создания приложений Node.js с pnpm, Node.js, TypeScript и ES Modules для удобной разработки. План статьи Понимание инструментов Добавление файлов конфигурации — package.json — "type": "module" в package.json — Зависимости — Конфигурация TypeScript — .gitignore — Каталог src Добавление скриптов — Скрипт build — Скрипт start — Скрипт dev —— tsc --watch —— node --watch —— run "/dev:/" 📎 Статья @javascriptv