Frontend Interview - собеседования по Javascript / Html / Css

👉 @frontendInterview

​Как работает сборка мусора в JS? Управление памятью в JavaScript выполняется автоматически и незаметно. Мы создаём примитивы, объекты, функции… Всё это занимает память. Но что происходит, когда что-то больше не нужно? Как движок JavaScript обнаруживает, что пора очищать память? Основной концепцией управления памятью в JavaScript является принцип достижимости. Если упростить, то «достижимые» значения – это те, которые доступны или используются. Они гарантированно находятся в памяти. 1. Существует базовое множество достижимых значений, которые не могут быть удалены. Например: - Выполняемая в данный момент функция, её локальные переменные и параметры. - Другие функции в текущей цепочке вложенных вызовов, их локальные переменные и параметры. - Глобальные переменные. - (некоторые другие внутренние значения) Эти значения мы будем называть корнями. 2. Любое другое значение считается достижимым, если оно доступно из корня по ссылке или по цепочке ссылок. Например, если в глобальной переменной есть объект, и он имеет свойство, в котором хранится ссылка на другой объект, то этот объект считается достижимым. И те, на которые он ссылается, тоже достижимы. Далее вы познакомитесь с подробными примерами на эту тему. В движке JavaScript есть фоновый процесс, который называется сборщиком мусора. Он отслеживает все объекты и удаляет те, которые стали недоступными. 👉 @frontendInterview

Capitals first! Создайте функцию, которая принимает строку и перемещает все слова, начинающиеся с заглавной буквы в начало строки. Пример: capitalsFirst("hey You, Sort me Already!") // "You, Sort Already! hey me" 👉 @frontendInterview

React 18 Design Patterns and Best Practices: Design, build, and deploy production-ready web applications with ease and create powerful user experiences, 4th Edition (2023) Книга состоит из трех частей: в первой вы узнаете об основах паттернов React, во второй погрузитесь во внутреннюю работу React, а в третьей сосредоточитесь на практическом применении. Все примеры кода обновлены в соответствии с последней версией React, а также добавлены новые возможности React 18 и Node 18, архитектура MonoRepo и обширная глава по TypeScript. 👉 @frontendInterview

​Почему стоит изучать ФП на JavaScript? Если вы опытный разработчик, уже знакомый с JavaScript или с каким-то чисто функциональным языком, то вы можете подумать, что JavaScript это весьма забавный способ открыть для себя мир ФП. В оригинальной статье, автор показывает, почему JS подходит для изучения ФП. JavaScript имеет в своем составе важные особенности, необходимые для ФП: 1. Функции первого класса. Это возможность использовать функции как данные, т.е. передавать функции в качестве входных параметров, возвращать функции и присваивать функции переменным и свойствам объектов. 2. Анонимные функции и лямбда-синтаксис. Например, запись вида x => x * 2 является валидным выражением в JavaScript. Такой синтаксис значительно упрощает работу с функциями высшего порядка. 3. Замыкания. Замыкание - это комбинация функции и ее лексического окружения. Замыкания создаются в момент создания функции. Когда функция создается внутри другой функции, то она имеет доступ к переменным, объявленным во внешней функции, даже после того, как будет осуществлен возврат из этой внешней функции. Список вещей, которые присущи некоторым функциональным языкам и которых нет в JavaScript: 1. Чистота 2. Иммутабельность 3. Рекурсия Чистота: В JavaScript "чистота" может быть достигнута только по соглашению (т.е. все участники должны договориться использовать только чистые функции). К сожалению, в JavaScript слишком просто сбиться с пути случайно начав создавать и использовать не "чистые" функции. Иммутабельность: В ФП языках иммутабельность зачастую дана по умолчанию. В JavaScript отсутствуют эффективные структуры данных, используемые в большинстве ФП языков, но существуют библиотеки, которые могут помочь в этом вопросе, например Immutable.js и Mori. Рекурсия: Технически, JavaScript поддерживает рекурсию, однако большинство функциональных языков имеют такую особенность как "оптимизация хвостовой рекурсии". Такая особенность позволяет рекурсивным функциям переиспользовать фреймы стека для последующих рекурсивных вызовов (фактически рекурсия преобразуется в плоскую итерацию). 👉 @frontendInterview

