Senior Frontend - javascript, html, css
25.7K subscribers
1.28K photos
2.25K videos
705 links
Senior Front - канал для frontend программистов, практические задачки, проверки знаний, интересные статьи

Админ, сотрудничество, реклама:@seniorFrontPromo, @maria_seniorfront
Канал в реестре РКН https://rknn.link/bsU
Download Telegram
Что такое 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
👍53😁1😐1
This media is not supported in your browser
VIEW IN TELEGRAM
Bookmark App - View Transition

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

👉 @seniorFront
🔥14👍3👏2
Репутация эксперта ускоряет карьерный рост

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

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

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

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

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

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

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

Реклама. ЧОУ ДПО «Образовательные технологии «Скилбокс (Коробка навыков)», ИНН: 9704088880
2VtzquuDJ86
👍3🤔2
This media is not supported in your browser
VIEW IN TELEGRAM
15 Incrementing Counter

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

👉 @seniorFront
👍3
This media is not supported in your browser
VIEW IN TELEGRAM
Toast Notification

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

👉 @seniorFront
👍6
Media is too big
VIEW IN TELEGRAM
Simple CSS Hover Animation Effects

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

👉 @seniorFront
🔥9👍41👏1
This media is not supported in your browser
VIEW IN TELEGRAM
Encrypted Password Reveal

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

👉 @seniorFront
18🔥3👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Trophy Animation

Это svg картинка, анимируемая в CSS.

👉 @seniorFront
👍9👏2
Какой метод проверяет, содержит ли объект указанное свойство и не учитывает свойства в прототипе объекта?
Anonymous Quiz
10%
includesProperty
21%
hasProperty
7%
isProperty
62%
hasOwnProperty
👍114
Media is too big
VIEW IN TELEGRAM
CSS Image Gallery

В этом видео создается оригинальная галерея картинок при помощи CSS Grid.

👉 @seniorFront
👍11
This media is not supported in your browser
VIEW IN TELEGRAM
Wooden Toggles

Оригинальные переключатели на HTML и CSS.

👉 @seniorFront
👏75🔥2👍1
Descending Order

Создайте функцию, которая принимает число и возвращает цифры этого числа в убывающем порядке.

Пример:
Input: 42145 Output: 54421
Input: 145263 Output: 654321
Input: 123456789 Output: 987654321

👉 @seniorFront
👍2🤔21
This media is not supported in your browser
VIEW IN TELEGRAM
Smooth Liquid Background Effect

"Кляксы" созданы в HTML, а в JS создана логика их передвижения и анимации.

👉 @seniorFront
👍9
This media is not supported in your browser
VIEW IN TELEGRAM
‼️Всем кодерам посвящается‼️

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

🪩Расставь приоритеты, добавь лёгкости в свою работу и становись лучше с @code_ready
Please open Telegram to view this post
VIEW IN TELEGRAM
Почему TypeScript считает compatible тип функции с меньшим количеством аргументов?

Ковариантность в TypeScript:
В контексте TypeScript, если функция ожидает аргументы определенного типа, то она также считается совместимой с функцией, требующей более узкий объем аргументов или более конкретный тип. То есть, функция, принимающая меньшее количество аргументов, считается совместимой с функцией, ожидающей большее количество аргументов, если они имеют подходящие типы. Это согласуется с принципом поддержки того, чтобы "меньший" тип мог быть использован в контексте, где ожидается "больший" тип.

Пример:
 type User = { name: string; };
type Admin = { name: string; adminRights: boolean; };

function logUser(user: User) {
console.log(user.name);
}

const admin: Admin = { name: 'Alice', adminRights: true };

logUser(admin); // TypeScript разрешит передачу admin в logUser


Преимущества:
1. Это предоставляет бóльшую гибкость в работе с функциями.
2. При правильном использовании позволяет избежать избыточной информации в определении функций.

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

👉 @seniorFront
🔥103🤔3
This media is not supported in your browser
VIEW IN TELEGRAM
Day & Night Toggle

Внутри переключателя SVG картинка, стилизованная в CSS. Логика изменения фона реализована в JS.

👉 @seniorFront
16👏3🔥2
Экстремальные практики программирования

Экстремальное программирование — это одна из гибких методологий разработки. Понятие относится скорее к менеджменту, построению процессов, но оно тесно переплетено с непосредственно разработкой: техническими возможностями и конкретными технологиями, которые помогают соблюдать практики этой методологии.

Рассмотрим некоторые практики:

Разработка через тестирование
Эта практика подразумевает, что разработчики сначала пишут тесты, а потом под эти тесты пишется программное обеспечение. Наличие автотестов, которые запускают после каждого изменения кода, — это критически важный момент. Без этого уже тяжело представить взаимодействие с большой кодовой базой.

«Игра в планирование»
Сложно запланировать большую систему на несколько месяцев вперед. Как правило, когда команда начинает работать, план быстро начинает расходиться с реальностью. Или все продолжают придерживаться плана, но едут не туда и получают не такой качественный результат.
Здесь же идея в том, чтобы планировать более «несерьёзно», меньшими итерациями, — не бояться что-то зафейлить, быстрее адаптироваться к меняющимся условиям. Команда обсуждает, что они могут сделать в рамках спринта, условно пары недель, это позволяет им быть более гибкими («agile»).

«Заказчик всегда рядом»
Классическая модель работы выглядит так: заказчик ставит задачу, бизнес-аналитики собирают требования, исполнители реализуют проект и приносят результат на утверждение. Часто это не самая удачная стратегия.
Принцип «заказчик всегда рядом» подразумевает, что команда контактирует с заказчиком супермаленькими интервалами, показывая ему процесс разработки в мелочах. Это помогает вовремя всё подправить и избежать ситуации, когда при сдаче проекта оказывается, что требования поняли некорректно и принесли не тот результат.

Парное программирование
Вместо того, чтобы разработчик работал в одиночку, а потом показывал результат коллегам или продакт-оунеру, процесс построен по аналогии с гонками: когда есть драйвер и штурман.

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

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

👉 @seniorFront
5👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Star Trails with options

Звёзды генерируются и анимируются на чистом JS.

👉 @seniorFront
👏5
This media is not supported in your browser
VIEW IN TELEGRAM
Cube Effect Slider

Куб сделан при помощи библиотеки Swiper. Частицы на фоне генерируются библиотекой tsparticles.

👉 @seniorFront
👍151