Почему JavaScript не сделают тизипрованным как TypeScript
Самое главное не надо путать строгую/не-строгую и динамическую/статическую типизацию. JS нестрогий, динамически типизированный.
Но вообще уже есть предложение с добавлением опциональной статической типизации, как у TS, но при помощи комментариев (чтобы не ломать те реализации, в которых ещё нет такой опции). Потому что это потенциально ломающее изменение.
На счёт худшести системы типов у js можно много спорить, но пользу динамическая типизация тоже даёт.
Например у вас не болит голова от отсутствия строгих контрактов с бэкендом.
Самое главное не надо путать строгую/не-строгую и динамическую/статическую типизацию. JS нестрогий, динамически типизированный.
Но вообще уже есть предложение с добавлением опциональной статической типизации, как у TS, но при помощи комментариев (чтобы не ломать те реализации, в которых ещё нет такой опции). Потому что это потенциально ломающее изменение.
На счёт худшести системы типов у js можно много спорить, но пользу динамическая типизация тоже даёт.
Например у вас не болит голова от отсутствия строгих контрактов с бэкендом.
В чем разница между == и ===? Выберите все верные варианты.
Anonymous Poll
19%
при == (абстрактное равенство) происходит приведение к одному типу данных слева направо
42%
при == (абстрактное равенство) происходит неявное приведение типов
12%
при == (абстрактное равенство) сравнивается по значениею, а === сравниваем по типу, но не значению
82%
при === (строгое равенство) сравнивается по значению и типу без приведения типов
Чему равно значение?
Promise.resolve(5)
Promise.resolve(5)
Anonymous Quiz
36%
5
23%
Promise {<pending>: 5}
24%
Promise {<fulfilled>: 5}
10%
Error
7%
Promise {<rejected>: 5}
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
63%
var fs = require("fs");
16%
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
23%
application.cookieEnabled
26%
navigator.cookieEnabled
14%
application.cookie
20%
Ни одно из перечисленных
Взлет и падение 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
20%
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%
Зависит от используемого пользователем браузера
14%
Нет такакого способа, чтобы обнаружить, что 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() принимает массив промисов и возвращает тот их них, который будет разрешен первым. Если все промисы отклонены, вернется ошибка.