Pull to refresh
9
0
Send message

Анонс Vite 2.0

Reading time3 min
Views14K

Подумайте о предварительно сконфигурированном dev-сервере + сборщик, но более компактном и быстром. Он использует встроенную в браузер поддержку ES модулей и инструменты, такие как esbuild, для быстрого и современного опыта разработки.

Чтобы понять, насколько быстро работает Vite, вот видео сравнение загрузки приложения React на Repl.it с использованием Vite и create-react-app (CRA):

Читать далее
Total votes 9: ↑9 and ↓0+9
Comments4

Обзор технологий скроллинга

Reading time7 min
Views19K
Анимации, имеющие отношение к скроллингу веб-страниц, существуют уже многие годы. В последнее время подобные анимации стали распространённее. Возможно, дело тут отчасти в том, что устройства, используемые для работы в интернете, стали мощнее. Эти устройства способны нормально обрабатывать и выводить больше визуальных эффектов, чем раньше.



Существует множество технологий, связанных со скроллингом. Цель этой статьи заключается в том, чтобы дать обзор таких технологий и инструментов, которые помогут подобрать и создать то, что нужно в каждой конкретной ситуации. Я разделил бы технологии скроллинга на две широкие категории. В первую входят технологии для реализации специфических механизмов скроллинга, во вторую — технологии скроллинга общего назначения.
Читать дальше →
Total votes 29: ↑29 and ↓0+29
Comments3

Putout: линтер нового поколения

Reading time3 min
Views4.4K

В 2015 году Николас Заказ опубликовал статью с похожим названием, только вместо Putout было ESLint. В те времена это было действительно так, ESLint безусловно стандарт дефакто в мире JavaScript линтеров. Однако совершенству нет предела, и любому успешному инструменту приходит на смену еще более успешный, либо дополняет его устраняя недостатки. Об одном из таких инструментов мы сегодня поговорим, однако начать хотелось бы с истории.

Читать дальше →
Total votes 15: ↑13 and ↓2+11
Comments5

5 JavaScript-библиотек для работы со строками

Reading time6 min
Views11K
Работа со строками может оказаться непростым делом из-за того, что она подразумевает решение множества разноплановых задач. Например, для простого приведения строки к «верблюжьему» стилю понадобится несколько строк кода:

function camelize(str) {
  return str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function(match, index) {
    if (+match === 0) re
turn ""; // или if (/\s+/.test(match)) для пробелов
    return index === 0 ? match.toLowerCase() : match.toUpperCase();
  });
}

Этот фрагмент кода, кстати, в роли ответа на вопрос о приведении строк к «верблюжьему» стилю, собрал больше всего голосов на Stack Overflow. Но даже он не в состоянии правильно обработать, например, такую строку:

---Foo---bAr---


Результат обработки строки ---Foo---bAr---

А как быть, если такие строки, всё же, нужно обрабатывать? Можно подправить этот пример, а можно прибегнуть к помощи специализированных библиотек. Они упрощают реализацию сложных алгоритмов и, кроме того, дают программисту инструменты, обладающие куда большей гибкостью и универсальностью, чем, скажем, вышеприведённый пример. Это вполне может означать, что для решения некоей непростой задачи понадобится вызвать всего один метод.

Поговорим о нескольких JavaScript-библиотеках, предназначенных для работы со строками.
Читать дальше →
Total votes 41: ↑40 and ↓1+39
Comments9

Property-based тестирование для JavaScript и UI: необычный подход к автоматизированным тестам

Reading time11 min
Views9.1K
Elon Musk's Tesla Roadster
Falcon Heavy Demo Mission

Писать тесты скучно. А то, что скучно делать, постоянно откладывается. Меня зовут Назим Гафаров, я разработчик интерфейсов в Mail.ru Cloud Solutions, и в этой статье покажу вам другой, немного странный подход к автоматизированному тестированию.
Читать дальше →
Total votes 61: ↑59 and ↓2+57
Comments28

10 отличных Github репозиториев, которые должен знать каждый веб-разработчик

Reading time3 min
Views97K

Кроме огромных репозиториев с источниками для подготовки к интервью, здесь много чего интересного


Я собрал список из десяти отличных репозиториев на Github, которые помогут вам существенно расширить свои знания.


