29203
🚀 Статьи, новости, туториалы по frontend разработке. http://jem-space.ru Admin: @jem_jem Пишу в @five_a_m Хорошие серваки от DigitalOcean: https://m.do.co/c/1351d64475ee Реклама: http://bit.ly/2NxmVDu
Создайте навык Алисы 💡
Алиса — виртуальный голосовой помощник. Она умеет ставить музыку, сообщать погоду, говорить шёпотом и даже заказывать продукты из магазина.
И это не предел — постоянно появляются новые сценарии использования. Их может добавлять не только команда Яндекса, но и все желающие — от разработчиков до простых пользователей.
Чтобы создать навык Алисы быстро и просто, используйте serverless-решения Yandex Cloud:
— все необходимые компоненты и технологии в рамках одной платформы;
— использование функций Cloud Functions для навыков Алисы не тарифицируется;
— управление сервером, администрирование, обновление ПО и интеграцию Yandex Cloud берёт на себя;
— автомасштабируемое окружение справится с любыми нагрузками, в том числе нерегулярными и непостоянными;
— доступна подробная документация, пошаговые инструкции и вебинары о создании навыков Алисы в экосистеме serverless.
Узнайте больше и создавайте навыки Алисы с помощью serverless-решений ➡️
Эксперимент с новым синтаксисом для создания SVG через CSS
https://yuanchuan.dev/experimenting-a-new-syntax-to-write-svg
Поиграться и поэкспериментировать самому можно тут
Динамические ключи в TS
Дмитрий Павлутин рассказывает, как использовать структуры с динамическими ключами и чем они отличаются от Record.
https://dmitripavlutin.com/typescript-index-signatures/
Визуализация данных с помощью Unovis
Создаем проект и рисуем графики, чарты и строим графы с библиотекой Unovis.
https://blog.logrocket.com/exploring-data-visualization-unovis/
Примеры использования Trig.JS
Trig.JS — небольшая библиотека, которая позволяет делать анимации, реагирующие на скролл.
https://idev-games.github.io/Trig-JS-Examples/
Визуализируем JavaScript: Promises & Async/Await
https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke
Создаем CSS разметку в стиле masonry
Туториал, включающий несколько способов создания разметки, один из который с использованием экспериментальных фич CSS.
https://dev.to/logrocket/creating-css-masonry-style-layouts-50b7
Как начать работать с git за 10 минут
Простой вводный курс для тех, кто еще не начал
https://youtu.be/f2TurkSBnYQ
Как работать с OpenAi API в NodeJS
Делаем своего AI помощника в консоли на NodeJS.
https://medium.com/codingthesmartway-com-blog/3f01c1f8d473
15 интересных CSS свойств, с которыми стоит познакомиться
https://blog.bitsrc.io/9cee5b364990
5 ошибок начинающих разработчиков при создании React приложений
https://css-tricks.com/5-mistakes-starting-react/
Создаем приложениe для ведения бюджета с React Router
Плейлист с итерациями по разработке React приложения
https://www.youtube.com/watch?v=VpzeeBeVWeg&list=PL4cUxeGkcC9iNnY07bh_UPaRIQZcJfARY&ab_channel=TheNetNinja
Хотите узнать, как устроена платформа Yandex Cloud?
Друзья! 28 марта проведем «about:cloud infrastructure» — это мероприятие, на котором разработчики и руководители Yandex Cloud расскажут, как облачная платформа выглядит изнутри.
Вы узнаете:
— как команда развивает ключевые инфраструктурные сервисы;
— с какими техническими задачами сталкиваются разработчики и как решают сложные кейсы;
— узнаете о внутреннем устройстве и архитектуре сервисов платформы.
Встреча будет полезна архитекторам, DevOps-инженерам, продакт-менеджерам, администраторам систем виртуализации, разработчикам высоконагруженных распределённых систем, IT-директорам и руководителям, отвечающим за технологии и инфраструктуру.
Мероприятие бесплатное. Регистрация на онлайн трансляцию ➡️
Полезные возможности TypeScript, которые стоит иметь ввиду
https://my-js.org/blog/ts-features/
Создаем веб презентации с Reveal.Js
На случай, если надоели Google Slides или PowerPoint. Удобно для докладов на конференциях, когда можно вставить код для демо.
https://medium.com/stackanatomy/create-incredible-web-presentations-with-reveal-js-9c8957f3af1b
Руководство по отзывчивому дизайну в 2023 и далее
О том, почему отзывчивый дизайн это не просто версии для декстопа и мобилки и какие задачи решать, чтобы сделать приложение действительно отзывчивым.
https://ishadeed.com/article/responsive-design
Глубокое погружение в ES-модули
Разбираемся, как работают ES-модули.
https://medium.com/web-standards/71f42c1e851a
React 3D анимация на ThreeJS и GSAP
Туториал по анимированию сайта и отображению 3D моделей
https://youtu.be/IyBhFma4H1A
😀Встраивание WebGL в HTML-страницу с помощью Three.JS
В данной статье мы рассмотрим совмещение WebGL‑анимации с прокруткой страницы HTML, используя библиотеку Three.js.
https://habr.com/ru/company/simbirsoft/blog/721912/
Учим Vite за 2 часа
https://www.youtube.com/watch?v=VAeRhmpcWEQ&ab_channel=freeCodeCamp.org
Некоторые кроссбраузерные фичи DevTools, о которых вы могли не знать
https://css-tricks.com/some-cross-browser-devtools-features-you-might-not-know/
Курс «Английский для разработчиков» от Яндекс Практикума
Для тех, кто хочет говорить с коллегами на английском так же естественно, как на русском.
Вы узнаете, как на английском говорить о себе на собеседованиях, общаться с коллегами и закрепите пройденное на практике с иностранцами из IT. В мае введут разговорные клубы для разработчиков.
Для студентов с уровнем Pre-Intermediate или выше.
В основе обучения:
- Занятия с личным преподавателем. Объяснит английский на примере рабочих ситуаций, даст упражнения, будет регулярно проверять вас и анализировать прогресс.
- Практика с иностранцами из IT. Тренируйте собеседования, стендапы и ревью с теми, кто не говорит по-русски.
- Разговорные клубы. Студенты будут созваниваться раз в две недели, практиковать и обсуждать то, что уже прошли. Появятся в мае.
1 апреля курс подорожает. До этого можно купить его по старой цене с доступом к клубам.
Запишитесь на бесплатную консультацию. Куратор определит ваш уровень языка и поможет разобраться, подойдёт ли курс.
Решаем все проблемы стилизации разметки
Как сделать страницу, которая выглядит отлично на всех устройствах.
https://levelup.gitconnected.com/62349644a71e
Переменные окружения в JS
Дмитрий Павлутин рассказывает, что за объект process.env и как из окружения сервера передать его в браузер.
https://dmitripavlutin.com/environment-variables-javascript/
Обычно любые “гарантии” в рекламе — лишь маркетинг, но в данном случае это — реальные обязательства по договору на Frontend с Kata Academy.
Все гарантии реальны и прописаны в договоре со школой, который при поступлении заключает каждый студент.
▫️Ты получаешь работу от 80 000₽ — или обучение за наш счет
Kata дает все необходимые инструкции, как после окончания обучения получить работу. Выполнил все условия, но работу не получил? Ты ничего не должен.
▫️ Оплата только после трудоустройства: учишься бесплатно, а платишь после трудоустройства
Kata выгодно научить тебя как можно лучше.
▫️Тебя уволили, сократили или призвали на военную службу — выплаты за обучение приостанавливаются до момента нового трудоустройства
Свои слова Kata подтверждает договором и только так. Задача — трудоустроить тебя на хорошую зарплату, потому что от этого зависит и доход Kata. Поэтому — это win-win модель и для Kata, и для тебя.
Записывайся на курс: https://clck.ru/33mRTh
Создаем простой компонент аватара на TypeScript
Туториал по созданию компонентов с техникой TDD. Набор коротких видео об использовании типов и интерфейсов, обработке ошибок и написании тестов для react компонентов.
https://www.typescriptcourse.com/tutorials/build-a-dynamic-avatar-component-with-react-typescript
Улучшаем производительность Angular: советы и трюки для эффективного кода
https://guillaume-ferber.medium.com/76939fe7333b
Продумываем dropdown с хорошим UX для разных ситуаций
https://bootcamp.uxdesign.cc/how-to-design-the-best-dropdowns-860a1afb566a
Делаем текстовый контент читабельным
Простые CSS советы, которые превращают простыню текста в текст, который просто читать и красиво смотрится.
https://set.studio/some-simple-ways-to-make-content-look-good/
Тригонометрические функции в CSS
Или как использовать sin(), cos(), tan().
https://web.dev/css-trig-functions/