Code Ready | Frontend – Telegram

Code Ready | Frontend

20K subscribers

700 photos

316 videos

17 files

468 links

Авторский канал по Frontend разработке.
Ресурсы, гайды, задачи, шпаргалки.
Информация ежедневно пополняется!

Автор: @energy_it

РКН: https://clck.ru/3NJCKs

Реклама на бирже: https://telega.in/c/code_ready

Download Telegram

About

Blog

Apps

Platform

Code Ready | Frontend

20K subscribers

Code Ready | Frontend

Всем привет 😕

Хотел бы рассказать про контент на этом канале, как вы могли заметить, сейчас контент стал хуже и реже выходить. Почему? Потому что времени вообще нет.

Поэтому мне нужно найти контентщика. Который сможет делать точно такой же контент, как и в этом канале. Знания по html, css и особенно Javascript. Кому интересно отпишите в лс @energy_it.

А также если вам нравится этот канал, и хотите чтобы тут часто выходили качественный посты, поставьте просто реакцию 👍🔥. Спасибо ❤️

Please open Telegram to view this post

VIEW IN TELEGRAM

👍112🔥46👎3😁2

6.13K viewsedited 12:28

Code Ready | Frontend

👩‍💻

Как работает JSON.stringify() в JS?

Функция JSON.stringify: Преобразует JavaScript-объект или значения в строку JSON (текст, форматированный в соответствии с текущим стандартом)

Аргументы:

• Значение (value) — Это основной аргумент, который указывает, что нужно преобразовать.

• Заменитель (replacer) необязательный — Функция или массив для фильтрации свойств.

• Пробелы (space) необязательный — Число или строка для форматирования с отступами.

➡️

@code_ready | #функция #js

Please open Telegram to view this post

VIEW IN TELEGRAM

👍18🔥8👎1

4.81K viewsedited 07:13

Code Ready | Frontend

This media is not supported in your browser

VIEW IN TELEGRAM

Emmet Cheat Sheet — сайт-шпаргалка для Emmet. Здесь собраны все аббревиатуры и формулы, при написании которых раскрываются большие куски кода, а это очень ускоряет разработку сайта.

⛓ Ссылочка: https://docs.emmet.io/cheat-sheet/

➡️

@code_ready | #ресурсы

Please open Telegram to view this post

VIEW IN TELEGRAM

👍23🔥9

4.54K views11:32

Code Ready | Frontend

This media is not supported in your browser

VIEW IN TELEGRAM

👩‍💻 Делаем анимированный счётчик кликов на JS

Сегодня написал простое веб-приложение Click Counter: при каждом нажатии на кнопку счетчик увеличивается, и число кликов плавно анимируется. Интерфейс современный и минималистичный.

Готовый код оставляю ниже, а Css стили для него, кину
в комментарии, т.к его не мало ⬇️

<div class="container">
  <h1>Click Counter</h1>
  <button id="clickButton">Click me!</button>
  <p>Clicks: <span id="clickCount">0</span></p>
</div>

document.addEventListener('DOMContentLoaded', () => {
  const clickButton = document.getElementById('clickButton');
  const clickCount = document.getElementById('clickCount');
  let count = 0;
  clickButton.addEventListener('click', () => {
    count++;
    clickCount.textContent = count;
    clickCount.style.transform = 'scale(1.5)';
    setTimeout(() => {
      clickCount.style.transform = 'scale(1)';
    }, 200);});});

➡️

@code_ready | #обучение #css #js

Please open Telegram to view this post

VIEW IN TELEGRAM

👍37🔥22

4.24K views16:04

Code Ready | Frontend

👩‍💻

Вопрос с собеседования

Что такое замыкание (closure) в JavaScript и как оно работает?

Ответ:

Замыкание — это комбинация функции, которая сохраняет доступ к переменным из своего внешнего окружения, даже после завершения выполнения этой внешней функции.

1️⃣ Запоминание контекста:
Когда функция создается, она запоминает все переменные из своей области видимости. Эти переменные доступны функции даже после завершения работы внешней функции.

2️⃣ Приватные переменные:
Замыкания позволяют создавать приватные переменные, которые нельзя изменить или увидеть снаружи функции. Это делает код более безопасным и организованным.

3️⃣ Постоянные данные:
Замыкания позволяют функциям сохранять состояние между вызовами. Например, счетчики или кэшированные значения.

4️⃣ Асинхронные операции:
Замыкания часто используются в асинхронном коде, чтобы сохранить доступ к переменным из внешнего контекста при выполнении асинхронных задач, таких как таймеры или запросы.

Замыкание используется для:

• Использования в качестве приватных переменных
• Обработки событий и калбеков
• Реализации фабричных функций
• Рекурсии

➡️

@code_ready | #собеседование #js

Please open Telegram to view this post

VIEW IN TELEGRAM

👍19🔥7

4.16K viewsedited 09:13

Code Ready | Frontend

👩‍💻

Настраиваемый перенос строки

Часто ли у вас возникала проблема, что большой объем текста с длинными словами выходит за рамки контейнера?
Вместо того, чтобы задавать переносы вручную, можно воспользоваться свойством hyphens.

Оно позволяет позволяет задавать перенос строки по значению:
• auto — автоматически, в зависимости от языка
• none — без переносов
• manual — настраиваемое вручную

Не забудьте указать значение языка в теге <html lang> для корректной работы свойства.

➡️

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍34🔥10

4.38K views14:03

Code Ready | Frontend

This media is not supported in your browser

VIEW IN TELEGRAM

