-
Полезные статьи, качественные проекты, интересные задачи и вкиторины для тренировки собственных навыков. Наш чат @frontend_school_chat По всем вопросам @this_is_patrick
Макет Figma: Сервис поиска помощников для самозанятых
Уже более сложный макет, чем предыдущий.
Ссылка
#figma #макет
Учитесь фронтенду с нами — подпишитесь 💻
Половина из которых Deprecated
#кек
Учитесь фронтенду с нами — подпишитесь 💻
Сегодня поговорим о загадочном свойстве __proto__. Что это такое и почему это важно для JavaScript?
Всё дело в прототипах. В JavaScript каждый объект может «наследовать» свойства и методы другого объекта. Этот «наследник» называется прототипом. Свойство __proto__ указывает на объект, который является прототипом данного объекта.
Например:
const animal = {
eats: true
};
const rabbit = {
jumps: true,
__proto__: animal
};rabbit есть доступ к свойству eats через прототип animal. Это позволяет экономить память и добиваться мощной функциональности с минимальными усилиями. Знание прототипов и __proto__ поможет вам писать более эффективный и выразительный код.
Магия clip-path
clip-path
В этой статье вы сможете узнать скрытые возможности clip-path и увидеть интересные способы его использования:
https://emilkowal.ski/ui/the-magic-of-clip-path
#css #en
Никто не знает JavaScript — хакер со стажем поделился своим опытом
Это большое интервью Деми Мурыча, где он рассказывает очень интересные факты о JS, веб-разработке и показывает свои скилы. Не буду ходить вокруг да около, я посмотрел это видео полностью несмотря на продолжительность и рекомендую сделать это вам!
https://youtu.be/hHdNfPOQjrg
#видео #интервью
Учитесь фронтенду с нами — подпишитесь 💻
#викторина #html
Учитесь фронтенду с нами — подпишитесь 💻
Что такое WeakMap и WeakSet
WeakMap — это коллекция, где ключами могут быть только объекты, а значения могут быть любого типа. Особенность WeakMap: если объект, использованный как ключ, больше нигде не упоминается, он автоматически удаляется.
WeakSet — это коллекция, хранящая только уникальные объекты. Как и в WeakMap, если объект больше не используется, он может быть удалён автоматически.
Примеры использования:
let wm = new WeakMap();Что такое WeakMap и WeakSet
let obj = {};
wm.set(obj, 'значение');
console.log(wm.get(obj)); // 'значение'
obj = null; // Объект становится недоступен и может быть удалён
WeakSet полезен для хранения множества объектов с автоматической очисткой.
🎉 Результаты розыгрыша:
Победитель:
1. лицемер (@turboflex971)
Проверить результаты
#викторина #javascript
Учитесь фронтенду с нами — подпишитесь 💻
Что такое Git для начинающих
Многие из вас уже пробовали работать с Git и GitHub, а некоторые только собираются подступиться к нему. Если не знаете с чего начать, то здесь вы найдете все ответы!
Узнайте, что такое GitHub, как использовать Git для начинающих, и как выполнить установку Git за 15 минут:
https://youtu.be/VJm_AjiTEEc
#git #github
Учитесь фронтенду с нами — подпишитесь 💻
Область видимости и замыкания в JavaScript
Область видимости в JS — это любая область в коде, которая содержит именованные сущности (переменные, классы, функции) и определяет их доступность из разных частей кода. В зависимости от того, где расположен ваш код — в глобальной или локальной области, он будет вести себя по-разному.
В этой статье вы найдёте базовую информацию по этой теме. Без знания её вы просто не сможете писать правильно работающий код, поэтому к прочтению обязательно!
https://habr.com/ru/articles/828618/
#javascript
Учитесь фронтенду с нами — подпишитесь 💻
Zeplin — инструмент для работы с макетами формата .psd
Сегодня всё больше верстают по макетам из Figma. Но иногда всё же встречаются и другие форматы. Zeplin — это инструмент, который помогает дизайнерам и разработчикам совместно работать над макетами. Он позволяет быстро и удобно экспортировать дизайн из Sketch, Figma или Adobe XD, создавать спецификации для разработчиков, а также обмениваться комментариями и обратной связью. Zeplin упрощает процесс совместной работы и помогает сохранить единство дизайна на всех этапах разработки.
Скачать можно здесь: https://zeplin.io/
#инструменты
Учитесь фронтенду с нами — подпишитесь 💻
Сложный макет в Figma для прокачки ваших навыков
Я специально написал в самом заголовок, что макет сложный, чтобы не расстраивать тех, кто только начинает осваивать вёрстку. Если же вам кажется, что вы уже достаточно окрепли для создания чего-то более сложного, чем одностраничник, то обязательно попробуйте сверстать это.
По ссылке ниже вы найдёте объёмный макет для CRM дошкольной образовательной организации. Справитесь?
https://www.figma.com/design/egY90HlOAiLF53TaTrkM9W/детсад?node-id=0-1&t=cMtypXlNrFBGq9yF-1
#figma #макет
Учитесь фронтенду с нами — подпишитесь 💻
Когда-то ему придётся спуститься с небес на землю..
#кек
Учитесь фронтенду с нами — подпишитесь 💻
Математические функции CSS со ступенчатыми значениями
В CSS теперь полноценно работают функции round(), rem() и mod(). Работают они точно также, как и в JavaScript, то есть округляют, и возвращают остатки. Это даёт ещё больше возможностей для стилизации сайта без применения JavaScript, но и увеличивает нагрузку со стороны CSS.
Чтобы было понятнее, где это может быть применимо, я нашёл статью, которая объясняет их использование на простых примерах создания спрайтов анимации:
https://habr.com/ru/articles/816587/
#css
Учитесь фронтенду с нами — подпишитесь 💻
Асинхронность в JavaScript: Async/Await, Promises, Callbacks, Fetch API
Большой бесплатный курс по асинхрономму программированию на JavaScript. Вы изучите javascript promises, async / await и Fetch API. Также вы сможете сразу воспользоваться новыми знаниями для создания 3 проектов.
Смотрим курс тут:
https://youtu.be/OFpqvaJ3QYg
#en #javascript #видео #курс
Учитесь фронтенду с нами — подпишитесь 💻
10 полезных однострочников для CSS, которые пригодятся в большинстве проектов
Эти несколько однострочников помогут вам облегчить вёрстку сайта, избавив от стандартных сложностей и неожиданного поведения страницы:
https://alvaromontoro.com/blog/68055/ten-css-one-liners-for-almost-every-project
#css
Учитесь фронтенду с нами — подпишитесь 💻
Анимации скролла во фронтенде
Сегодня на сайтах часто используются анимации, которые привязаны к скроллу страницы. Это делает сайт более живым и динамичным.
Если хотите научиться делать также, то эта статья для вас. Здесь вы найдёте несколько демо для изучения работы эффекта на CSS и JS, полезные инструменты, которые упростят создание таких анимаций, а также бесплатный видеокурс по этой теме:
https://scroll-driven-animations.style/
#css #javascript #en
Учитесь фронтенду с нами — подпишитесь 💻
Макет сайта психологической поддержки
Простой макет для вёрстки, который позволит вам попрактиковаться.
Сложность: лёгкая
Ссылка
#макет #figma
Учитесь фронтенду с нами — подпишитесь 💻
Зато сколько времени свободного появилось.
#кек
Учитесь фронтенду с нами — подпишитесь 💻
Стоит ли решать задачи на CodeWars
Вы решали когда-нибудь задачки с CodeWars? Они помогают проверить знания, отточить навыки и попробовать новые алгоритмы.
Автор этой статьи уже долгое время сидит на этом сайте и взял за правило регулярно решать одну или несколько задач, сравнивать свои решения с решениями других пользователей и тем самым сильно прокачался. Подробнее о методе и результата здесь:
https://habr.com/ru/articles/828048/
Учитесь фронтенду с нами — подпишитесь 💻
Большой видеокурс по Vue 3 для начинающих
Это 7-часовое видео рассчитано на тех, кто не знаком с Vue и начинает учить его с нуля. Просмотрев его,вы вы узнаете, как работает Vue и научитесь:
— передавать данные между компонентами;
— делать запросы на бэк и обрабатывать JSON-данные;
— делать переход между страницами с помощью Vue Router;
— стилизировать приложение с помощью TailwindCSS;
— делать красивую и простую анимацию списков товаров, корзину и т.п.
Узнать подробности, изучить новые технологии и создать свой первый проект на Vue можно тут:
https://youtu.be/U_-Ht_v-oAs
#видео #vue
Учитесь фронтенду с нами — подпишитесь 💻
Форма авторизации с капчей
Наверняка вам придётся делать такую форму в своей практике, поэтому чем быстрее научитесь, тем лучше. В этом проекте форма создана на стандартном стеке — HTML, CSS, JS.
Ниже вы можете посмотреть, как это работает, а также изучить код:
https://codepen.io/Frontend-Portal/pen/oNRbjXG
#codepen #html #css #javascript
Верстаем макет SKINDOM
Ловите свеженький макет для Figma. Он уже попроще, чем предыдущий, но всё же требует определённых навыков.
Сложность: средняя
Доступен по ссылке: https://www.figma.com/file/NtwsMuRC0u1c5gZIZYCl1l/KK-Shop?node-id=13%3A994
#макет #figma
Учитесь фронтенду с нами — подпишитесь 💻
Хорошо, что у нас в канале всё бесплатно!
#кек
Учитесь фронтенду с нами — подпишитесь 💻
Метод bind() в JavaScript
Простыми словами, bind — это инструмент, который позволяет «привязать» определённый контекст (this) к функции.
Давайте разберёмся на примере. Представьте, что у вас есть объект user:
const user = {
name: 'Аня',
greet() {
console.log(`Привет, меня зовут ${this.name}`);
}
};user.greet(), то увидим: «Привет, меня зовут Аня». Всё работает, потому что контекст (this) указывает на объект user.const greetFunc = user.greet;
greetFunc(); // Что произойдет?
this будет указывать не на user, а на глобальный объект (или undefined в строгом режиме). Метод bind поможет нам решить эту проблему:const greetFuncBound = user.greet.bind(user);
greetFuncBound(); // Привет, меня зовут Аня
greetFuncBound всегда будет знать, что её контекст — это объект user.
Как работает CSS Flexbox: наглядное введение в систему компоновки элементов
CSS Flexbox — это технология для создания сложных гибких макетов за счёт правильного размещения элементов на странице. Используя её, вам не понадобится Bootstrap или его аналог.
В этой статье разобраны возможности CSS Flexbox с помощью гифок, чтобы вы сразу понимали, как работает каждый из методов — настоящая flex шпаргалка для тех, кто хочет быстро прокачать свои скилы в вёрстке.
#css
Учимся создавать анимацию жидкости с помощью JS и CSS
В этом видео вы за 8 минут научитесь делать клёвую анимацию, которая создаёт эффект стекающей жидкости. Причём движение элементов отличается в случае свободного падения и взаимодействия с другими объектами на странице.
Подробнее:
https://youtu.be/a5X512icOM8
#видео #css #javascript
Учитесь фронтенду с нами — подпишитесь 💻
#викторина #css
Учитесь фронтенду с нами — подпишитесь 💻
100 видеоуроков по фронтенду для новичков и не только
Это максимально подробный базовый курс по фронтенду, который охватывает все основные темы. Начиная с того, что вообще такое фронтенд и заканчивая советами по прохождению интервью на вакансию разработчика.
Если не хотите смотреть сейчас, то обязательно сохраняйте пост в закладки, чтобы посмотреть потом. Не пожалеете!
https://www.youtube.com/playlist?list=PLV9lBwGQ2FU1VOctyWifetyMMC-OTJ51e
#видео #курс
Учитесь фронтенду с нами — подпишитесь 💻