IT Верстальщик
1.17K subscribers
50 photos
1 video
240 links
Авторский блог про веб-разработку

Подборки сервисов, статей и новостей в мире front-end и back-end
Download Telegram
​​Знакомство с JavaScript-библиотекой Solid

Solid — это реактивная JavaScript-библиотека для создания пользовательских интерфейсов без использования виртуальной DOM. Она однократно компилирует шаблоны, превращая их в узлы реальной DOM, а благодаря тщательно спланированным механизмам обновления контента при изменении состояния приложения выполняется только тот код, который необходим для визуализации этого изменения.

При таком подходе компилятор может оптимизировать процесс первого рендеринга страницы, а среда выполнения кода способна оптимизировать процессы обновления страниц. 

Для описания компонентов, которые нужно вывести на страницу, используются синтаксические конструкции, напоминающие аналогичные конструкции React. Поэтому тому, кто знаком с React, следующий фрагмент кода может показаться знакомым:

import { render } from "solid-js/web";
 
const HelloMessage = props => <div>Hello {props.name}</div>;
 
render(
 () => <HelloMessage name="Taylor" />,
 document.getElementById("hello-example")
);
​​Почему JavaScript не сделают тизипрованным как TypeScript

Самое главное не надо путать строгую/не-строгую и динамическую/статическую типизацию. JS нестрогий, динамически типизированный.

Но вообще уже есть предложение с добавлением опциональной статической типизации, как у TS, но при помощи комментариев (чтобы не ломать те реализации, в которых ещё нет такой опции). Потому что это потенциально ломающее изменение.

На счёт худшести системы типов у js можно много спорить, но пользу динамическая типизация тоже даёт.
Например у вас не болит голова от отсутствия строгих контрактов с бэкендом.
Чему равно значение?
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?
Какое из следующего утверждения является допустимым для использования модуля 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.
- Понимание основ функционального программирования.
- Владение графическими редакторами.
- Навыки тестирования кода.
Какое из перечисленных выражений используется, чтобы определить, включены ли в браузере 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/
​​Как отказаться от jQuery в современном фронтенде

Зачем 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'} очень ${'сложный' && `простой`} язык`
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
​​Fresh - самый быстрый SSR. Deno в действии. Быстрый курс

Фреймворк Fresh, который позволяет реализовывать Islands Architecture в рамках React.

Фреймворк написан на платформе Deno и можете удивиться скорости его работы

https://www.youtube.com/watch?v=gCkCSyhjLTs&t=1138s
8 редких HTML тегов, которые почти НИКТО не знает!

HTML новые теги: datalist, sub, sup, details, summary, dialog, figure, picture

Клик, чтоб посмотреть
​​Что такое Web3 и почему это важно?

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

Сеть Web3 децентрализована: вместо больших сегментов Интернета, контролируемых и управляемых централизованными организациями, владение будет распределено между создателями и пользователями.

Web3 не регулируется: все принимают участие на равных правах, и никто не исключается.

Платежи встроены в Web3: для оплаты и переводов здесь используется криптовалюта, нет необходимости в устаревшей инфраструктуре банков и платежных систем.

Web3 не требует доверия: все работает через экономические механизмы и не требует доверять какой-либо третьей стороне.

Ключевые функции Web3 не изолированы и не вмещаются в четкие категории, но для простоты мы попытались разделить их и таким образом сделать проще для понимания.

Стек Web3:

- блокчейн;
- среда разработки блокчейна;
- файловое хранилище;
- базы данных P2P;
- API (индексирование и запросы);
- идентичность;
- клиент (фреймворки и библиотеки);
- другие протоколы.
Сайт, Сэр - telegram канал web-разработчика с 10-летним стажем, где он делится:

нейросетями - сделают за вас грязную работу
сниппетами - реализуют крутые фишки на сайте
сервисами - упростят и сэкономят время
библиотеками  - помогут быстро решить задачу
Чем заменить jQuery: Alpine.js или Stimulus?

Alpine.js - все-таки его синтаксис сильно похож для Vue - такой же лаконичный и приятный.
Однако, хранить всю логику прямо в HTML аттрибутах я считаю крайне некрасиво, поэтому используют компоненты.

Stimulus, наверное, более правильный способ разработки, но под каждое действие придется создавать отдельный файл, что занимает время, да и синтаксис для меня менее очевидный.
Почему профессия тестировщика — это трамплин в IT-сферу?

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

На курсе «Профессия Инженер по тестированию» в Хекслете вы:

✔️разберетесь в видах ручного тестирования освоите современные техники тест-анализа и тест-дизайна;
✔️узнаете, как составлять чек-листы и тест-кейсы для поиска ошибок;
✔️поймете, как работать с баг-трекером;
✔️познакомитесь с основами автоматизированного мобильного тестирования.

Переходите по ссылке, чтобы узнать больше информации и зарегистрироваться на курс!

Начните прямо сейчас!
Вводные курсы профессии доступны бесплатно сразу после регистрации👆👆👆