Математические функции CSS со ступенчатыми значениями

В CSS теперь полноценно работают функции round(), rem() и mod(). Работают они точно также, как и в JavaScript, то есть округляют, и возвращают остатки. Это даёт ещё больше возможностей для стилизации сайта без применения JavaScript, но и увеличивает нагрузку со стороны CSS.

Чтобы было понятнее, где это может быть применимо, я нашёл статью, которая объясняет их использование на простых примерах создания спрайтов анимации:

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

#css

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

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

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

Когда-то ему придётся спуститься с небес на землю..

#кек

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

Учимся создавать анимацию жидкости с помощью JS и CSS

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

Подробнее:
https://youtu.be/a5X512icOM8

#видео #css #javascript

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

Сложный макет в Figma для прокачки ваших навыков

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

По ссылке ниже вы найдёте объёмный макет для CRM дошкольной образовательной организации. Справитесь?

https://www.figma.com/design/egY90HlOAiLF53TaTrkM9W/детсад?node-id=0-1&t=cMtypXlNrFBGq9yF-1

#figma #макет

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

Как работает CSS Flexbox: наглядное введение в систему компоновки элементов

CSS Flexbox — это технология для создания сложных гибких макетов за счёт правильного размещения элементов на странице. Используя её, вам не понадобится Bootstrap или его аналог.

В этой статье разобраны возможности CSS Flexbox с помощью гифок, чтобы вы сразу понимали, как работает каждый из методов — настоящая flex шпаргалка для тех, кто хочет быстро прокачать свои скилы в вёрстке.

#css

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/

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