Интересует web и все что с ним связано? Тогда тебе сюда - Web Overflow

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

✔️ Разговорный формат
✔️ Только живой и настоящий опыт
✔️ Разбираем вопросы на интервью любой сложности
✔️ Решаем интересные задачи
✔️ Обсуждаем актуальные новинки в сфере ИТ

https://yangx.top/web_overflow
https://yangx.top/web_overflow
https://yangx.top/web_overflow

Создаём расширение для Chrome

Написать расширение для Chrome непросто. Это не то же самое, что разработка веб-приложения: не хочется перегружать браузер оверхедом JS, ведь расширения работают одновременно с сайтами. Более того, у нас нет инструментов упаковки или отладки из привычных фреймворков.

Подробнее

Babel - бесплатный компилятор JS с открытым исходным кодом

Babel - это набор инструментов, который в основном используется для преобразования кода ECMAScript 2015+ в обратно совместимую версию JavaScript в текущих и старых браузерах или средах.

Особенности:
👉 изменение синтаксиса
👉 Преобразование синтаксиса Функции Polyfill, которые отсутствуют в вашей целевой среде (с помощью сторонних полифилов, таких как core-js)
👉 Преобразования исходного кода (codemods)

Ссылка: https://babeljs.io/
Гит: https://github.com/babel/babel

Как создать радиальный градиент в CSS?

Для создания фона в виде радиального (кругового, эллиптического) градиента испольуется функция radial-gradient.

