30 самых полезных библиотек Python для веб-разработки в 2024 году

Занимаетесь вебом и не расстаётесь с JavaScript? Пора это исправить! Я тут нашёл для вас подборку из 30 библиотек Python, которые пригодятся веб-разработчикам.

Справедливости ради, в вебе действительно есть задачи, которые проще решать на Python: от анализа данных до веб-разработки. Посмотрите сами. Надеюсь, что найдёте для себе что-то новое и полезное:

https://tproger.ru/articles/30-samyh-poleznyh-bibliotek-python-dlya-veb-razrabotki-v-2024-godu

#веб #python

🐈‍⬛ Подписывайтесь на меня 😌

Полный курс по React, Redux и TypeScript бесплатно

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

Здесь вы научитесь инициализировать Redux Store, создавать хуки и работать с TS:

https://youtu.be/ETWABFYv0GM

#видео #курс #react #redux #typescript

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

Выходные — не повод сидеть без дела! Поэтому предлагаем сверстать очередной сайт для оттачивания мастерства вёрстки

По ссылке ниже вы найдёте стильный макет, по которому сможете сделать не менее красивый, но при этом ещё и функциональный лендинг:

https://www.figma.com/design/PSr7478hcIydh1tC6YZkUr/2rism?node-id=0-1&t=mVxuzEoR26yERLGI-0

#figma #макет #вёрстка

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

Как настроить выбор темы на сайте

Для этого нам понадобится медиавыражение `prefers-color-scheme`, которое определяет выбранную в предпочтениях пользователя настройку темы в операционной системе.

Например, это может выглядеть так:
```
@media (prefers-color-scheme: light) {
.block {
background: white;
color: black;
}
}```

Более подробно о медиавыражение рекомендую почитать тут:
https://doka.guide/css/prefers-color-scheme/

#css

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

100 видеоуроков по фронтенду для новичков и не только

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

Если не хотите смотреть сейчас, то обязательно сохраняйте пост в закладки, чтобы посмотреть потом. Не пожалеете!

https://www.youtube.com/playlist?list=PLV9lBwGQ2FU1VOctyWifetyMMC-OTJ51e

#видео #курс

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

Математические функции 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