Обновить
256K+

JavaScript *

Прототипно-ориентированный язык программирования

246,54
Рейтинг
Сначала показывать
Порог рейтинга
Уровень сложности

Как готовить микрофронтенды в Webpack 5

Время на прочтение9 мин
Охват и читатели23K

Всем привет, меня зовут Иван и я фронтенд-разработчик из компании DexSys.

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

Начнём с того, что ребята с Хабра (@artemu78, @dfuse, @Katsuba) уже писали про Module Federation, так что, моя статья - это не что-то уникальное и прорывное. Скорее, это шишки, костыли и велосипеды, которые полезно знать тем, кто собирается использовать данную технологию.

Читать далее

Делаем хитмап стоимости недвижимости на общедоступных алгоритмах и опенсорсных библиотеках

Время на прочтение8 мин
Охват и читатели18K


Карта 2gis.ru работает на WebGL-движке, который позволяет визуализировать данные. Когда мы делали слой недвижимости, то решили добавить ещё и тепловую карту стоимости квадратного метра. Во-первых, это красиво. А во-вторых, такие карты могут помочь с выбором квартиры.

Под катом — про то, какими алгоритмами пользовались и с какими трудностями встретились, когда делали хитмап стоимости квартир на собственных данных.
Читать дальше →

Как мы решили проблемы с z-index

Время на прочтение4 мин
Охват и читатели11K

Привет, Хабр!

Буквально недавно на работе я получил баг с z-index, я его по быстрому пофиксил и получил еще два бага. Я как то не придавал этой проблеме значения, и тут мой коллега Дмитрий Рокало ревьювил мой очередной пул реквест и пришел ко мне с идеей, как покончить войну с z-index в нашем проекте. И как раз в тот же день, я слушал подкаст веб стандарты и там обсуждали статью по работе с z-index. И решение, которое предлагают в статье, показалось мне крайне нелепым по сравнению с тем, что предложил мне Дима. Поэтому я решил спонтанно записать это видео и написать статью. Возможно это решение кому-то будет полезным. (Данная статья является расшифровкой видео).

Read more

Целительная сила JavaScript

Время на прочтение6 мин
Охват и читатели8.1K

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

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

Как и множество других писателей и художников, я держу личный веб-сайт, работающий уже в течение почти 20 лет. Решив заняться кодом, я смахнул пыль с моих заржавевших знаний JavaScript, и начал искать библиотеки нечёткого поиска, которые можно подключить к веб-сайту для упрощения поиска эссе из моей коллекции.
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №464 (19 — 25 апреля 2021)

Время на прочтение3 мин
Охват и читатели9.2K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →

Основы управления памятью в JavaScript: как это работает и какие проблемы могут возникнуть

Время на прочтение8 мин
Охват и читатели44K


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

Но рано или поздно разработчикам все же приходится разбираться с проблемами, связанными с памятью — например, утечками. Ну а разобраться с ними получится лишь тогда, когда есть понимание механизма выделения памяти. Эта статья и посвящена объяснениям. В ней также есть советы о самых распространенных видах утечек памяти в JavaScript.
Читать дальше →

Как мы сетапили монорепозиторий с SSR и SPA для Otus.ru

Время на прочтение10 мин
Охват и читатели5.1K

В начале 2017 года в KTS поступила задача - реализовать платформу для онлайн-образования Otus.ru.

От нас требовалось как можно быстрее собрать портал, на котором можно было бы посмотреть информацию о курсах. Сделать MVP нужно было как можно быстрее, а современные фронтенд-фреймворки были еще не распространены. Поэтому фронт писался на vanilla js + jquery. В 2020 году мы решили перепроектировать и полностью переписать сервис на React.

В этой статье мы расскажем, как засетапить монорепозиторий с SSR и SPA приложениями на React на примере Otus.ru

Читать далее

Musiphone — децентрализованный музыкальный плеер

Время на прочтение5 мин
Охват и читатели4.2K


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

Читать дальше →

Трёхпроходный алгоритм рефакторинга Front End

Время на прочтение4 мин
Охват и читатели8.6K

Попался мне достаточно крупного размера проект написанный на React + Typescript.
Покопался в коде. Всё круто, контейнеры, компоненты, типы везде стоят, линтер настроен, styled-components, даже storybook есть и некий react-query.

Ну просто счастье, а не проект!

Сажусь делать простую таску – какую-то страничку собрать из компонентов.
Пишу в коде But… и IDE мне предлагает 16 Button компонентов.

Блииин…

Дальше больше...

TypedAPI: клиент-сервер для TypeScript

Время на прочтение5 мин
Охват и читатели3.1K


Предлагаю вашему вниманию TypedAPI: библиотеку API клиента-сервера для проектов, в которых фронт и бэк написаны на TypeScript. Акцент делается на максимальной простоте использования. Суть такая: вы пишете API как обычный TypeScript класс с некоторыми ограничениями, потом автоматом из класса строится интерфейс, которым будет пользоваться клиентское приложение. Также генерируется некоторая служебная информация. Остается только настроить коннекторы (доступны HTTP и WebSocket). Валидацию, хранение подключений, и др. берет на себя TypedAPI. Есть поддержка событий.
Читать дальше →

Как я в 15 лет написал интернет-магазин

Время на прочтение5 мин
Охват и читатели9.8K

Я заинтересовался программированием в 5-том классе. У меня в школе был кружок по HTML. Я туда пошел, походил, потом заболел, пропустил несколько уроков. Мы дошли до таблиц и я уже не смог догнать программу.