image


А я его перевел, т.к. показалось, что пост многим будет интересен. Перевод очень вольный: я опустил нерелевантные промо-ссылки и гипер эмоциональные похвалы автора оригинала, чтобы оставить только суть. Еще, обновил цифры, чтобы информация была более актуальной к моменту публикации этого перевода. Итак, перейдем к списку.
Читать дальше →
Total votes 76: ↑69 and ↓7+62
Comments8

JavaScript tree shaking, like a pro

Reading time5 min
Views14K
Это перевод статьи об оптимизации и уменьшении размера бандла приложения. Она хороша тем, что тут описаны best practices, советы, которых стоит придерживаться, чтобы тришейкинг работал и выкидывал неиспользуемый код из сборки. Она будет полезной многим, потому что сейчас все используют системы сборки, в которых «из коробки» есть тришейкинг. Но чтобы он работал правильно, нужно придерживаться принципов, описанных ниже.

image
Читать дальше →
Total votes 32: ↑32 and ↓0+32
Comments3

Нетривиальная расстановка элементов на flexbox без media-запросов

Reading time7 min
Views27K
Казалось бы, какой пост может быть о CSS Flexbox в 2019 году? Верстальщики уже несколько лет активно используют данную технологию, и все тайны должны быть разгаданы.

Однако, недавно у меня возникло стойкое ощущение, что нужно поделиться одним нетривиальным и, на мой взгляд, полезным приёмом, связанным с flexbox. Написать пост побудил тот факт, что ни один знакомый (из учеников, верстальщиков и просто людей, близких к web), не смог решить задачку, связанную с flexbox, хотя на это нужно всего 4-6 строк.
Читать дальше →
Total votes 52: ↑51 and ↓1+50
Comments18

Новый пакет валидаций для React на Mobx @quantumart/mobx-form-validation-kit

Reading time19 min
Views4.3K
Добрый день.
Сегодня я хочу рассказать о новом пакете для асинхронных валидаций в проектах использующих в своей основе React, Mobx и написанных на Typescript.
Современная Frontend разработка предполагает большое количество логики при заполнении страниц с документами, анкет и документов на кредит, платежных поручений, страниц регистраций на сайте. Основная логическая нагрузка приходиться на валидационные проверки. Разработчики Angular продумали этот момент и предлагают разработчикам для этих целей использовать встроенных механизм FormControl-ов, что, хоть имеет ряд своих недостатков, но всё же лучшем чем полное отсутствие подобного решения на React. Ситуация усложняется еще тем, что современный тренд React разработки предполагает использовать mobx для организации бизнес-логики.
Столкнувшись с этими проблемами мы решили всех их с помощью написания пакета: @quantumart/mobx-form-validation-kit

Плюсы пакета:
  • Полностью на TypeScript
  • Совместимость с Mobx (версии 4, который поддерживает, всеми любимый, IE10)
  • Рассчитан на работу в React (можно использовать в проектах и без react)
  • Рассчитан на асинхронные валидации
  • Легко встроить в существующий проект.

Инструкция по работы с пакетом под катом.
Читать дальше →
Total votes 8: ↑8 and ↓0+8
Comments6

Эволюционирующие клеточные автоматы

Reading time22 min
Views37K


Соединим клеточные автоматы с генетическим алгоритмом и посмотрим, что из этого получится.

В статье присутствуют Gif (трафик!) и контрастные картинки. У эпилептиков может случиться эпилептический припадок.
Читать дальше →
Total votes 130: ↑129 and ↓1+128
Comments34

Вопросы будущему работодателю

Reading time3 min
Views55K


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

Под катом список тем, которые покажут проблемные места там, где о них не любят упоминать.
Читать дальше →
Total votes 114: ↑108 and ↓6+102
Comments87

5 полезных плагинов для webpack

Reading time5 min
Views21K
Привет, Хабр!

У webpack'а есть много полезных плагинов, о которых многие не знают и не используют в своих проектах. Под катом я собрал 5 таких, они могут здорово упростить вам жизнь!


Читать дальше →
Total votes 31: ↑31 and ↓0+31
Comments5

10 PostCSS плагинов, которые сэкономят время вашему верстальщику

