How to Make Responsive Portfolio Website

В этом видео с нуля создается сайт-портфолио на HTML, CSS и JS.

👉 @seniorFront

CSS Responsive Scroll-Driven Text Reveals

Реализовано на чистом CSS, а также добавлена дополнительная реализация на JS, если ваш браузер не поддерживает CSS свойство animation-timeline со значением scroll().

👉 @seniorFront

Square Every Digit

Необходимо возвести в квадрат каждую цифру числа и объединить их.
Например, если пропустить 9119 через функцию, то получится 811181, так как 9^2 равно 81, а 1^2 равно 1.
Примечание: функция принимает целое число и возвращает целое число.

👉 @seniorFront

Real particle blob

Создано и анимировано на canvas при помощи библиотеки THREE.js

👉 @seniorFront

Что такое SSL и TLS?

SSL (secure sockets layer — уровень защищённых cокетов) представляет собой криптографический протокол для безопасной связи. С версии 3.0 SSL заменили на TLS (transport layer security — безопасность транспортного уровня), но название предыдущей версии прижилось, поэтому сегодня под SSL чаще всего подразумевают TLS.

Цель протокола — обеспечить защищенную передачу данных. При этом для аутентификации используются асимметричные алгоритмы шифрования (пара открытый — закрытый ключ), а для сохранения конфиденциальности — симметричные (секретный ключ). Первый тип шифрования более ресурсоемкий, поэтому его комбинация с симметричным алгоритмом помогает сохранить высокую скорость обработки данных.

👉 @seniorFront

Gradient Borders w/ Translucent Backdrops using container queries

Создано на HTML и CSS. Панель настроек реализована библиотекой dat.gui

👉 @seniorFront

Fishbowl - Save the fish

Свёрстано и анимировано на HTML и SCSS. В JS прописана логика уменьшения и увеличения уровня воды.

👉 @seniorFront

Ваш Level Up в мире Frontend-разработки

WEBIK — канал для каждого, кто стремится проверить и углубить свои знания в вебе.

Там публикуют:
✓ Тесты на понимание кода с объяснениями
✓ Разборы задач и вопросов с собеседований
✓ Авторские обучающие статьи простым языком
✓ Макеты и эффекты для ваших пет-проектов
✓ Крутые рецепты кода
✓ Очень смешные мемасики

Вступай в WEBIK и становись крутым web разрабом!

​«Вредность» Auto-Suggest от Github Copilot

Разработчик Рашад Филизер объяснил, почему, по его мнению, Auto-Suggest от Github Copilot может принести больше вреда, чем пользы, особенно тем, кто только учится программировать.

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

По словам разработчика, Copilot отлично помогает в изучении нового синтаксиса, сокращая время переключения контекста между браузером, Google и редактором. Однако автопредложения вредят непосредственно обучению. Сам Филизер попробовал изучить Rust с помощью Copilot и автоподсказок. Спустя несколько дней он попробовал написать синтаксис сам, без Интернета, но не смог справиться с задачей.

Разработчик считает, что автопредложения Copilot полезны только в том случае, если синтаксис нужно уточнить, изначально прописав его самостоятельно.

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

В качестве решения Филиз предлагает отключить автопредложения. Для этого нужно выполнить следующие действия в Cursor или VSCode:

добавить следующее в свой файл settings.json:

 {
     "github.copilot.editor.enableAutoCompletions": false,
 }

добавить следующее в свой keybindings.json:

 {
     "key": "cmd+enter",
     "command": "editor.action.inlineSuggest.trigger",
     "when": "config.github.copilot.inlineSuggest.enable && editorTextFocus && !editorHasSelection && !inlineSuggestionsVisible"
 }

После этого автопредложения можно будет запускать в любое время, нажав ⌘ + Enter.

👉 @seniorFront

Iridescent 2024

Это SVG картинка, анимируемая библиотекой gsap.

👉 @seniorFront

Coffee | Custom Checkbox Design

В этом видео создается оригинальный переключатель на HTML и CSS.

👉 @seniorFront

👉 @seniorFront

Geist Sans Font Breathing

Анимация создана в CSS, а в JS каждой букве задается CSS свойство animationDelay в зависимости от её позиции в строке.

👉 @seniorFront

Animated Vertical Navigation Menu

Стилизовано в CSS. В JS реализована логика смены CSS классов при наведении.

👉 @seniorFront

Creative CSS Text Animation Effects

В этом видео создается анимированный текст на чистом CSS.

👉 @seniorFront