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

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

Если хотите научиться делать также, то эта статья для вас. Здесь вы найдёте несколько демо для изучения работы эффекта на 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

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

Что такое JSON.stringify()

Это метод в JavaScript, который позволяет превратить объект или массив в строку формата JSON (JavaScript Object Notation). Это бывает полезно, например, когда нужно передать данные по сети или сохранить их в локальное хранилище.

Пример:const user = {
name: «Alice»,
age: 25,
isStudent: true
};

const jsonString = JSON.stringify(user);
console.log(jsonString); // {"name»:"Alice»,"age»:25,"isStudent»:true}

Как видите, объект превратился в строку, которую легко передавать и сохранять. Затем её можно обратно превратить в объект с помощью JSON.parse.

Понимание работы поможет вам эффективно работать с данными на стороне клиента и сервера.

#урок #javascript #json

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

CSS-классы вредны?

Если вы когда-нибудь заглядывали за кулисы пользовательских веб-интерфейсов, то знаете для чего нужно свойство class. Оно ведь нужно для связи HTML с CSS, правда?

Сейчас вы узнаете о том, почему настало время отказаться от него:

https://habr.com/ru/companies/ruvds/articles/829926/

#css #статья

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

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

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

Поздравим коллегу 😄

#кек

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

Топ-7 фишек HTML/CSS верстки сайта, которые вы должны знать

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

https://youtu.be/wRZx6ylDfoI?si=r0dIignjsimlmiXu

#видео #html #css

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

Макет Figma: Сайт по продаже электросамокатов Segway

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

Ссылка на макет

#figma #макет

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

15 советов по оптимизации сайта для быстрой загрузки

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

Если вы уже запустили свой сайт и хотите избежать подобных ошибок, то как максимально оптимизировать сайт рассказали в этой статье:

https://www.speedcurve.com/blog/15-neglected-page-speed-optimizations/

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

Regulex — визуализатор регулярных выражений для JavaScript

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

Ссылка на инструмент: https://jex.im/regulex/

#инструмент #javascript #regex

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