Ваш 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

Bookmark App - View Transition

Вёрстка создана на HTML и CSS. Плавное раскрытие карточки реализовано при помощи CSS view-transition.

👉 @seniorFront

​Репутация эксперта ускоряет карьерный рост

Чтобы выйти на уровень сениора, необходимо увеличивать масштабы деятельности, влияние на результат и уровень ответственности. Один из лучших способов этого добиться – стать человеком, к которому по той или иной проблеме обращаются в первую очередь, иными словами, экспертом.

Можно стать экспертом по базам данных, экспертом по Python, экспертом по кэшированию, экспертом по фронтенду, экспертом по Typescript и так далее. Кроме того, можно стать экспертом по определенному компоненту продукта, например экспертом по процессу онбординга, экспертом по платежным порталам или экспертом по ленте домашней страницы.

Если не верите, что это имеет настолько большое значение – посмотрите на критерии, согласно которым повышают в крупнейших технических компаниях. В критериях Google упоминается, что нужно «быть признанным специалистом по какой-либо теме». В требованиях к программистам-сениорам у Square говорится: «…техническая реализация: обладает продвинутыми навыками в одной или нескольких областях». В требованиях к программистам-сениоров у Etsy читаем следующее: «программисты этого уровня обычно выказывают высокую квалификацию в определенной теме, или продвинутые навыки по набору различных тематик».

👉 @seniorFront

Как подготовиться к собеседованию и переехать в другую страну? Что делать, если выгорание близко и работа совсем не радует? Как вкатиться в IT за полгода, если тебе уже за 30?

Ответы на эти вопросы — в канале «Люди и код». Команда канала беседует с опытными и начинающими разработчиками и программистами, находит интересные и неожиданные темы и помогает влюбиться в IT. Про мемы и конкурсы тоже не забываем :) А ещё у нас есть подкаст, послушать его можно по этой ссылке.

Наши любимые материалы:

1. Как грамотно начать свой путь в IT в России в современных условиях?
2. Кто такой DevRel? Чем он занимается и сколько зарабатывает?
3. Какие игры помогут прокачаться в программировании? Подборка.
4. Как транзисторы перевернули наш мир: большой спецпроект
5. Как программисту пройти собеседование. 6 советов.
Подписывайтесь на канал «Люди и код»: @skillbox_media_code

Реклама. ЧОУ ДПО «Образовательные технологии «Скилбокс (Коробка навыков)», ИНН: 9704088880
2VtzquuDJ86

15 Incrementing Counter

Анимировано в CSS. Логика изменения цифр реализована в JS.

👉 @seniorFront

Toast Notification

Уведомления, созданные на HTML, CSS и JS.

👉 @seniorFront

Simple CSS Hover Animation Effects

В этом видео создаётся анимированный логотип при помощи fontAwesome и CSS.

👉 @seniorFront

👉 @seniorFront

Encrypted Password Reveal

Оригинальное поле ввода пароля, анимированное библиотекой GSAP.

👉 @seniorFront