Senior JavaScript: Общие вопросы
1. Расскажите о функциональном программировании.
2. Что такое TDD (Test Driven Development) / BDD (Behavior Driven Development)?
3. Расскажите подробно о работе HTTPS.
4. Какой стек технологий можно выбрать для реализации клона какого-нибудь известного проекта и почему?
5. Есть проект на старых технологиях, в него необходимо вносить изменения. Как это лучше всего сделать?
6. (Если у кандидата есть опыт работы с несколькими фреймворками): какой фреймворк будете использовать для следующего проекта? Какие факторы будут влиять на выбор?
7. Что такое V8 Engine?
1. Расскажите о функциональном программировании.
2. Что такое TDD (Test Driven Development) / BDD (Behavior Driven Development)?
3. Расскажите подробно о работе HTTPS.
4. Какой стек технологий можно выбрать для реализации клона какого-нибудь известного проекта и почему?
5. Есть проект на старых технологиях, в него необходимо вносить изменения. Как это лучше всего сделать?
6. (Если у кандидата есть опыт работы с несколькими фреймворками): какой фреймворк будете использовать для следующего проекта? Какие факторы будут влиять на выбор?
7. Что такое V8 Engine?
Какое из следующего утверждения является допустимым для использования модуля fs в node.js приложении?
Anonymous Quiz
64%
var fs = require("fs");
15%
var fs = import("fs");
1%
package fs;
20%
import fs;
Типовые задачи React-разработчиков
Возможности React:
- Доступность для разработчиков с разным уровнем опыта и навыками.
- Создание абстракций.
- Совместимость с другими кодами, написанными не на React.
- Возможность найти источник ошибки в кодовой базе.
- Визуализация объектной модели HTML-документа (DOM)
- Использование React для создания мобильных приложений.
Что входит в задачи React-разработчика:
- Знание функций языка программирования JavaScript.
- Понимание компонентного подхода.
- Использование React и его API.
- Знание основных паттернов.
- Владение навыками вёрстки.
- Работа с DOM.
- Понимание основ функционального программирования.
- Владение графическими редакторами.
- Навыки тестирования кода.
Возможности React:
- Доступность для разработчиков с разным уровнем опыта и навыками.
- Создание абстракций.
- Совместимость с другими кодами, написанными не на React.
- Возможность найти источник ошибки в кодовой базе.
- Визуализация объектной модели HTML-документа (DOM)
- Использование React для создания мобильных приложений.
Что входит в задачи React-разработчика:
- Знание функций языка программирования JavaScript.
- Понимание компонентного подхода.
- Использование React и его API.
- Знание основных паттернов.
- Владение навыками вёрстки.
- Работа с DOM.
- Понимание основ функционального программирования.
- Владение графическими редакторами.
- Навыки тестирования кода.
Какое из перечисленных выражений используется, чтобы определить, включены ли в браузере cookies?
Anonymous Quiz
16%
navigation.cookie
24%
application.cookieEnabled
26%
navigator.cookieEnabled
13%
application.cookie
21%
Ни одно из перечисленных
Взлет и падение Bootstrap
В последнее время я занялся созданием небольших учебных пособий для разработчиков. Цель состоит в том, чтобы показать младшим разработчикам, как размышляют их старшие коллеги в процессе работы с кодом. Например, как старшие разработчики изучают документацию или новые фреймворки, с которыми они еще не знакомы, и как можно обнаружить, что что-то идет не так.
Примеры проектов я искал на Frontend Mentors, а код писал с использованием различных технологий. Например, один из первых проектов представлял собой интеграцию компонента карточки товара. Я решил написать решение с помощью чистого CSS, с использованием Tailwind и Bootstrap.
Как Tailwind стал ведущим CSS-фреймворком: https://habr.com/ru/company/ispmanager/blog/686080/
В последнее время я занялся созданием небольших учебных пособий для разработчиков. Цель состоит в том, чтобы показать младшим разработчикам, как размышляют их старшие коллеги в процессе работы с кодом. Например, как старшие разработчики изучают документацию или новые фреймворки, с которыми они еще не знакомы, и как можно обнаружить, что что-то идет не так.
Примеры проектов я искал на Frontend Mentors, а код писал с использованием различных технологий. Например, один из первых проектов представлял собой интеграцию компонента карточки товара. Я решил написать решение с помощью чистого CSS, с использованием Tailwind и Bootstrap.
Как Tailwind стал ведущим CSS-фреймворком: https://habr.com/ru/company/ispmanager/blog/686080/
Как отказаться от jQuery в современном фронтенде
Зачем jQuery был нужен раньше?
С jQuery стало гораздо проще управлять DOM, создавать анимации и делать AJAX-запросы. У веб-разработчиков появилась возможность создавать более современные, динамические сайты, которые выделялись среди остальных. Самое главное, все функции JavaScript, проверенные в одном браузере с помощью jQuery, как правило, работали и в других браузерах.
Веб-стандарты в последующие годы:
- Шаблон
- Переключение CSS-классов теперь можно осуществить с помощью Element.classList;
- CSS теперь поддерживает создание анимации в таблицах стилей, а не в JavaScript;
- Интерфейс
- Шаблон делегирования событий легко инкапсулировать с помощью легковесной библиотеки;
- С эволюцией JavaScript часть синтаксического сахара jQuery устарела.
В конечном счёте отказ от jQuery означает, что мы можем больше полагаться на веб-стандарты, использовать веб-документацию MDN в качестве официальной документации
Зачем jQuery был нужен раньше?
С jQuery стало гораздо проще управлять DOM, создавать анимации и делать AJAX-запросы. У веб-разработчиков появилась возможность создавать более современные, динамические сайты, которые выделялись среди остальных. Самое главное, все функции JavaScript, проверенные в одном браузере с помощью jQuery, как правило, работали и в других браузерах.
Веб-стандарты в последующие годы:
- Шаблон
$(selector) можно легко заменить на querySelectorAll();- Переключение CSS-классов теперь можно осуществить с помощью Element.classList;
- CSS теперь поддерживает создание анимации в таблицах стилей, а не в JavaScript;
$.ajax-запросы можно выполнять с помощью Fetch Standard;- Интерфейс
addEventListener() достаточно стабилен для кроссплатформенного использования;- Шаблон делегирования событий легко инкапсулировать с помощью легковесной библиотеки;
- С эволюцией JavaScript часть синтаксического сахара jQuery устарела.
В конечном счёте отказ от jQuery означает, что мы можем больше полагаться на веб-стандарты, использовать веб-документацию MDN в качестве официальной документации
Что выведет код?
const output = `Java${[] && 'Script'} очень ${'сложный' && `простой`} язык`
const output = `Java${[] && 'Script'} очень ${'сложный' && `простой`} язык`
Anonymous Quiz
19%
Java очень сложный язык
19%
Java очень простой язык
24%
JavaScript очень сложный язык
38%
JavaScript очень простой язык
Как создать объект без прототипа (prototype)?
Anonymous Quiz
32%
const obj = {}
16%
const obj = Object.create()
33%
const obj = Object.create(null)
19%
const obj = new Object
Как можно уведомить пользователя, что JavaScript отключен в его браузере?
Anonymous Quiz
6%
Зависит от используемого пользователем браузера
13%
Нет такакого способа, чтобы обнаружить, что JavaScript отключен
15%
<script type="text/javascript"> document.write("У Вас отключён JavaScript!"); </script>
66%
<noscript><span>У Вас отключён JavaScript...</span></noscript>
Fresh - самый быстрый SSR. Deno в действии. Быстрый курс
Фреймворк Fresh, который позволяет реализовывать Islands Architecture в рамках React.
Фреймворк написан на платформе Deno и можете удивиться скорости его работы
https://www.youtube.com/watch?v=gCkCSyhjLTs&t=1138s
Фреймворк Fresh, который позволяет реализовывать Islands Architecture в рамках React.
Фреймворк написан на платформе Deno и можете удивиться скорости его работы
https://www.youtube.com/watch?v=gCkCSyhjLTs&t=1138s
Как узнать, использовался ли метод event.preventDefault() в элементе?
Anonymous Quiz
22%
мы можем использовать свойство event.defaultPrevented в объекте события
44%
мы можем использовать метод event.isPrevented() в объекте события
34%
этого узнать нельзя
8 редких HTML тегов, которые почти НИКТО не знает!
HTML новые теги: datalist, sub, sup, details, summary, dialog, figure, picture
Клик, чтоб посмотреть
HTML новые теги: datalist, sub, sup, details, summary, dialog, figure, picture
Клик, чтоб посмотреть
Что такое Web3 и почему это важно?
Web3 — это концепция нового, лучшего Интернета. Web3 основан на блокчейнах, криптовалютах и NFT, чтобы отдать власть обратно пользователям в форме владения.
Сеть Web3 децентрализована: вместо больших сегментов Интернета, контролируемых и управляемых централизованными организациями, владение будет распределено между создателями и пользователями.
Web3 не регулируется: все принимают участие на равных правах, и никто не исключается.
Платежи встроены в Web3: для оплаты и переводов здесь используется криптовалюта, нет необходимости в устаревшей инфраструктуре банков и платежных систем.
Web3 не требует доверия: все работает через экономические механизмы и не требует доверять какой-либо третьей стороне.
Ключевые функции Web3 не изолированы и не вмещаются в четкие категории, но для простоты мы попытались разделить их и таким образом сделать проще для понимания.
Стек Web3:
- блокчейн;
- среда разработки блокчейна;
- файловое хранилище;
- базы данных P2P;
- API (индексирование и запросы);
- идентичность;
- клиент (фреймворки и библиотеки);
- другие протоколы.
Web3 — это концепция нового, лучшего Интернета. Web3 основан на блокчейнах, криптовалютах и NFT, чтобы отдать власть обратно пользователям в форме владения.
Сеть Web3 децентрализована: вместо больших сегментов Интернета, контролируемых и управляемых централизованными организациями, владение будет распределено между создателями и пользователями.
Web3 не регулируется: все принимают участие на равных правах, и никто не исключается.
Платежи встроены в Web3: для оплаты и переводов здесь используется криптовалюта, нет необходимости в устаревшей инфраструктуре банков и платежных систем.
Web3 не требует доверия: все работает через экономические механизмы и не требует доверять какой-либо третьей стороне.
Ключевые функции Web3 не изолированы и не вмещаются в четкие категории, но для простоты мы попытались разделить их и таким образом сделать проще для понимания.
Стек Web3:
- блокчейн;
- среда разработки блокчейна;
- файловое хранилище;
- базы данных P2P;
- API (индексирование и запросы);
- идентичность;
- клиент (фреймворки и библиотеки);
- другие протоколы.
Сайт, Сэр - telegram канал web-разработчика с 10-летним стажем, где он делится:
нейросетями - сделают за вас грязную работу
сниппетами - реализуют крутые фишки на сайте
сервисами - упростят и сэкономят время
библиотеками - помогут быстро решить задачу
нейросетями - сделают за вас грязную работу
сниппетами - реализуют крутые фишки на сайте
сервисами - упростят и сэкономят время
библиотеками - помогут быстро решить задачу
Чем заменить jQuery: Alpine.js или Stimulus?
Alpine.js - все-таки его синтаксис сильно похож для Vue - такой же лаконичный и приятный.
Однако, хранить всю логику прямо в HTML аттрибутах я считаю крайне некрасиво, поэтому используют компоненты.
Stimulus, наверное, более правильный способ разработки, но под каждое действие придется создавать отдельный файл, что занимает время, да и синтаксис для меня менее очевидный.
Alpine.js - все-таки его синтаксис сильно похож для Vue - такой же лаконичный и приятный.
Однако, хранить всю логику прямо в HTML аттрибутах я считаю крайне некрасиво, поэтому используют компоненты.
Stimulus, наверное, более правильный способ разработки, но под каждое действие придется создавать отдельный файл, что занимает время, да и синтаксис для меня менее очевидный.
Почему профессия тестировщика — это трамплин в IT-сферу?
Тестировщик программного обеспечения планирует и выполняет тестирование приложений, занимается отладкой кода, улучшает юзабилити программ. Позиция ручного тестировщика считается одним из самых простых способов быстро войти в отрасль информационных технологий.
На курсе «Профессия Инженер по тестированию» в Хекслете вы:
✔️разберетесь в видах ручного тестирования освоите современные техники тест-анализа и тест-дизайна;
✔️узнаете, как составлять чек-листы и тест-кейсы для поиска ошибок;
✔️поймете, как работать с баг-трекером;
✔️познакомитесь с основами автоматизированного мобильного тестирования.
Переходите по ссылке, чтобы узнать больше информации и зарегистрироваться на курс!
Начните прямо сейчас!
Вводные курсы профессии доступны бесплатно сразу после регистрации👆👆👆
Тестировщик программного обеспечения планирует и выполняет тестирование приложений, занимается отладкой кода, улучшает юзабилити программ. Позиция ручного тестировщика считается одним из самых простых способов быстро войти в отрасль информационных технологий.
На курсе «Профессия Инженер по тестированию» в Хекслете вы:
✔️разберетесь в видах ручного тестирования освоите современные техники тест-анализа и тест-дизайна;
✔️узнаете, как составлять чек-листы и тест-кейсы для поиска ошибок;
✔️поймете, как работать с баг-трекером;
✔️познакомитесь с основами автоматизированного мобильного тестирования.
Переходите по ссылке, чтобы узнать больше информации и зарегистрироваться на курс!
Начните прямо сейчас!
Вводные курсы профессии доступны бесплатно сразу после регистрации👆👆👆
ES12 и его функции
String.prototype.replaceAll, операторы логического присваивания, разделители числовых разрядов и Promise.any.
replaceAll: для всех, кто боится регулярных выражений
Теперь мы можем заменить все объекты на другие без использования регулярных выражений.
??=
Оператор логического нулевого присваивания (Logical nullish assignment) выполняет присваивание значения только в том случае, если переменная слева равна null или undefined
&&=
Оператор логического И присваивания (Logical AND assignment) выполняет присваивание значения только в том случае, если значение переменной слева истинно (truthy).
Оператор логического нулевого присваивания ??= проверяет, является ли левое значение null или undefined. Если это так, ему присваивается правое значение.
Оператор логического ИЛИ присваивания ||= выполняет присваивание только если левое значение является falsy.
Оператор логического И присваивания &&= наоборот работает только с truthy значениями.
Принципиальное различие между ??= и ||= заключается в том, что первый реагирует только на null и undefined, а второй на все ложные значения.
Подчеркивания можно использовать в качестве разделителя разрядов в больших числах.
Promise.any() принимает массив промисов и возвращает тот их них, который будет разрешен первым. Если все промисы отклонены, вернется ошибка.
String.prototype.replaceAll, операторы логического присваивания, разделители числовых разрядов и Promise.any.
replaceAll: для всех, кто боится регулярных выражений
Теперь мы можем заменить все объекты на другие без использования регулярных выражений.
??=
Оператор логического нулевого присваивания (Logical nullish assignment) выполняет присваивание значения только в том случае, если переменная слева равна null или undefined
&&=
Оператор логического И присваивания (Logical AND assignment) выполняет присваивание значения только в том случае, если значение переменной слева истинно (truthy).
Оператор логического нулевого присваивания ??= проверяет, является ли левое значение null или undefined. Если это так, ему присваивается правое значение.
Оператор логического ИЛИ присваивания ||= выполняет присваивание только если левое значение является falsy.
Оператор логического И присваивания &&= наоборот работает только с truthy значениями.
Принципиальное различие между ??= и ||= заключается в том, что первый реагирует только на null и undefined, а второй на все ложные значения.
Подчеркивания можно использовать в качестве разделителя разрядов в больших числах.
Promise.any() принимает массив промисов и возвращает тот их них, который будет разрешен первым. Если все промисы отклонены, вернется ошибка.
Как передать массив объектов в компонент через props?
interface NewsProps { news: INews, post: Object}const News:FC<NewsProps> = ({news, post}) => {
Почему JavaScript не сделают язык типизированным как TypeScript?
Потому что это потенциально ломающее изменение.
Вообще уже есть предложения с добавлением опциональной статической типизации, как у TS, но при помощи комментариев (чтобы не ломать те реализации, в которых ещё нет такой опции).
На счёт худшести системы типов у js можно много спорить, но пользу динамическая типизация тоже даёт.
Например у вас не болит голова от отсутствия строгих контрактов с бэкендом.
Потому что это потенциально ломающее изменение.
Вообще уже есть предложения с добавлением опциональной статической типизации, как у TS, но при помощи комментариев (чтобы не ломать те реализации, в которых ещё нет такой опции).
На счёт худшести системы типов у js можно много спорить, но пользу динамическая типизация тоже даёт.
Например у вас не болит голова от отсутствия строгих контрактов с бэкендом.
Разработка документации на VuePress
VuePress представляет собой минималистичный генератор статичных сайтов, оптимизированный для написания технической документации.
Изначальной целью VuePress, была поддержка фреймворка Vue.js и сопутствующей инфраструктуры. Для примера, можно посмотреть любую документацию по Vue: Vue.js, Vue Router, Vuex, где применяется единый стиль, заложенный в основе VuePress.
👉 Подробнее
VuePress представляет собой минималистичный генератор статичных сайтов, оптимизированный для написания технической документации.
Изначальной целью VuePress, была поддержка фреймворка Vue.js и сопутствующей инфраструктуры. Для примера, можно посмотреть любую документацию по Vue: Vue.js, Vue Router, Vuex, где применяется единый стиль, заложенный в основе VuePress.
👉 Подробнее
