Frontender's notes. Страница 18

​​🚀Не время стоять на месте! Пора прокачать свои навыки в JavaScript-разработке!  Если вы хотите перейти в fullstack-направление, приходите 17 марта в 20:00 на открытый урок онлайн-курса «JavaScript Developer. Professional» в OTUS. Арсений Высоцкий, тимлид в большой международной компании, проведет вебинар «Клиенты реляционных баз данных»<b>. На занятии мы обсудим ORM и типизированные библиотеки формирования SQL-запросов. 👉🏻Для регистрации на занятие пройдите вступительный тест https://otus.pw/MV3g/ Курс доступен в рассрочку. Реклама. Информация о рекламодателе на сайте www.otus.ru

Кратко о замыкании в JS Алоха товарищи фронты! Постарался сделать краткую выжимку с примером о том что такое замыкание и зачем оно нужно. Замыкание в JavaScript - это способность функции запоминать и получать доступ к переменным из области видимости, в которой она была объявлена, даже после того, как эта область видимости уже была закрыта. Пример: function outerFunction() { const outerVariable = "Hello, "; function innerFunction(name) { console.log(outerVariable + name); } return innerFunction; } const innerFunc = outerFunction(); innerFunc("Bob"); // выведет "Hello, Bob" В этом примере мы создаем внутреннюю функцию innerFunction, которая получает доступ к переменной outerVariable из внешней функции outerFunction. Мы возвращаем innerFunction, но не вызываем ее непосредственно. Затем мы вызываем outerFunction и сохраняем результат в переменной innerFunc, которая теперь содержит innerFunction. Потом мы вызываем innerFunc, передавая ей аргумент "Bob". Как результат, на консоль будет выведено "Hello, Bob", что свидетельствует о правильной работе замыкания. Обратите внимание, что outerVariable из outerFunction может быть изменен после создания innerFunction, и все равно innerFunction будет использовать значения outerVariable, которые существовали на момент ее создания. Это позволяет создавать функции с состоянием, сохраняющимся между вызовами.

​​💞Продвинутое форматирование текста Здесь вы узнаете о цитатах, списках описания, компьютерном коде и другом виде текстовых элементов, подстрочном и надстрочном тексте, контактной информации и других типах текста. Элементы, описанные в этой статье, не так часто используются, но всё же полезны для понимания. Читать...

​​📍 API для определения местоположения по Wi-Fi и вышкам сотовой связи Это Яндекс Локатор, который помогает без GPS определять геолокацию датчиков. Такой метод позволяет находить устройства даже на подземных парковках, в метро и тоннелях.  Сама компания использует Локатор, например, для Еды, Такси и Драйва. Алгоритмы геолокации улучшают, применяя ML, а в базе уже более 50 млн точек доступа Wi-Fi, которые помогают определять местоположение. Как можно применять Локатор: в сервисах прокатов велосипедов и самокатов, чтобы всегда знать, где они находятся, в курьерских службах, чтобы точно определить местоположение курьера и улучшить прогноз доставки, в системах автосигнализации, чтобы найти угнанную машину.  Настроить API Локатора очень просто, вся инфа по продукту тут

​​🪄Dapp. Vue.js + ethers.js В этой статье автор максимально кратко рассказывает о создании Децентрализованного приложения в сети Ethereum используя Vue и ethers.js для общения со смарт контрактом. Читать...

​​React — самая популярная библиотека для фронтенд-разработки. А ещё это стабильный фреймфорк, который легко поддерживать, поэтому на нём пишут большие популярные веб-приложения. Если вы ищете новую интересную работу в IT или мечтаете о повышении, то вам подойдет курс Яндекс Практикума «React-разработчик». Курс длится всего 3 месяца, но за это время мы научим вас:  • уверенно разбираться в библиотеке React;  • использовать TypeScript при разработке React-приложений;  • тестировать веб-приложения с помощью юнит-тестов и cypress. Учёбе нужно будет уделять 20-25 часов в неделю. Обучение разбито на спринты, заниматься можно когда угодно, главное — уложиться в дедлайн. На всех этапах вас будут сопровождать опытные разработчики: мы не дадим просесть по учёбе и поможем выкроить время на образование. Вы будете практиковаться на реальных кейсах и положите в портфолио работающие проекты. А карьерные консультации подготовят вас к разговору о повышении или помогут с поиском новой работы.  Записаться на курс можно здесь

​​👌Асинхронный JavaScript В этом модуле вы рассмотрите asynchronous JavaScript, почему это важно, и как это поможет эффективно справляться с потенциальной блокировкой операций, таких как получение ресурсов с сервера или запись в файл. Тема достаточно сложная, поэтому желательно знать хоть какие-то основы JavaScript. Читать...