Но в 7-ом классе во втором семестре мы уже должны были учить HTML по школьной программе. И я снова очень заинтересовался сайтами. Стал смотреть видео типа "CSS за час"

Читать!

Простые советы по написанию чистого кода React-компонентов

Время на прочтение8 мин
Охват и читатели22K
Автор материала, перевод которого мы публикуем сегодня, делится советами, которые помогают делать чище код React-компонентов и создавать проекты, которые масштабируются лучше, чем прежде.


Читать дальше →

JavaScript Bot

Время на прочтение1 мин
Охват и читатели2.9K

С помощью этого Telegram бота вы сможете протестировать свои знания по основам JavaScript, React Native, TypeScript.


javascript bot


javascript bot


Мы используем вопросы, которые взяли из 29 тем нашего курса по основам JavaScript.

Читать дальше →

Ближайшие события

Пишем юнит тесты на TypeScript'е (на примере котиков)

Время на прочтение4 мин
Охват и читатели23K

Как писать модульные тесты в проекте с TypeScript'ом? В этой статье я постараюсь ответить на этот вопрос а также покажу как создать среду модульного тестирования под проекты использующие TypeScript.

Читать далее

Заметка о том, как работают хуки в React

Время на прочтение14 мин
Охват и читатели31K


Доброго времени суток, друзья!

Хочу поделиться с вами некоторыми наблюдениями относительно того, как работает React, а именно: предположениями о том, почему хуки нельзя использовать в if, циклах, обычных функциях и т.д. И действительно ли их нельзя использовать подобным образом?

Вопрос звучит следующим образом: почему хуки можно использовать только на верхнем уровне? Вот что по этому поводу говорит официальная документация.

Начнем с правил использования хуков.

FSTB – работа с файлами в Node.js без боли

Время на прочтение10 мин
Охват и читатели6.5K

Когда я работаю с файлами в Node.js, меня не оставляет мысль, что я пишу очень много однотипного кода. Создание, чтение и запись, перемещение, удаление, обход файлов и подкаталогов, всё это обрастает неимоверным количеством бойлерплейта, который еще усугубляется странными названиями функций модуля fs. Со всем этим можно жить, но меня не оставляла мысль, что можно сделать удобнее. Хотелось, чтобы такие элементарные вещи, как, например, чтение или запись текста (или json) в файл можно было написать в одну строчку.

Как итог этих размышлений, появилась библиотека FSTB, в которой я попытался улучшить способы взаимодействия с файловой системой. Решить, получилось у меня или нет вы сможете сами, прочитав эту статью и попробовав библиотеку в деле.

Читать далее

Дайджест свежих материалов из мира фронтенда за последнюю неделю №463 (12 — 18 апреля 2021)

Время на прочтение3 мин
Охват и читатели7.6K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →

Аэродинамика из STL

Время на прочтение5 мин
Охват и читатели12K

Для построения траекторий КА и их носителей нужны данные. В первую очередь - аэродинамические. Они нужны при определении сил и моментов, действующих на космический аппарат (или его ступень), а также для оценки теплового состояния конструкции. Характеристики зависят от внешнего вида КА и параметров полета и обычно выглядят как обширные простыни с зависимостями соответствующих коэффициентов от углов атаки, чисел Маха, высот и много еще чего.

Есть несколько способов получить эти цифры:

Читать далее

Google Sheets — как разноплановый помощник для непростых задач или как я делал анализатор футбольный матчей

Время на прочтение7 мин
Охват и читатели7.4K

Лежу я ночью, пытаюсь уснуть. И как обычно тысяча мыслей, и среди них я сумел зацепился за одну. А звучала она так: "почему бы не сделать анализатора футбольных матчей, где нужно будет лишь ввести участников игры и получить выборку из их статистики общей и какие-то описание, чего ждать в грядущем матче". Действительно, почему нет?!

На следующий день, когда я проснулся, я первым же делом пошел гуглить, есть ли такое сейчас, потому что что-то подсказывало, что в нашем мире это слишком банальная затея (та ладна!?). Но я то не просто хотел складывать и делить числа из статистики, мне хотелось учитывать различные факторы спортивного мероприятия, а их большое количество.

Гугл дал свой результат, впрочем как всегда. Я нашел кучу калькуляторов ставок, которые продается за 3-5к рублей, и прочие таблицы расчетов в свободном доступе. Я как бы и так помнил расчеты тоталов голов, но мне нужно было их улучшить и получить на выходе собственно целого "мага/колдуна/вангу" спортивных событий. Или хотя бы формулку, которая выдаст результат после ввода данных.

Читать далее

Автоматизируем сервис-воркер с Workbox 6. Доклад в Яндексе

Время на прочтение14 мин
Охват и читатели3.9K
«Задеплоил сервис-воркер — нужно покупать новый домен», — известная шутка о том, как сложно писать собственную логику кеширования. С приходом шестой версии библиотеки Workbox для прогрессивных веб-приложений (PWA) больше не нужен компромисс между гибкостью и удобством автоматизации сетевых задач. Максим Сальников рассказал, как начать работу с Workbox 6, реализовать типовую функциональность для офлайнового веб-приложения и пойти дальше, добавив собственную логику кеширования.

От докладчика:
Среди отзывов, полученных мной после этого доклада, занявшего второе место по полезности по результатам опроса после конференции, был такой: «Краткий пересказ документации Workbox». Что ж, в какой-то степени это действительно так: я рассказал пошаговую историю превращения «обычного» веб-приложения в прогрессивное с помощью этой замечательной библиотеки. Буду очень рад, если доклад и конспект вдохновят вас и помогут начать ваше собственное путешествие в мир сервис-воркеров и PWA.
Читать дальше →