Zeplin — инструмент для работы с макетами формата .psd

Сегодня всё больше верстают по макетам из Figma. Но иногда всё же встречаются и другие форматы. Zeplin — это инструмент, который помогает дизайнерам и разработчикам совместно работать над макетами. Он позволяет быстро и удобно экспортировать дизайн из Sketch, Figma или Adobe XD, создавать спецификации для разработчиков, а также обмениваться комментариями и обратной связью. Zeplin упрощает процесс совместной работы и помогает сохранить единство дизайна на всех этапах разработки.

Скачать можно здесь: https://zeplin.io/

#инструменты

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

Метод 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.

#урок #javascript

Область видимости и замыкания в JavaScript

Область видимости в JS — это любая область в коде, которая содержит именованные сущности (переменные, классы, функции) и определяет их доступность из разных частей кода. В зависимости от того, где расположен ваш код — в глобальной или локальной области, он будет вести себя по-разному.

В этой статье вы найдёте базовую информацию по этой теме. Без знания её вы просто не сможете писать правильно работающий код, поэтому к прочтению обязательно!

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

#javascript

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

Хорошо, что у нас в канале всё бесплатно!

#кек

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

Что такое Git для начинающих

Многие из вас уже пробовали работать с Git и GitHub, а некоторые только собираются подступиться к нему. Если не знаете с чего начать, то здесь вы найдете все ответы!

Узнайте, что такое GitHub, как использовать Git для начинающих, и как выполнить установку Git за 15 минут:

https://youtu.be/VJm_AjiTEEc

#git #github

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

Верстаем макет SKINDOM

Ловите свеженький макет для Figma. Он уже попроще, чем предыдущий, но всё же требует определённых навыков.

Сложность: средняя

Доступен по ссылке: https://www.figma.com/file/NtwsMuRC0u1c5gZIZYCl1l/KK-Shop?node-id=13%3A994

#макет #figma

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

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

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

Форма авторизации с капчей

Наверняка вам придётся делать такую форму в своей практике, поэтому чем быстрее научитесь, тем лучше. В этом проекте форма создана на стандартном стеке — HTML, CSS, JS.

Ниже вы можете посмотреть, как это работает, а также изучить код:

https://codepen.io/Frontend-Portal/pen/oNRbjXG

#codepen #html #css #javascript

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

Победитель:
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