👨‍💻

Всплывающее уведомление с индикатором
выполнения

Реализовано на HTML, CSS и JS

⛓

Ссылочка: https://codepen.io/code_ready/pen/yLdeqVo

➡️

@code_ready | #кодпен

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥28👍8

4.98K views06:55

Code Ready | Frontend

Кем был создан первый сайт?

Anonymous Quiz

Винт Серф

Тим Бернерс-Ли

Пол Мокапетрис

Роберт Меткалф

👍17🔥6😁2

1.14K voters4.84K views12:07

Code Ready | Frontend

➡️

@code_ready | #мем

Please open Telegram to view this post

VIEW IN TELEGRAM

😁87👍10🔥5

4.49K views16:43

Code Ready | Frontend

👩‍💻

Как работает window,open в JS?

Функция window,open: метод объекта window позволяет открыть ссылки в новом, всплывающем окне или новой вкладке (в зависимости от введённого параметра)

Она имеет три варианта использования, давайте их разберём:

• windows,open() — Позволяет открыть пустое окно без URL. Первая строка на нашем фото.

• window,open("", "", "width=300,height=200") — Если после свойства указать название окна и размеры, то кнопка откроет попап окно с размерами указанными здесь же.

• window,open('https://gmail.com', '_parent') — Позволяет открыть необходимое окно прямо на этой странице (она является родительской).

➡️

@code_ready | #функция #js

Please open Telegram to view this post

VIEW IN TELEGRAM

👍24🔥6👎1

4.56K views09:01

Code Ready | Frontend

👩‍💻

Настраиваемая маска в CSS

Cвойство mask устанавливает изображение, которое используется как слой маски для элемента.

Принимаемые аргументы:

• mask-clip — определяет область, на которую распространяется маска
• mask-size — определяет размер маски
• mask-position — размещает маску относительно элемента
• mask-repeat — указывает, что маска должна повторяться/не повторятся
• mask-composite — представляет собой операцию композиции, используемую для текущего слоя маски с расположенными под ним слоями
• mask-mode — определяет, будет ли ссылка на маску
• mask-origin — задает начало координат маски.

➡️

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍70🔥31

5K views16:15

Code Ready | Frontend

👍5😁3🔥2👎1

4.49K views08:55

Code Ready | Frontend

Что будет в консоли?

Anonymous Quiz

👍18🔥7

1.27K voters4.27K views08:55

Code Ready | Frontend

✅ Вписывание изображения в область

Свойство object-fit позволяет управлять тем, как содержимое вписывается в размеры элемента.

Может принимать значение:
• fill — растягивает изображение на всю область
• contain — встраивает изображение с сохранением соотношений сторон
• cover — встраивает изображение с сохранением соотношений сторон, но обрезает его по размеру области
• none — размер замененного содержимого не изменяется
• scale-down — приведет к меньшему размеру конкретного объекта

➡️

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

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥23👍14👎1

4.53K views13:55

Code Ready | Frontend

👩‍💻 Сохраняйте полезную статью на Habr!

Там показывают полезные материалы для веб-разработчиков, такие как:
•

learn.javascript
• MDN Web Docs
• Фронтенд — это не больно
• Eloquent JavaScript
• Frontend masters

➡️

@code_ready | #статья

Please open Telegram to view this post

VIEW IN TELEGRAM

👍15🔥4👎1

4.91K views06:55

Code Ready | Frontend

This media is not supported in your browser

VIEW IN TELEGRAM

Tabler Icons – набор из более чем 5250 бесплатных высококачественных SVG-иконок, которые вы можете использовать в своих проектах

⛓

Ссылочка: https://tabler.io/icons

➡️

@code_ready | #ресурсы

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥31👍7👎1

4.91K views15:55

Code Ready | Frontend

This media is not supported in your browser

VIEW IN TELEGRAM

👩‍💻

Универсальный помощник

Error Lens — мощный плагин, который помогает улучшить вашу производительность при разработке, выявляя ошибки и предупреждения прямо в коде.

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

➡️

@code_ready | #плагин

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥32👍14👎1

5.1K views06:55

Code Ready | Frontend

This media is not supported in your browser

VIEW IN TELEGRAM

👨‍💻

Encrypted Password

Красивая анимация скрытия пароля с помощью нажатия на глаз в конце формы, следящего за курсором.

⛓ Ссылочка: https://codepen.io/jh3y/pen/wvNpQJe

➡️

@code_ready | #кодпен

Please open Telegram to view this post

VIEW IN TELEGRAM

👍24🔥16👎1

5.43K views15:29

Code Ready | Frontend

This media is not supported in your browser

VIEW IN TELEGRAM

Animate.css — это библиотека CSS-анимаций. Она предоставляет множество готовых эффектов анимации для элементов веб-страниц.

⛓ Ссылочка https://animate.style/

➡️

@code_ready | #ресурсы

Please open Telegram to view this post

VIEW IN TELEGRAM

👍26🔥9

4.82K views06:55

Code Ready | Frontend

👩‍💻

Свойство column-rule. Вёрстка с применением колонок

При его использовании элементы распределяются по колонкам. Обычно этот приём используется для выравнивания текстов, размещаемых в элементах <p>.

Кроме этого, данные аргументы можно прописать не только в одну линию как на картинке, но и следующим образом:

• column-rule-width — Ширину линии между колонками.
• column-rule-style — Стиль линии (solid, dashed, dotted).
• column-rule-color — Устанавливает цвет линии.

➡️

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍27🔥10

4.51K views14:05