Code Ready | Frontend

👩‍💻 Анимация загрузки страницы В этом посте вы узнаете, как создать простую анимацию загрузки страницы, используя чистый CSS.

Основой для создания этой анимации является правило @keyframes — оно устанавливает ключевые кадры при анимации элементов.

➡️ @code_ready | #гайд #css

Джентельменский набор трушного фронтендера Опытные Frontend-разработчики собрали самые востребованные и бесплатные каналы, без которых не обойдется ни один настоящий фронтендер. Макеты для верстки — самый крупный канал с макетами для верстки. Первоисточник всех макетов в Telegram. Полезная вËрстка — канал с готовыми решениями повседневных задач: слайдеры, анимация, навигация и т.д. JavaScript заметки — образовательный канал с ежедневными практическими заметками по языку. codepen.js — готовые коды: реализованные на css и js анимации, скрипты и интерфейсы. Оживи статичные макеты Figma Start — каждый день выпускаем крутые макеты для верстки. Выбери самый интересный и удиви рекрутеров! Развивайся с нами, ведь так проще!

flexboxfroggy — игра, которая поможет вам выучить CSS-flexbox. Тут нужно писать нужные свойства во встроенном редакторе для решения головоломок. ⛓ Ссылочка: https://flexboxfroggy.com/ ➡️ @code_ready | #ресурсы

👩‍💻 Прилипший заголовок Свойство position управляет тем, как элемент размещается на странице. Параметры свойства:

• static (по умолчанию) — Элементы располагаются на странице в обычном потоке документа. • relative — Элементы могут быть смещены относительно их исходного положения с помощью свойств top, right, bottom и left. • absolute — Относительно ближайшего предка, который имеет значение position отличное от static. • fixed — Относительно окна браузера и остаются на месте при прокрутке страницы. • sticky — комбинируют поведение relative и fixed. В начале они ведут себя как статические элементы, но как только они достигают заданной позиции при прокрутке они становятся фиксированными.

➡️ @code_ready | #свойство #css

Cамый простой способ изучить Java — залезть в голову профи Один из лучших айтишников России учит базе кодинга в Telegram. Даже гуманитарий поймёт, как создавать приложения, сайты, игры и чат-боты. Достаточно подписаться на «Секреты Java», где каждый день появляются гайды, готовые примеры кода и лучших практик. И всё это бесплатно — вместо сотен тысяч рублей за курсы. Стартовать в прибыльной профессии с нуля вы сможете гораздо проще! Теперь обучиться Java может каждый: @java_secrets

👩‍💻 Атрибут contenteditable Атрибут contenteditable позволяет сделать элемент на веб-странице редактируемым пользователем, позволяя вводить и изменять текст. Он имеет два значения:

• contenteditable="true" (по умолчанию) — включает редактирование текста. • contenteditable="false" — отключает редактирование текста.

➡️ @code_ready | #атрибут #html

Web Skills — платформа, ориентированная на развитие навыков веб-разработки для всех уровней — от новичков до опытных специалистов. Здесь собраны все навыки для веб-разработчика с ссылками для изучения темы. ⛓ Ссылочка: https://andreasbm.github.io/web-skills/ ➡️ @code_ready | #ресурсы

👩‍💻 Использование метода reduce() для подсчета частоты элементов в массиве. 🔊Таким образом мы можем подсчитывать количество вхождений каждого элемента в массиве и возвращать объект с уникальными элементами в качестве ключей и их частотой в качестве значений.

Метод reduce используется для обработки массивов, сводя их к единственному значению. Он принимает функцию обратного вызова и необязательное начальное значение.

🔊В этом примере мы используем его, чтобы пройти по массиву и создать объект, где ключами являются элементы массива, а значениями — количество их вхождений. Это позволяет быстро получить информацию о частоте элементов. ➡️ @code_ready | #трюк #js

«Привет, как дела?» — сразу летишь во френдзону Это будет продолжаться ВЕЧНО, пока не начнешь читать канал ТВОРЧЕСТВО ЧУВСТВ, где узнаешь: — грамотно общаться с девушками и доводить до секса — строить прочные отношения, где девушка ласковая и покорная, а ты — лидер — сформировать базу мужских принципов, которые помогут во всех направлениях в жизни Главное про качественные отношения тут: t.me/+9G4uPdPxisU2Njk6

👩‍💻 Вопрос с собеседования Что такое прототипное наследование в JavaScript и как его использовать? Ответ: 1. Прототип объекта — каждый объект в JS имеет внутренний прототип, который можно получить через Object.getPrototypeOf() или свойство __proto__. Он может содержать методы и свойства, унаследованные объектом.

const animal = {
  speak() {
    console.log('Animal speaks');
  }
};
const dog = Object.create(animal);
dog.speak(); // Animal speaks

2. Конструкторы и прототипы — функции-конструкторы создают объекты с общим прототипом, который можно определить через свойство prototype.

