29203
🚀 Статьи, новости, туториалы по frontend разработке. http://jem-space.ru Admin: @jem_jem Пишу в @five_a_m Хорошие серваки от DigitalOcean: https://m.do.co/c/1351d64475ee Реклама: http://bit.ly/2NxmVDu
База SQL для начинающих
Frontend разработчикам для расширения кругозора короткий ликбез по SQL.
https://youtu.be/5sG9kmXYsKU
Репозиторий с решенными frontend проблемами
Алгоритмические задачи, задачи на верстку и React c объяснением
https://github.com/pinglu85/BFEdevSolutions
Как подключить нестандартные шрифты?
Несколько способов подключения и загрузки шрифтов, а также тонкости для максимальной оптимизации.
https://htmlacademy.ru/blog/html/fonts-loading
РАЗБОР ИГР, который поможет наконец-то на этом зарабатывать
Для этого совсем не обязательно иметь навыки в программировании, и об этом скоро — на РАЗБОРЕ от Евгения Гришакова, владельца студии Garden of Dreams.
Но! Если хочешь халяву - не кликай
Что будет на разборе?
— Посмотришь игры других и поймешь, как на всем этом зарабатывать
— Полный разбор твоей игры от геймдев экспертов. Разберем упаковку игры, геймплей, механики и многое другое.
— Разберем, почему твоя игра не залетела и как это исправить.
— Выявим слабые в игре и дадим практические советы по улучшению.
🔥 Все бесплатно! Цель — помочь ребятам начать зарабатывать на своих играх.
При регистрации ты получишь подарок — исходник игры. Это отличная вещь для тех, у кого еще нет своей игры, но кто очень хочет попробовать себя в геймдеве.
Приходи на разбор 29 АВГУСТА в 19:00 и открой для себя кучу полезной информации. Инвестируй свое время правильно!
patch-package
Инструмент, позволяющий пропатчить код библиотек из node_modules (когда другие варианты уже невозможны), сделать патч изменений и применять его на postinstall.
https://www.npmjs.com/package/patch-package
Микро-фронтенд
Краткий курс для тех, кто не работал с микро-фронтами.
https://www.youtube.com/watch?v=lKKsjpH09dU&ab_channel=freeCodeCamp.org
Ищете работу frontend-разработчиком, но боитесь, что вам не хватит опыта и вы провалите собеседование?
Приходите на открытое собеседование на позицию junior+ frontend-разработчика в прямом эфире 16 августа в 19.00.
На собеседовании будут вопросы по HTML, CSS, JS и будут даны пару задач на решение. Вы увидите, как проводятся настоящие собеседования, поймёте, к чему нужно быть готовым, а в конце сможете задать вопросы и получить рекомендации.
Ведущие:
▪️Дмитрий Безуглый, CTO Frogly, работал Frontend Team Lead VK и нанимал разработчиков в VK.
▪️Артур Стамбульцян, Frontend Team Lead Telegram Open Network.
Перестаньте бояться собеседований
и узнайте, как проходить их лучше!
[Зарегистрироваться]
WebAssembly
Александр Коротаев рассказывает, как и для чего можно использовать WebAssembly, и можно ли писать WebAssembly на TypeScript.
https://www.youtube.com/watch?v=jphCxcOJoAk
Тестирование приложение с Cypress
Большое туториал по e2e тестированию с Cypress
https://www.youtube.com/watch?v=u8vMu7viCm8
CSS и доступность
Подстраиваем стиль приложения под предпочтения пользователя. О медиа фичах и их статусе внедрения, которые помогут сделать ваше приложение более доступным.
https://www.smashingmagazine.com/2023/08/css-accessibility-inclusion-user-choice/
Front-end. Вопросы на собеседовании
Разбор вопросов про ФП и ООП, Gitflow, DI, агрегацию и композицию.
https://www.youtube.com/watch?v=hJDqYohmzL8&
CSS Masking
Большой гайд по работе с CSS масками.
https://blog.codepen.io/2023/07/31/chris-corner-clever-css-ideas-explanations/
Друзья! Собрали советы от старшего исследователя MTS AI Аммара Али, выигравшего семь конкурсов по искусственному интеллекту, организаторами которых были Google, NASA, AI Journey.
Итак, если вы хотите побеждать в международных соревнованиях по ИИ, вам нужно:
1. выбрать направление, в котором мы чувствуете себя увереннее всего;
2. начать участвовать в соревнованиях, не бояться и не думать, что это что-то невероятно сложное;
3. превратить конкурсы в свое хобби и почувствовать драйв от турниров по ИИ;
4. подавать заявку как можно раньше, чтобы больше времени было на подготовку;
5. совершенствовать свое решение каждый день понемногу - так больше шансов, что к финалу подачи заявки вы будете одними из лучших.
Если хотите участвовать в соревнованиях по ИИ, готовить статьи для крупнейших научных изданий, приходите работать в MTS AI. У нас есть целый отдел фундаментальных исследований и еще крутые позиции для разработчиков. Вакансии смотрите по ссылке.
Воссоздаем Youtube Ambient Mode эффект
Туториал по реализации эффекта светящейся рамки для видео.
https://smashingmagazine.com/2023/07/recreating-youtube-ambient-mode-glow-effect/
Создание формы для донатов
Пример реализации формы на React + Express и интеграции ее с платежной системой Stripe.
https://dev.to/wra-sol/building-a-reactexpress-stripe-donation-form-2pek
🤬 Опять тупит VPN? Надоело 🤬
Просто расслабься и переходи в бота SolutVPN
В SolutVPN:
✔️ Скорость от 300 Мб/сек
Загружайте сайты за секунду и смотрите фильмы без зависаний
✔️ Нет ограничений по объему трафика
Фильмы в 4К, большие файлы, куча вкладок — не проблема
✔️ Демократичные цены
49₽ неделя, 99₽ месяц — ниже, чем у аналогов на рынке
Переходи и забирай 3 дня бесплатного пробного периода сейчас 👉 @SolutVPN
Откладываем загрузку некритического CSS
Практический пример оптимизации загрузки страницы с разделением критического и некритического CSS.
https://web.dev/defer-non-critical-css/
Оптимизация анимаций элементов
Как правильно с точки зрения браузера анимировать элементы на странице, чтобы кулеры ноутбука не свистели.
https://habr.com/ru/articles/701604/
Как браузер рендерит страницы
Краткое описание процесса с важными аспектами.
https://doka.guide/tools/how-the-browser-creates-pages/
Новые единицы измерения viewport
Статья о динамических единицах и какую проблему они решают на мобильных устройствах.
https://ishadeed.com/article/new-viewport-units/
381 выпуск Веб Стандартов
Затронули Firefox 116, новую математику в CSS, Style Queries и еще несколько тем.
https://web-standards.ru/podcast/381/
The virtual keyboard API
Новый API для виртуальной клавиатуры, который позволяет решать некоторые проблемы отображения контента на мобильных устройствах.
https://ishadeed.com/article/virtual-keyboard-api/
Введение в CSS Grid для новичков
Основы Grid разметки с простыми примерами использования.
https://www.sitepoint.com/introduction-css-grid-layout-module/
Запись шагов через DevTools
Короткое видео о том, как записать и пошарить шаги какой либо фичи вашего приложения.
https://www.youtube.com/watch?v=rMUayh1QPYs
#ruvds_статьи #javascript
Явное управление ресурсами: пробуем новую фичу JavaScript и TypeScript
⭐️⭐️◽️◽️◽️
📖Читать
Стартануть в IT быстро и эффективно — подготовительный курс по Frontend-разработке. Изучаем базу за 14 дней — всего за 990 рублей!
🗓 Начинаем 10 августа.
Даем: 72 урока с практикой в браузере, 3 онлайн вебинара и 1 сессию лайвкодинга с практикующим разработчиком.
Получаем: крепкие знания базы языка, умение понимать код и первую программу на JavaScript, написанную вместе с наставником.
🔜 Запишитесь прямо сейчас!
CSS GridGarden
Игра, которая пошагово рассказывает о том, как работать с CSS Grid. 28 уровней, которые сделают из тебя знатока гридов ☺️
https://cssgridgarden.com/#ru
Flexer
Визуальный CSS Flexbox конфигуратор. Отличный способ разобраться с flexbox для начинающих.
https://www.flexer.dev/
Лучшие практики по созданию форм логина и регистрации
Несколько советов о том, как создавать формы, которыми удобно пользоваться с любых устройств.
https://web.dev/sign-in-form-best-practices/
Курс «Английский для разработчиков» Яндекс Практикума
Для тех, кто хочет изменить свою профессиональную жизнь и работать в международной команде.
Обучение построено не вокруг абстрактной теории, а вокруг рабочих ситуаций и полезных для карьеры навыков:
✋Стендапы. Подготовитесь обсуждать задачи, задавать вопросы и просить о помощи.
👨💻 Работа с заказчиками. Научитесь презентовать решения, говорить про баги и фичи.
📣 Митапы. Сможете понимать на слух доклады и выступать сами.
😎 Собеседования. Научитесь рассказывать про свой опыт, понимать вопросы и тактично переспрашивать.
👯 Неформальное общение с коллегами. Сможете рассказать о своих интересах, опыте, планах на будущее.
💻 Код-ревью. Сможете описать сделанное, дать обратную связь, тактично отстоять своё мнение.
Запишитесь на бесплатную консультацию. Кураторы определят ваш уровень языка и расскажут подробнее про обучение.