🎉 Результаты розыгрыша:

Победитель:
1. лицемер (@turboflex971)

Проверить результаты

Большой видеокурс по Vue 3 для начинающих

Это 7-часовое видео рассчитано на тех, кто не знаком с Vue и начинает учить его с нуля. Просмотрев его,вы вы узнаете, как работает Vue и научитесь:

— передавать данные между компонентами;
— делать запросы на бэк и обрабатывать JSON-данные;
— делать переход между страницами с помощью Vue Router;
— стилизировать приложение с помощью TailwindCSS;
— делать красивую и простую анимацию списков товаров, корзину и т.п.

Узнать подробности, изучить новые технологии и создать свой первый проект на Vue можно тут:

https://youtu.be/U_-Ht_v-oAs

#видео #vue

Учитесь фронтенду с нами — подпишитесь 💻

Что такое WeakMap и WeakSet

WeakMap — это коллекция, где ключами могут быть только объекты, а значения могут быть любого типа. Особенность WeakMap: если объект, использованный как ключ, больше нигде не упоминается, он автоматически удаляется.

WeakSet — это коллекция, хранящая только уникальные объекты. Как и в WeakMap, если объект больше не используется, он может быть удалён автоматически.

Примеры использования:

let wm = new WeakMap();
let obj = {};

wm.set(obj, 'значение');
console.log(wm.get(obj)); // 'значение'

obj = null; // Объект становится недоступен и может быть удалён

Что такое WeakMap и WeakSet

WeakMap — это коллекция, где ключами могут быть только объекты, а значения могут быть любого типа. ОсобенноЧто такое Wподходит для привязки данных к объекту с автоматической очисткой, например, для кеша DOM-элементов. WeakSet полезен для хранения множества объектов с автоматической очисткой.

#урок #javascript

Учитесь фронтенду с нами — подпишитесь 💻

Стоит ли решать задачи на CodeWars

Вы решали когда-нибудь задачки с CodeWars? Они помогают проверить знания, отточить навыки и попробовать новые алгоритмы.

Автор этой статьи уже долгое время сидит на этом сайте и взял за правило регулярно решать одну или несколько задач, сравнивать свои решения с решениями других пользователей и тем самым сильно прокачался. Подробнее о методе и результата здесь:

https://habr.com/ru/articles/828048/

Учитесь фронтенду с нами — подпишитесь 💻

#викторина #html

Учитесь фронтенду с нами — подпишитесь 💻

Зато сколько времени свободного появилось.

#кек

Учитесь фронтенду с нами — подпишитесь 💻

Никто не знает JavaScript — хакер со стажем поделился своим опытом

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

https://youtu.be/hHdNfPOQjrg

#видео #интервью

Учитесь фронтенду с нами — подпишитесь 💻

Макет сайта психологической поддержки

Простой макет для вёрстки, который позволит вам попрактиковаться.

Сложность: лёгкая

Ссылка

#макет #figma

Учитесь фронтенду с нами — подпишитесь 💻

Магия clip-path

clip-path часто используется для обрезки элементов под самые разные формы. Но также его можно применять и для анимаций, создавая сложные эффекты, которые выделят ваш сайт среди сотен других.

В этой статье вы сможете узнать скрытые возможности clip-path и увидеть интересные способы его использования:

https://emilkowal.ski/ui/the-magic-of-clip-path

#css #en

Анимации скролла во фронтенде

Сегодня на сайтах часто используются анимации, которые привязаны к скроллу страницы. Это делает сайт более живым и динамичным.

Если хотите научиться делать также, то эта статья для вас. Здесь вы найдёте несколько демо для изучения работы эффекта на CSS и JS, полезные инструменты, которые упростят создание таких анимаций, а также бесплатный видеокурс по этой теме:
https://scroll-driven-animations.style/

#css #javascript #en

Учитесь фронтенду с нами — подпишитесь 💻

Сегодня поговорим о загадочном свойстве __proto__. Что это такое и почему это важно для JavaScript?

Всё дело в прототипах. В JavaScript каждый объект может «наследовать» свойства и методы другого объекта. Этот «наследник» называется прототипом. Свойство __proto__ указывает на объект, который является прототипом данного объекта.

Например:

const animal = {
eats: true
};

const rabbit = {
jumps: true,
__proto__: animal
};

Теперь у объекта rabbit есть доступ к свойству eats через прототип animal. Это позволяет экономить память и добиваться мощной функциональности с минимальными усилиями. Знание прототипов и __proto__ поможет вам писать более эффективный и выразительный код.

#урок #javascript

Учитесь фронтенду с нами — подпишитесь 💻

10 полезных однострочников для CSS, которые пригодятся в большинстве проектов

Эти несколько однострочников помогут вам облегчить вёрстку сайта, избавив от стандартных сложностей и неожиданного поведения страницы:

https://alvaromontoro.com/blog/68055/ten-css-one-liners-for-almost-every-project

#css

Учитесь фронтенду с нами — подпишитесь 💻

Половина из которых Deprecated

#кек

Учитесь фронтенду с нами — подпишитесь 💻

Асинхронность в JavaScript: Async/Await, Promises, Callbacks, Fetch API

Большой бесплатный курс по асинхрономму программированию на JavaScript. Вы изучите javascript promises, async / await и Fetch API. Также вы сможете сразу воспользоваться новыми знаниями для создания 3 проектов.

Смотрим курс тут:

https://youtu.be/OFpqvaJ3QYg

#en #javascript #видео #курс

Учитесь фронтенду с нами — подпишитесь 💻

Макет Figma: Сервис поиска помощников для самозанятых

Уже более сложный макет, чем предыдущий.

Ссылка

#figma #макет

Учитесь фронтенду с нами — подпишитесь 💻

#викторина #javascript

Учитесь фронтенду с нами — подпишитесь 💻

Как реализовать редактор форматированного текста в вашем React-приложении

В этой статье вы научитесь делать простой Wysiwyg-редактор, то есть редактор, текста, который позволит вам и вашим пользователям писать статьи и рассказы так же, как если бы вы это делали в Medium, Google Docs или где-то ещё.

https://nuancesprog.ru/p/14695/

#react #wysiwyg

Учитесь фронтенду с нами — подпишитесь 💻

Разбираемся в CORS за 6 минут

CORS, также известный как совместное использование ресурсов из разных источников, — это то, с чем в какой-то момент приходится сталкиваться каждому веб-разработчику. Скорее всего, вы уже имело дело с ошибкой CORS или вскоре столкнётесь с ней. В этом видео вы узнаете, что такое CORS и как вы можете исправить ошибки корсов без особых проблем:

https://youtu.be/PNtFSVU-YTI

#видео #cors

Учитесь фронтенду с нами — подпишитесь 💻