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

Animated Login Form

Вёрстка формы входа на чистом CSS.

👉 @seniorFront

Maximum and minimum

Напишите две функции max и min, которые возвращают максимальное и минимальное значение переданного им аргумента соответственно.

Примеры:

 max(1,2,3,4)  //возвращает 4
 max(1,2,3,['4'])  // возвращает 4; обратите внимание, что он вернул 4, а не «4»
 max(1,2,[3,4])  //возвращает 4
 max(1,2,[3,[4]])  //возвращает 4
 max(1,2,[3,['4r']])  //возвращает NaN
 max([[],[-4]])  // возвращает -4
 max()или max([])  // возвращает 0

Функции будут принимать любое количество аргументов.
Массивы чисел могут быть любой глубины.
Вы не можете использовать Math.max, Math.min, и require.
Если один из аргументов не может быть оценен как число, вернуть NaN.

👉 @seniorFront

Click Spark

Реализовано на чистом JS без использования библиотек.

👉 @seniorFront

​Что такое structural typing? Какие есть альтернативы? Какие преимущества и недостатки у этого подхода?

Structural typing - это метод типизации, который определяет совместимость типов на основе их структуры или формы. В рамках структурной типизации, два типа считаются совместимыми, если их структура соответствует.

Пример:
В языке, использующем структурную типизацию, может быть возможно что-то подобное:

 // Объект с полями name и age
 type Person = {
   name: string;
   age: number;
 }

 // Функция, ожидающая объект с полями name и age
 function greet(person: Person) {
   console.log(Hello, ${person.name}! You are ${person.age} years old);
 }

 // Объект, у которого есть поля name и age
 const user = { name: 'Alice', age: 30 };

 // Вызов функции с объектом, хотя у него нет типа Person
 greet(user);

Преимущества:
1. Гибкость: Позволяет создавать объекты и интерфейсы, динамически соответствующие общей структуре, без явного определения конкретного типа. Например, два объекта с одинаковой структурой будут считаться совместимыми, независимо от того, имеют они одинаковый тип или нет.
2. Легковесность: Может уменьшить необходимость в явных типах, что способствует гибкости и легкости в обслуживании.

Недостатки:
1. Неявность: Может немного увеличить сложность обнаружения ошибок, так как не всегда очевидно, какие именно поля или методы имеют структуры различных объектов.
2. Сложность в больших проектах: В больших и сложных проектах может быть сложно соблюдать структурную целостность объектов, что может привести к потенциальным ошибкам.

Альтернативы:
1. Номинальная (nominal) типизация: Определяет совместимость типов на основе их явного указания, т.е. имен типов.
2. Duck typing: Это философия в программировании, которая говорит о том, что объекты могут быть считаться экземплярами определенного типа, если они имеют определенные методы и свойства.

👉 @seniorFront