Вёрстка сайтов | HTML, CSS, JS

🔴AI кодинг интервью с разработчиком из международного FinTech в четверг в 19:00

ДА! Вайбкодинг реально начали проверять на интервью, поэтому мы нашли собеседующего, который проводит AI-секцию в международном финтехе, чтобы вы увидели что на ней спрашивают и как к ней подготовиться.

Как это будет:
📂 Александр Дмитриев, разработчик из известного международного финтеха, ex-VK, ex-Ozon проведет вайбкодинг секцию разработчику-добровольцу;
📂 Александр будет задавать реальные вопросы с секций, которые проводил сам и комментировать ответы;
📂 В конце можно будет задать любой вопрос Александру.

Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для разработчиков, которые хотят сменить работу, повысить свой грейд, ЗП и прокачать скиллы.

Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot

Реклама.
О рекламодателе.

CSS навигация

Посмотреть на codepen 👨‍💻

#практика

Функции в TypeScript: параметры, void, never и overloads

Читать 👨‍💻

#ts | #теория

Подборка лучших постов за прошлую неделю

Лучшие статьи @free_html_lessons:
1. Полезные расширения Chrome
для верстки
2. Как типизировать API во frontend
3. Задача: npm install

Лучшие фронтенд вакансии @job_webdev:
1. vue разработчик для веб-сайтов
2. HTML-верстальщик
3. frontend developer финтех

Лучшие дизайн вакансии @job_webdesign:
1. ux/ui дизайнер мобильного приложения
2. Продуктовый UX/UI дизайнер
3. продуктовый дизайнер подписки

#лучшеезанеделю

Задача: npm install

Вася устроился фронтенд-разработчиком в крупную IT-компанию. В свой первый рабочий день он клонировал себе git-репозиторий проекта и сразу же стал смотреть package.json. Будучи любителем всего нового, Вася сразу увидел, что некоторые пакеты в dependencies устарели. Недолго думая, он сразу поменял в файле их версии на самые последние и выполнил npm install. Какой ужас! Консоль заполнили строки с описанием ошибок, ведь оказалось, что многие пакеты были связаны между собой через peerDependencies, а их свежие версии несовместимы.

Помогите Васе обновить зависимости до самых свежих совместимых версий.

Подробнее по ссылке 👨‍💻

#домашка

Макет для тренировки (miramoney)

Перейти к макету 🧑‍💻

#макет@free_html_lessons

15 micro-interactions (полезные паттерны)

Посмотреть на codepen 👨‍💻

#практика

Как типизировать API во frontend

Читать 👨‍💻

#ts | #теория

Generics: главная суперсила TypeScript

Читать 👨‍💻

#ts | #теория

Полезные расширения Chrome
для верстки

1. ColorZilla
Расширение позволяет взять любой цвет с сайта (пипетка)

2. PerfectPixel
Расширение позволяет сверить верстку с макетом на соответствие.

3. WindowResizer
Простой плагин, позволяющий легко
изменять размеры браузера одной кнопкой

4. GoFullPage
Полезное расширение для тех, кто хочет
сделать полноценный скриншот своего
сайта.

#полезности

Подборка лучших постов за прошлую неделю

Лучшие статьи @free_html_lessons:
1. Подгрузка контента при прокрутке
2. Метод верстки mobile-first
3. Зарезервированные ключевые слова в JavaScript

Лучшие фронтенд вакансии @job_webdev:
1. HTML верстальщик
2. Фронт-разработчик и верстальщик
3. angular разработчик

Лучшие дизайн вакансии @job_webdesign:
1. Веб-дизайнер
2. Web-дизайнер
3. Графический дизайнер

#лучшеезанеделю

Задача: Какой будет вывод в консоль и в каком порядке?

const promise = new Promise((resolve) => {
  console.log("2");

  setTimeout(() => {
    console.log("3");
    resolve();
  }, 1000);
});

setInterval(() => {
  console.log("4");
}, 500);

async function main() {
  console.log("5");

  await promise;

  console.log("6");
}

main();

console.log("7");

Вопрос:
Что окажется в консоли за первые 2 секунды?

Попробуйте не запускать код, а сначала разобраться самостоятельно.

#домашка

Макет для тренировки (xbox)

Перейти к макету 🧑‍💻

#практика | #макет

Зарезервированные ключевые слова в JavaScript

В JavaScript есть слова, которые принадлежат самому языку. Синтаксический анализатор использует их для сборки конструкций, поэтому объявить переменную с таким именем не получится — JS сразу выбросит SyntaxError.

Все ключевые слова можно условно разделить на три категории:

1. Действующие ключевые слова
Слова, которые прямо сейчас задают логику и структуры данных:
break, case, catch, class, const, continue, debugger, default, delete, do, else, export, extends, false, finally, for, function, if, import, in, instanceof, new, null, return, super, switch, this, throw, true, try, typeof, var, void, while, with.

2. Будущие зарезервированные слова
Они припасены для возможных следующих версий ECMAScript. Использовать их в качестве идентификаторов (имен переменных или функций) нельзя уже сейчас:

* В обычном режиме: enum.
* В Строгом режиме (`"use strict"`): implements, interface, let, package, private, protected, public, static, yield.

3. Contextual Keywords (Контекстные слова)
Работают как ключевые только в определённом контексте, но вне его могут быть именами переменных:

* async / await (внутри асинхронных функций)
* get / set (в описании геттеров и сеттеров)
* of (в цикле `for...of`)
* target (в `new.target`)

Тонкие моменты и подвохи
* Ключи объектов разрешены: С выходом ES6 ключевые слова можно свободно использовать в качестве имен свойств объектов:

const config = {
  class: 'btn-primary', // Легально
  for: 'user-input',    // Легально
  return: true          // Легально
};
console.log(config.class);

* Разница между `undefined` и `null`: null — это зарезервированное ключевое слово, его нельзя переопределить. А вот undefined — это глобальное свойство, а не слово. В старых версиях JS undefined можно было случайно переписать (`var undefined = 10;`), хотя в строгом режиме это, к счастью, уже запрещено.

#js

Метод верстки mobile-first

Читать 👨‍💻

#полезнаястатья

Подгрузка контента при прокрутке

Читать статью 👨‍💻

#js | #полезности

Тег <mark>

Читать 👨‍💻

#html | #теория

Подборка лучших постов за прошлую неделю

Лучшие статьи @free_html_lessons:
1. Игра судоку, реализованная на html и css
2. TypeScript 7
3. Атрибут step

Лучшие фронтенд вакансии @job_webdev:
1. Дизайнер-верстальщик
2. frontend разработчик для HR-процессов
3. frontend разработчик торговой сети

Лучшие дизайн вакансии @job_webdesign:
1. Веб-дизайнер
2. ux/ui дизайнер для интернет-магазинов электроники
3. Web-дизайнер

#лучшеезанеделю