Самый простой градиент задаётся двумя цветами.
.element {
background-image: radial-gradient(#6e4aff, #49A16C);
}

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

Цветов мы можем перечислить сколько угодно. Браузер сам распределит градиент таким образом, чтобы последний цвет всегда заходил в угол элемента.

Форма градиента задаётся ключевым словом circle или ellipse (по умолчанию).

Мы можем задавать положение центральной точки, используя те же ключевые слова, что и для background-position, но с приставкой at: at left, at top, at right, at bottom, at center (по умолчанию). Значения можно сочетать, чтобы поместить центр градиента в нужный угол элемента: at top left — центр градиента в верхнем левом углу.

Создание пиксельных эффектов на JavaScript и Canvas

00:00:00 Intro
00:00:55 Project 1 INTRODUCTION to pixel manipulation for beginners
00:02:30 How to bring image into HTML canvas project
00:05:15 How to analyze image for pixel data
00:11:58 How to turn image into grayscale
00:14:55 Project 2 BLACK AND WHITE PIXEL RAIN using image data
00:19:45 Particle system using JavaScript classes
00:25:18 Connect particle movement to pixel data
00:43:50 Project 3 PIXEL FLOW EFFECTS
00:53:12 HTML canvas gradients, filters and other experiments
01:04:48 Project 4 INTERACTIVE PARTICLE TEXT
01:13:50 Creating particles
01:21:33 Particle physics and mouse interactions
01:35:46 How to shape particles as letters
01:49:15 Constellations effect from particles.js with vanilla JavaScript

Я ❤ Фронтенд 2021

01. Максим Сальников — Автоматизируем сервис-воркер с Workbox 6
02. Артем Арутюнян — Архитектура менеджера состояния
03. Роман Дворнов — JSON: push the limits
04. Валерия Курмак — Пользовательский опыт незрячего человека
05. Андрей Печкуров — ES6-коллекции на примере V8: у ней внутре неонка
06. Василика Климова — Расширяем реальность
07. Разбор заданий Capture the flag и награждение победителей
[Воркшоп] 08. Юлия Миоцен — Палка, палка, огуречик. Рисуем персонажную анимацию на CSS
[Воркшоп] 09. Андрей Мелихов — Теория и практика dependency injection
[Воркшоп] 10. Дмитрий Николаев — Создание приложений для голосовых ассистентов
Стелим соломку для фронтенда

https://www.youtube.com/playlist?list=PLKaafC45L_SQvmgHWgtUeX_Y59NiZhmEF

Привет! У нас прекрасные новости 🥰

26 февраля мы в четвёртый раз соберёмся на конференции «Я 🧡 Фронтенд», чтобы признаться в любви к вебу, поделиться друг с другом опытом и провести время в отличной компании.

В этом году мероприятие станет ещё масштабнее: 14 февраля мы запустили две недели онлайн-активностей на любой вкус. Челленджи, воркшопы, лекции, CTF, котики, коллаборации и подкасты — каждый сможет найти себе любимое занятие. Всё бесплатно, потому что любовь к фронтенду не купишь за деньги.

Боитесь пропустить всё самое интересное? Регистрируйтесь и мы заботливо напомним о том, что интересно именно вам: ilovefrontend.ru

Публичное собеседование

Разбор технического собеседования на позицию senior front-end developer

https://www.youtube.com/playlist?list=PLLtDv0NfxtZwOkCvK2omERQDToOWuBChS

Тайна меняющейся фавиконки

Вчера на работе разработчик обратился ко мне с проблемой. Разговор шел примерно так:

Дев: Привет, Альваро! У нас проблема.
Я: Что не так?

Дев: Фавиконка на сайте неправильная. Это не наш корпоративный логотип.

Я: Что????

Дев: показывает экран

Я: .....


Rus https://habr.com/ru/post/651877/
Eng https://alvaromontoro.com/blog/67996/the-mystery-of-the-changing-favicon

404 black hole

Страница 404, реализованная на Vue.

https://codepen.io/justjspr/pen/qBZYmjY

​На курсе «Мидл фронтенд-разработчик» студенты становятся уверенными мидлами за пять месяцев, а не за полтора года. 
→ Приходите учиться, если вы разбираетесь в HTML, CSS, JavaScript — мы поможем повысить грейд. 

Выпускники смогут браться за более сложные задачи, чем одностраничные сайты или простые веб-сервисы. На курсе мы поможем глубже разобраться: 
— в алгоритмах и структурах данных; 
— в паттернах проектирования;
— в том, как работают популярные в веб-разработке технологии.
Что будет на учёбе:
⬛️ Код-ревью и обратная связь от старших разработчиков из Яндекса и других IT-компаний.
⬛️ Обучение на реальных рабочих задачах: студенты создадут мессенджер и веб-игру с нуля.
⬛️ Наставники и менторы будут делиться опытом на вебинарах и встречах один на один.
⬛️ Кураторы и дедлайны не дадут прокрастинировать.
⬛️ Карьерные консультации: наши специалисты помогут найти новый проект или сделать так, чтобы на текущей работе вам начали давать более амбициозные задачи.

→ Старт потока — 3 марта. Учёба длится пять месяцев.
→ Познакомьтесь с курсом и оцените свои силы — это бесплатно.

Подборка лучших фреймворков ReactJS💡

Next JS
Next.js дает вам лучший опыт разработчика со всеми функциями, необходимыми для производства: гибридный статический и серверный рендеринг, поддержка TypeScript, интеллектуальное связывание, предварительная выборка маршрута и многое другое. Конфигурация не требуется.

Gatsby JS
Создавайте невероятно быстрые и насыщенные веб-интерфейсы, объединяющие все ваши любимые службы и контент. Создавайте сайты электронной коммерции, целевые страницы, блоги и многое другое за считанные минуты.

Remix JS
Создание продукта - это весело, но возиться с инструментами сборки и загрузкой данных - нет. Remix знакомит вас с последними достижениями в области веб-разработки (а затем и некоторых других), не оставляя позади фундаментальных принципов, которые делают ее отличной.
Remix, созданный для бессерверной эпохи и использующий наш открытый исходный код, который уже используется в миллионах проектов, дает вам прочную основу для создания лучших веб-сайтов. Вам понравятся производительность и продуктивность, которые дает вам наш новый (и традиционный) подход.


Blueprint JS

Blueprint — это набор компонентов пользовательского интерфейса React, которые охватывают большинство общих элементов интерфейса, шаблонов и взаимодействий в Интернете. Использование Blueprint гарантирует, что вы получите элегантный и простой в использовании пользовательский интерфейс, что позволит вам сосредоточиться на создании продукта, а не на элементарных элементах, которые его составляют. Повысьте свою производительность с помощью набора высококачественных базовых компонентов, которые можно использовать «из коробки», а универсальные концепции дизайна и модификаторы применимы ко всем компонентам. Blueprint был разработан с нуля для настольных приложений, поэтому он не был тщательно протестирован в мобильных веб-браузерах (iPad работает нормально).

Подборка User Flow сервисов


1. Overflow - Специализированный сервис для работы с user flow. Красивый визуал, работа в команде, работает с Adobe XD, Figma, Sketch, and Photoshop

2. Figma - удобно простраивать user flow сразу на макетах. Для удобства используйте User Flow Kit

3. Mockplus - популярный онлайн инструмент для создания мокапов и user flow в одном месте

4. Wireflow.co - бесплатный онлайн-инструмент с открытым исходным кодом

5. Diagrams.net - Удобный Flowchart инструмент с возможностью сохранения на google drive, dropbox, github.

6. Flowmapp.com - создание быстрых небольших user flow. В free версии доступен только 1 проект

7. Whimsical.com - набор инструментов для совместной работы

Разыскивается Frontend-developer в Superjob! Зарплата от 120 000 руб./месяц

SuperJob — это инновационная IT Компания, которая 20 лет успешно создает технологии для подбора персонала и поиска работы помогает соискателям найти работу, а работодателям приобрести ценного сотрудника.

Присоединяйся к команде!
Пиши в телеграм: t.me/sjmusina (наш рекрутер Анастасия)

Neon реализован CSS свойством text-shadow

https://codepen.io/neilcarpenter/pen/kyLqaO