WebDev+ | Веб-разработка

Эргономика мобильных интерфейсов Важные кнопки, меню и CTA стоит располагать в «зелёной зоне», а верх лучше оставлять для второстепенных элементов. @WebDev_Plus

⚡️ Бесплатное обучение фронтенд-разработке с нуля до Vue, Angular, React — с поддержкой от наставника Опыт в программировании не нужен. На канале Интенсивный JavaScript действующий тимлид и опытный разработчик помогает изучить фронтенд на практических задачах, которые интересно кодить С 13 сентября стартует бесплтаное обучение, где он на практике поможет разобраться в основах — HTML/CSS и JavaScript, а также попробовать три фреймворка — Vue, Angular и React Вот план обучения: 💡 с 13 сентября напишете фронтенд для сервиса доставки 💡 с 18 сентября свой киносайт 💡 а с 24 сентября свою доску объявлений Обучение подойдёт, даже если у вас нет опыта в программировании — всё объясняют так, чтобы поняла даже ваша бабуля 🔖Ещё этот парень регулярно набирает новичков в свою команду и знает, как трудоустроиться и джуну, и разрабу поопытнее Помимо работы с кодом он даст пошаговый план изучения всего, что нужно современному фронтенду. Поделится способами посика клиентов с поомщью ИИ. Расскажет, как взять свой первый заказ на фрилансе без фриланс-бирж с огромной конкуренцией Подписывайтесь, чтобы участвовать, осталось 56 мест Учиться самостоятельно можно бесконечно, если не знать, куда копать. На интенсиве сократите время на поиск информации и получите пошаговый план от разработчика, который нанимает новичков в команду 👉Участвовать бесплатно

Чувак создал супер-производительный CSV-редактор, полностью на HTML canvas Инструмент масштабируется под гигабайты данных и работает, как Excel. Мгновенно обрабатывает огромные файлы с максимальной производительностью. 🎉 @WebDev_Plus

Animate UI только что выпустила свою версию 1.0 ✓ React, TypeScript, Tailwind CSS и Motion ✓ Полностью настраиваемая ✓ 170 анимированных иконок Открытый исходный код: https://github.com/imskyleen/animate-ui @WebDev_Plus

7 дней бесплатного обучения frontend-разработке Роман Чернов, практикующий Fullstack-разработчик с опытом более 12 лет и кейсами от крупных брендов, запускает эксперимент: за 7 дней бесплатно подготовит 10 новичков к первым заказам. Уже в первую неделю обучения ты сделаешь сайт и загрузишь его на хостинг, оформишь портфолио по науке и получишь стратегию роста во фронтенде с нуля до 2000$ в месяц. 👉 Запишись до 20 сентября — участие бесплатно. 9 мест ещё свободно.

Чит-лист неизменяемых альтернатив 9 методов, изменяющих массивы в JavaScript @WebDev_Plus

Хочешь создавать лучшие анимации для своего сайта или приложения? Вот 12 принципов, которым нужно следовать: ① Эластичность: деформация для передачи веса и гибкости ② Антиципация: подготовка пользователя перед действием ③ Сцена: привлечение внимания к важному ④ Действие: покадровая анимация или ключевые позы ⑤ Непрерывность: ничего не останавливается и не начинается резко ⑥ Плавность: плавные входы и выходы ⑦ Арки: плавные движения для большего реализма ⑧ Контекст: детали, поддерживающие основное действие ⑨ Время: правильная продолжительность для плавности или скованности ⑩ Преувеличение: акценты для лучшего донесения идеи ⑪ Объем: добавление согласованности, глубины и реализма ⑫ Привлекательность: приятные, запоминающиеся анимации с характером Вот полная статья с примерами: 12 принципов анимации @WebDev_Plus

ml5.js — это библиотека машинного обучения для JavaScript, которая даёт доступ к ML-моделям прямо в браузере. С её помощью можно не только использовать готовые модели, но и обучать нейросети локально. В этом курсе ты узнаешь, как работать с ml5.js, и закрепишь навыки на практике, собирая реальные проекты @WebDev_Plus

Хочешь выучить React, Svelte, Vue или Angular? Вот страница, где сравнивается синтаксис всех четырёх фреймворков. Если уже знаешь один, то легко разберёшься в другом: → http://component-party.pages.dev @WebDev_Plus

⚡️ Айтишник из «VISION» скупил топовые айти-курсы и выложил гигабайты материалов к себе Каждый найдет что-то по душе: 1202 ГБ — Python 1811 ГБ — Frontend 1100 ГБ — C / C++ / C# 804 ГБ — Java 411 ГБ — SQL & БД 309 ГБ — DevOps 998 ГБ — ИБ & Хакинг 773 ГБ — Kotlin / Swift 189 ГБ — PHP 201 ГБ — GoLang 170 ГБ — Rust 167 ГБ — QA / Тестирование 310 ГБ — 1C + Лицензии 495 ГБ — Машинное обучение 704 ГБ — Аналитика Данных 991 ГБ — Дизайн Материалы в закрепе, постоянно пополняются👆🏻

Большинство разработчиков об этом даже не догадываются… любую веб-страницу можно превратить в текстовый редактор одной строкой JavaScript Просто вбей в консоль браузера:

document.designMode = "on";

И сразу получаешь страницу, где весь контент можно редактировать. Можно включать и выключать этот режим в любой момент, работает во всех популярных браузерах — Chrome, Firefox, Safari, Edge. Удобно для быстрых мокапов, теста идей по UI или просто чтобы поиграться. Напоминание: некоторые из самых мощных фич в технике годами лежат прямо на поверхности 🙂 @WebDev_Plus