Reading time10 min
Views30K


У нас, у фронтендеров, есть такая категория инструментов, которые никак не решают стоящие перед нами задачи, а скорее влияют на сам процесс их решения. Изменяют его. Отношение к таким инструментам самое разное – начиная от мании в духе “давайте эту штуку пихать везде, это же так круто” и заканчивая отговорками вроде “раз не решает задачи бизнеса, значит оно нам не нужно”. Но, так или иначе, сегодня мы поговорим про PostCSS — один из таких инструментов.


Волна хайпа уже давно прошла, в последнее время про PostCSS говорят очень мало. Многие новички даже не знают, что это такое. Думаю самое время посмотреть на этот инструмент с точки зрения практического использования в самых обычных проектах, где люди решают задачи, а не играются с модными технологиями.

Читать дальше →
Total votes 27: ↑25 and ↓2+23
Comments14

Фибоначчи на собеседовании

Reading time8 min
Views124K
Вычисление ряда Фибоначчи — это классическая алгоритмическая задача, потому её нередко дают на собеседованиях, когда хотят проверить, что кандидат в принципе хоть как-то умеет в алгоритмы. Предположим, вы тот самый кандидат. Вам дали задание: на языке JavaScript написать функцию fib(n), возвращающую энное число Фибоначчи. Считаем, что нулевое число Фибоначчи — это нуль. Проверка корректности аргумента не требуется. Какие у вас есть варианты?

image
Выбирай мудро
Total votes 183: ↑177 and ↓6+171
Comments135

Нужно ли чистить строки в JavaScript?

Reading time6 min
Views79K
Что? Строки могут быть «грязными»?

Да, могут.

//.....Какой-то код
console.log(typeof str); // string
console.log(str.length); // 15
console.log(str); // "ччччччччччччччч"

Вы думаете, в этом примере строка занимает 30 байт?

А вот и нет! Она занимает 30 мегабайт!
Читать дальше →
Total votes 220: ↑219 and ↓1+218
Comments224

Что происходит при создании контейнера Flexbox?

Reading time9 min
Views26K

Это перевод статьи Rachel Andrew, являющейся одним из разработчиков спецификаций CSS.


В короткой серии статей я собираюсь потратить некоторое время на детальную распаковку Flexbox — точно так же, как я делала в прошлом с grid. Мы рассмотрим, для чего был разработан Flexbox, что он действительно делает хорошо, а когда мы не можем выбрать его в качестве способа компоновки.


В этой статье мы подробно рассмотрим, что на самом деле происходит при добавлении display: flex в вашу таблицу стилей.

Total votes 23: ↑22 and ↓1+21
Comments22

4 совета для оптимизации webpack-приложения

Reading time4 min
Views20K
Всем привет!

За время моей работы с вебпаком у меня накопилась пара интересных советов, которые помогут вам приготовить отлично оптимизированное приложение. Приступим!

Кот-фронтендер смотрит на webpack и говорит 'Белиссимо'

Читать дальше →
Total votes 19: ↑19 and ↓0+19
Comments17

Кастомный подход для нормализации и сброса стилей (custom-reset.css)

Reading time9 min
Views27K


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

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

Надеюсь вы подчеркнете для себя что-то полезное, здесь вы можете ознакомиться с ним.
custom-reset.css
Читать дальше →
Total votes 27: ↑23 and ↓4+19
Comments34

Средний цвет в JavaScript

Reading time3 min
Views27K

Fruit average color


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

Читать дальше →
Total votes 44: ↑44 and ↓0+44
Comments17

Метапрограммирование в JavaScript

Reading time17 min
Views23K
Метапрограммирование — вид программирования, связанный с созданием программ, которые порождают другие программы как результат своей работы, либо программ, которые меняют себя во время выполнения. (Википедия)

Говоря более простым языком, метапрограммированием в рамках JavaScript можно считать механизмы, позволяющие анализировать и менять программу в режиме реального времени в зависимости от каких-либо действий. И, скорее всего, вы так или иначе используете их при написании скриптов каждый день.

Total votes 41: ↑38 and ↓3+35
Comments16
1
23 ...

Information

Rating
Does not participate
Location
Иерусалим, Иерусалим, Израиль
Date of birth
Registered
Activity