function Person(name) {
  this.name = name;
}
Person.prototype.greet = function() {
  console.log(`Hello, ${this.name}`);
};
const alice = new Person('Alice');
alice.greet(); // Hello, Alice

3. Изменение прототипа объекта — можно изменить прототип объекта после его создания.

const person = { name: 'John' };
const employee = { job: 'Developer' };
Object.setPrototypeOf(employee, person);
console.log(employee.name); // John

➡️ @code_ready | #техсобес

👩‍💻 Градиентное затемнение картинки Чтобы создать эффект градиентного затемнения для картинки, нужно задать свойству background: linear-gradient следующие параметры:

• to right — задаёт направление градиента (to right - слева направо, to left - справа налево). • rgba(0, 0.5, 0.4, 0.7) — первый цвет градиента. • rgba(0, 0, 0, 0) — второй цвет градиента.

.overlay {
   background: linear-gradient(to right, 
   rgba(0, 0.5, 0.4, 0.7), rgba(0, 0, 0, 0));
}

➡️ @code_ready | #гайд #css

📱 Извлечение значений параметров из URL Используйте URLSearchParams для получения значения определенного параметра из URL, который можно использовать для выполнения действий на странице. Это необходимо для динамической обработки данных, передаваемых через URL, что часто используется в веб-приложениях для фильтрации и сортировки, обработки данных, переданных через GET-запросы и сохранения состояния страницы.

Важно помнить, что метод get() возвращает null, если параметр отсутствует в URL. Поэтому стоит учитывать это при обработке значений.

➡️ @code_ready | #гайд #js

Привет! Хочешь научиться хорошо и быстро разрабатывать крутые сайты и проекты? Тогда канал «Будни разработчика» для тебя! Подпишись, и узнаешь: ➕ как влиться во фронтенд ➕ как организовать работу ➕ как писать хороший код Ждём! ⬇️

👩‍💻 Атрибут translate Атрибут translate управляет тем, должно ли содержимое элемента переводиться, если страница переведена с использованием автоматических переводчиков. Он имеет два значения:

• translate="yes" (по умолчанию) — Должно быть переведено. • translate="no" — Не должно быть переведено.

Этот атрибут полезен, когда нужно предотвратить перевод специфических текстов, таких как имена собственные, бренды или код, который может быть некорректно переведен. ➡️ @code_ready | #атрибут #html

📱 Как работает Array.prototype,map() в JS? Array.prototype,map() создает новый массив, заполняя его результатами вызова указанной функции для каждого элемента массива, по которому он был вызван. Этот метод особенно полезен, когда нужно применить одну и ту же операцию к каждому элементу массива и получить новый массив с результатами.

Можно использовать map() для преобразования массива чисел в массив их квадратов или для извлечения определенных свойств из объектов.

➡️ @code_ready | #метод #js

Frontend теперь в телеграм! Собрали крупные русскоязычные каналы, где вы найдете всю информацию о последних трендах и лучших практиках: Логово Верстальщика — научит верстать продающие сайты. Node.JS — поможет узнать все тонкости и секреты JavaScript и его фреймворков. Frontender's notes — советы и полезные приемы для каждого разработчика.

📱 Сниппеты для Javascript JavaScript (ES6) Code Snippets — предоставляет коллекцию фрагментов кода, которые ускоряют процесс разработки, позволяя быстро вставлять распространённые конструкции и методы языка. ➡️ @code_ready | #плагин

👩‍💻 Плавная прокрутка Свойство scroll-behavior управляет поведением прокрутки страницы или элемента при переходе по якорным ссылкам и делает её плавной. Параметры свойства: • auto — Стандартное поведение прокрутки. Происходит мгновенно без анимации. • smooth — Плавная прокрутка с анимацией. ➡️ @code_ready | #свойство #css

Ещё 4 года назад в JavaScript существовал только один тип данных — number. А теперь есть ещё и BigInt. Он отвечает за большие числа. Как и зачем происходило становление BigInt и какие операции он поддерживает — в шестом выпуске бесплатного курса по JavaScript от AvitoTech. Рекомендуем посмотреть все эпизоды, база по фронтенду ещё никому не мешала.

📱 Вопрос с собеседования Что такое рекурсия в JS и как ею пользоваться? Ответ: Рекурсия — это техника программирования, при которой функция вызывает саму себя для решения задачи. Рекурсия часто используется для решения задач, которые можно разбить на более простые подзадачи того же типа. • Принцип работы — Рекурсивная функция должна иметь базовый случай (условие завершения), который предотвращает бесконечные вызовы. Каждый рекурсивный вызов решает более простую версию исходной задачи, пока не будет достигнут базовый случай. • Проблемы с производительностью — Рекурсивные функции могут потреблять много памяти из-за хранения большого количества вызовов в стеке. Это может привести к ошибке переполнения стека (stack overflow), если глубина рекурсии слишком велика. ➡️ @code_ready | #собеседование #js