Сохраняй себе 5 топовых тулз для веб-разработчиков Эти штуки реально ускоряют работу, делают код чище и экономят время. Полезный набор, который стоит держать под рукой. SVG Flag Icons — nucleoapp.com/svg-flag-icons EmbedPDF — embedpdf.com FliiipBook — fliiipbook.com use-mcp — github.com/modelcontextprotocol/use-mcp DayPicker — daypicker.dev Пригодятся в любом проекте @WebDev_Plus

Подогнал классную находку для веб-разработчиков Cursor Effects — набор ретро-эффектов курсора с кучей вариаций. Бесплатно, open source, и встраивается в проект буквально за пару строк кода. Мгновенно добавляет сайту креатива и выделяет его среди остальных :) github.com/tholman/cursor-effects @WebDev_Plus

freeCodeCamp выкатил ежедневные задачи по программированию. Решать их можно прямо в мобильном приложении или в /learn Это отличный способ прокачать навыки: можно тренироваться параллельно с прохождением курса или просто для практики на каждый день. Сегодняшний челендж — валидатор IPv4. Попробуйте решить Подробнее тут @WebDev_Plus

Задача «Тест по YAML» ❗️ Эта задача анонсировалась заранее и будет награждение первой тройки решивших. Призы символические, но так интереснее, чтобы был азарт. Ссылка на задачу на нашей площадке: задание. 📌 Исходники бекендовой части задачи прикреплены на сайте. Описание задачи: Для получения флага, нужно получить 1337 очков в тесте, где представлены 7 вопросов про парсинг YAML-файлов. Ответы проверяются в бекенде, по запросу с фронта. 📌 Заявки принимаются на сайте с задачами, где фиксируется время отправки и валидность флага. Про первые три решения автоматически сообщает бот в нашем чате. Ответы в зачет принимаются до 12 сентября 12:00 МСК, есть ровно неделя на решение. Далее будет пост с полным разбором этой задачи и объявлением победителей. Кто первый, тот молодец. Поехали! ❗️ Ссылка на задачу: перейти. ——— #⃣ #Задачи #CTF #Web 🐞 Канал // Чат // Задачи

Занес классную находку для тех, кто учит JS и любит MMORPG. Deepest World — браузерная песочница, где ты пишешь бота на JavaScript, а он уже сам фармит, крафтит и чистит данжи. Игра в раннем доступе и бесплатна. 🤩 Поиграть: https://deepestworld.com/ @WebDev_Plus

Вышла версия 1.5 популярного React-компонента для карт Теперь разработчики могут работать с 3D-картами, использовать SSR, строить маршруты между двумя точками и рисовать собственные геометрические фигуры прямо на карте. Проект продолжает активно развиваться и становится ещё удобнее для интеграции в современные веб-приложения. Подробнее: react-google-maps1.5 @WebDev_Plus

Indexing Индексы нужны, чтобы ускорить выборку данных. Вместо полного сканирования таблицы база обращается к индексу, который работает как оглавление в книге. Пример: если создать индекс на поле email, то поиск пользователя по почте выполняется гораздо быстрее. Существуют разные виды индексов. Индекс может быть по одному столбцу или составным по нескольким. Уникальный индекс гарантирует отсутствие дубликатов, а полнотекстовый индекс используется для быстрого поиска по текстам. Главное преимущество индексов — заметное ускорение запросов, сортировок и фильтрации. Минусы заключаются в том, что индексы занимают дополнительное место и замедляют операции записи, такие как вставка, обновление и удаление. Joins Join это способ объединить строки из разных таблиц по связанному полю. INNER JOIN возвращает только совпадающие строки, LEFT JOIN оставляет все строки из левой таблицы и добавляет совпадения из правой, RIGHT JOIN делает то же самое, но наоборот, FULL OUTER JOIN объединяет всё при наличии совпадений, а CROSS JOIN выдаёт декартово произведение. Пример запроса:

SELECT users.name, orders.order_date
FROM users
INNER JOIN orders ON users.id = orders.user_id;

Transactions Транзакция это набор операций, который выполняется как единое целое. Если один шаг не проходит, база данных откатывает всё назад, сохраняя целостность. Классические свойства транзакций известны как ACID. Atomicity означает «всё или ничего». Consistency гарантирует, что база остаётся в валидном состоянии. Isolation даёт уверенность, что параллельные транзакции не мешают друг другу. Durability гарантирует, что закоммиченные изменения сохраняются навсегда. Пример транзакции для перевода денег:

BEGIN;
UPDATE accounts SET balance = balance - 100 WHERE id = 1;
UPDATE accounts SET balance = balance + 100 WHERE id = 2;
COMMIT;

В реальных системах индексы ускоряют поиск товаров по названию в интернет-магазине. Join позволяет объединить клиентов с их заказами в одной выборке. Транзакции обеспечивают корректность при переводе денег между счетами. @WebDev_Plus

HTML получил новые атрибуты command, которые позволяют вызывать методы DOM-элементов без написания JavaScript. Функция уже доступна в Chrome и Edge, а в ближайшее время появится и в Firefox и Safari. Теперь для открытия или закрытия модалки достаточно двух строк HTML. 🤗 @WebDev_Plus

Как одной строкой задать и min-width, и width Обычно это пишут так:

.box {
  width: 100%;
  min-width: 400px;
}

Но то же самое можно записать короче:

.box {
  width: max(400px, 100%);
}

Функция max() берёт большее значение из списка. Если ширина экрана меньше 400px — блок всё равно будет минимум 400px. Если ширина больше — тянется на 100%. Приятный бонус: значения в max() можно указывать в любом порядке. @WebDev_Plus