​​💻 TypeScript: Раскладываем tsconfig по полочкам Эта статья является своего рода шпаргалкой для тех, кто хочет понять, как настраивать tsconfig В данной статье предоставлена переработанная и упорядоченная выжимка документации, которая, будет полезна тем, кто только начинает свой путь в мире TypeScript и опытным пользователям. Читать...

​​🔥React и Typescript: Создание динамического компонента на примере кнопки Создание универсального компонента, который может использоваться в различных ситуациях, является одной из ключевых задач при разработке веб-приложений. В этой статье вы рассмотрите создание такого компонента на примере кнопки, разберетесь как использовать типизацию для создания динамических компонентов с использованием React и Typescript. Читать...

​​👌Как добавить аутентификацию Supabase к приложению на Vue В этой статье вы рассмотрите, как настроить аутентификацию с помощью Supabase и Vue 3. Описанный метод подходит и для Vue 2, но понадобится изменить настройки, чтобы работать с API Options. Автор же пользуется Vue 3, поскольку теперь это версия по умолчанию. Читать...

Как развиваться дальше во фронтенде, если ты уже middle?  Можно учиться самостоятельно по лекциям в интернете, постоянно обращаться за помощью к более умелым наставникам или браться за сложные задачи на работе, рискуя наломать немало дров.  Но можно поступить мудрее — записаться на курс с акцентом на практику для middle-фронтендеров, который проходят и рекомендуют даже эксперты с опытом работы в Яндексе, Сбере, ВКонтакте и JetBrains.  Вот что они говорят о программе Frontend: https://clck.ru/33kf4q  Курс сделали тимлиды с опытом работы в Яндексе, Вконтакте, Telegram Open Network и Frogly (Chrome Extension) Во время обучения вы с нуля построите новостную ленту и превратите её в рабочий production-ready сервис.  Записаться на следующий поток можно до 17 марта, а по промокоду FNOTES18 вы получите скидку 10%.

​​⚡Супербыстрый веб-фреймворк Astro: подробный обзор Astro  —  универсальный веб-фреймворк, разработанный для создания быстрых сайтов с большим количеством контента Не веб-фреймворк, а просто чудо какое-то! В статье посмотрите, как он работает. Читать...

​​Переходите на микрофронтовую архитектуру В этой статье узнаете: 1.Что такое микрофронтенд. 2. Проблема монолитного приложения. 3.На что стоит обращать внимание при выборе архитектуры. 4.В каких ситуациях стоит использовать Module Federation И много другого по этой интересной теме🔥 Читать...

​​Бесплатный интенсив по frontend-разработке Теория — хорошо, а практика — лучше. Станьте frontend-разработчиком на 3 дня. За это время вы создадите сайт с интерактивными элементами и адаптируете его к разным устройствам. А еще: — научитесь выгружать проект на GitHub, чтобы начать формировать портфолио;  — узнаете требования работодателей; — пообщаетесь с экспертом и получите подарки; — поймете, подходит ли вам это направление.  Интенсив пройдет с 15 по 17 марта в 19:00 (мск). Регистрируйтесь, чтобы не пропустить: https://go.skillfactory.ru/iQBT4Q

​​Кастомная стратегия виртуального скроллинга для просмотра pdf Angular CDK имеет широкие возможности для скроллинга плоского списка. Если размер каждого элемента одинаков, то можно воспользоваться FixedSizeVirtualScrollStrategy. Но что делать, если размер элементов разный? В статье расскажут как решить данную проблему кастомной стратегией виртуального скроллинга. Читать...

​​🔥Рисуем верёвку в формате SVG при помощи JavaScript Сегодня автор расскажет о процессе, который придумал для преобразования SVG-контура в векторный рисунок верёвки. Вы узнаете, как превратить показанный слева контур в верёвку справа Читать...

​​Тестируйте свои React-компоненты с помощью Nightwatch и Testing Library Это взгляд на популярную Testing Library с Nightwatch — и многое другое.... Вы создадите подробный пример проекта React с Vite, а затем воспользуетесь Nightwatch и Testing Library для тестирования этих компонентов. Будете использовать Complex example, доступный в документах React Testing Library, написанный с помощью Jest. Читать...

​​✨Улучшение производительности Vue.js приложений В современном мире web-разработки все сводится к скорости работы и загрузки приложений, пользователи не хотят ждать по 5-10 секунд пока грузится сайт. Здесь узнаете, как оптимизировать компоненты Vue.js приложений и даже немного ускорить загрузку приложения⚡ Читать...