👉 @frontendInterview

HTML теперь в телеграм! HTML — самый популярный язык в мире. Именно на нем написаны все сайты. Начать свой путь в программировании проще всего с изучения HTML. Тем более теперь в телеграмме появился официальный русскоязычный канал. Это первоисточник всего, что появляется в платных курсах и остальных ресурсах. Стоит подписаться!

👉 @frontendInterview

​Расскажите про паттерн "адаптер". Это структурный паттерн проектирования, который позволяет объектам с несовместимыми интерфейсами работать вместе. Проблема Представьте, что вы делаете приложение для торговли на бирже. Ваше приложение скачивает биржевые котировки из нескольких источников в XML, а затем рисует красивые графики. В какой-то момент вы решаете улучшить приложение, применив стороннюю библиотеку аналитики. Но вот беда — библиотека поддерживает только формат данных JSON, несовместимый с вашим приложением. Решение Вы можете создать адаптер. Это объект-переводчик, который трансформирует интерфейс или данные одного объекта в такой вид, чтобы он стал понятен другому объекту. При этом адаптер оборачивает один из объектов, так что другой объект даже не знает о наличии первого. Например, вы можете обернуть объект, работающий в метрах, адаптером, который бы конвертировал данные в футы. Адаптеры могут не только переводить данные из одного формата в другой, но и помогать объектам с разными интерфейсами работать сообща. Это работает так: 1. Адаптер имеет интерфейс, который совместим с одним из объектов. 2. Поэтому этот объект может свободно вызывать методы адаптера. 3. Адаптер получает эти вызовы и перенаправляет их второму объекту, но уже в том формате и последовательности, которые понятны второму объекту. 👉 @frontendInterview

👉 @frontendInterview

Идиотизм во Фронтенде – сутками искать макеты со шрифтами В интернете куча полезных ресурсов. А в Telegram - это канал Сайтодел Зашли – подписались – сразу применили в своих проектах. Пользуйтесь 👇

​Почему не стоит использовать краткую запись свойств CSS? Существует небольшая, но на удивление важная проблема, которую я часто замечал в коде других людей — это использование краткой записи свойств CSS. Когда мы пишем что-то вроде этого:

 .btn {
   background: red;
 }

Мы всего лишь хотим, чтобы у нашей кнопки был красный фоновый цвет. Но на самом деле мы задаем целый набор правил: .btn { background-image: initial; background-position-x: initial; background-position-y: initial; background-size: initial; background-repeat-x: initial; background-repeat-y: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: red; } За счет простого использования краткой записи, мы безоговорочно решили, что не хотим использовать фоновое изображение, заодно указав для него стартовую позицию с левого верхнего края, повторение по осям x и y и прокрутку вместе с элементом и т.д. Почти все проблемы, баги и регрессии в CSS происходят из-за того, что мы делаем слишком многое слишком рано, а через некоторое время сталкиваемся с последствиями этого. Из этого факта следует один простой вывод: в CSS вам нужно делать лишь то, что нужно и ничего более. 👉 @frontendInterview

Джентельменский набор трушного фронтендера Опытные Frontend-разработчики собрали самые востребованные и бесплатные каналы, без которых не обойдется ни один настоящий фронтендер. Макеты для верстки — самый крупный канал с макетами для верстки. Первоисточник всех макетов в Telegram. Полезная вËрстка — канал с готовыми решениями повседневных задач: слайдеры, анимация, навигация и т.д. JavaScript заметки — образовательный канал с ежедневными практическими заметками по языку. codepen.js — готовые коды: реализованные на css и js анимации, скрипты и интерфейсы. Оживи статичные макеты Figma Start — каждый день выпускаем крутые макеты для верстки. Выбери самый интересный и удиви рекрутеров! Развивайся с нами, ведь так проще!

Two Sum Создайте функцию, которая принимает массив чисел и целевое число. Найдите в массиве два числа, которые в сумме дадут целевое число. Пример: twoSum([1, 2, 3], 4) // returns [0, 2] or [2, 0] 👉 @frontendInterview