Обновить
256K+

JavaScript *

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

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

PoW вместо капчи

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

Для чего обычно используется капча? Для защиты от автоматических регистраций (либо автоматической отправки сообщений на форумах, в чатах, через форму обратной связи и т. п.) и для предотвращения брутфорса пары логин/пароль при аутентификации. Более экзотические случаи ее использования достаточно редки.

Сказать, что капча всем надоела и очень многих раздражает — значит ничего не сказать. Проблема еще в том, что очень и очень многие используют «облачную» капчу от одной всемирно известной корпорации... и в случае проблем с доступом к такой капче (тьфу-тьфу-тьфу) львиная доля использующих ее сайтов просто перестанет работать.

Под катом — простейший альтернативный вариант защиты от автоматической отправки сообщений и от брутфорса логина/пароля, основанный на идее PoW (proof of work, доказательство выполнения работы).

Читать далее

SQLite-песочница в браузере

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

Чего мне всегда не хватало, так это аналога JSFiddle для SQLite. Онлайн-песочницы, в которой можно быстро проверить SQL-запрос и поделиться с другими.

Вот чего хотелось:

— Возможность загрузить готовую базу, а не писать SQL для создания таблиц.
— Подключать как локальные базы, так и удаленные (по url).
— Сохранять базу и запросы в облаке.
— Бесплатно и без регистрации.
— Свежайшая версия SQLite.
— Минимализм.

В итоге сделал сам

DOM, который построил Chrome. Или не построил? Или не Chrome? Или не DOM?

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

Обычный, теневой, виртуальный, инкрементальный… Как получилось, что простой программный интерфейс доступа к элементам веб-страниц обзавелся таким количеством «родственников»? Чем современные фреймворки не устраивает стандартная объектная модель документа или просто DOM? Что и как на самом деле отрисовывает браузер в процессе рендера веб-страницы?

Всем привет, это Макс Кравец из Holyweb. Помните сцену из Матрицы, в которой один из юных кандидатов в Избранные наставляет Нео: «Не пытайся согнуть ложку. Первое, что ты должен понять — ложки не существует!»? Давайте переформулирую: «Не пытайся изменить DOM...». А вот о том, что прячется под многоточием, мы сегодня и поговорим.

Читать далее

Vite.js и Vue.js

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

Я нашёл только 3 статьи по Vite.js на Хабр, там были некие обзоры функционала и описание фишек данного инструмента.

Хорошо, тогда вопрос, что же это за инструмент такой и в чем преимущества использовать его при разработке? Если мы зайдем на официальный сайт - то здесь выделяется 6 основных фишек:

Читать далее

Термо принтер и JavaScript

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

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

Читать далее

Дайджест свежих материалов из мира фронтенда за последнюю неделю №486 (20 — 26 сентября 2021)

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

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

Структуры данных LinkedList и TreeMap для JavaScript

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

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

Для удобного и быстрого кодирования можно применять структуры данных. Именно так и поступают при разработке на Java:

https://habr.com/ru/post/237043/

А вот для аналогичной работы с JavaScript оптимизированных инструментов по умолчанию не предоставляется. Реализация Array(), Set() и Map() перекладывается на сторонних разработчиков браузерных движков, а их разработки на сегодняшний день далеки от оптимальности:

https://habr.com/ru/company/ruvds/blog/518032/

Зададимся вопросом — а что если требуются прямо сейчас оптимальные по производительности и памяти структуры данных. Какой минимальный набор достаточно оптимальных структур реализовать и поддерживать? Один из вариантов ответа — это сделать двунаправленный связный список и сбалансированное дерево поиска.

Что это нам даст?

Реализуя связный список LinkedList мы получаем сразу список, двунаправленную очередь и стек. И если это сделать без JavaScript Array(), а лишь используя простые ссылки на объекты, то получаем стандартную и достаточно оптимальную структуру данных.

Если же сделать бинарное сбалансированное дерево поиска TreeMap, например AVL-дерево:

https://habr.com/ru/post/150732/

тогда используя эту реализацию можно получить следующие структуры данных:

Читать далее

Впечатления от прохождения конкурса Яндекс «One Day Offer Frontend»

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

Делюсь впечатлениями как я поучаствовал в конкурсе Яндекс "One Day Offer Frontend". Суть в том, что надо пройти онлайн соревнование - решить за 3часа 5 задач, можно частично. Задачи на алгоритмы и верстку на 5, 45, 70, 90 и 90 баллов. Надо набрать >=100 баллов и тогда будет уже онлайн собес с людьми 25 сентября и оффер в одну из команд Я.Такси, Маркет или Поиск если все будет ОК.

Читать далее

Адаптивный layout — как переверстать весь проект, не перевёрстывая его

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


Вёрстка — это первое, чему обычно учатся начинающие фронтендеры. Но когда вёрстки в вашем проекте становится очень много, поменять что-то — особенно везде и сразу — становится непросто. Переверстать большой проект, как правило, почти нереально. И если начинает казаться, что в какой-то задаче это нужно, вероятно, пришло время для более нестандартных методов.


Всем привет! Меня зовут Юрий Голубев, я разрабатываю frontend в Почте Mail.ru. Сегодня я хочу поделиться опытом того, как мы добавили адаптивности и возможности кастомизации в интерфейс, а заодно — открыли новый для себя способ написания адаптивных компонентов.

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

Устойчивость JS-кода к изменениям

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

Для многих в разработке программ самыми большими проблемами являются (а) их сложность и (б) изменчивость требований. Решение обеих проблем — в декомпозиции целого приложения на более мелкие части (пакеты, модули, классы и функции). Декомпозиция для уменьшения сложности в целом достаточно проста (закон Миллера). Но нужно не просто разбить приложение на части, а сделать эти части устойчивыми к изменениям требований.


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

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

Два в одном: фронтенд и мобильная разработка на EPAM Meet Up

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

Что объединяет фронтендеров и мобильных разработчиков? И те, и другие ругаются на бэкенд!

Если говорить серьёзнее, понятно, что общего много: они работают на клиентской стороне, имеют дело с UI и так далее. Но технологии в вебе и мобильных приложениях различаются, так что технические доклады им нужны разные. А 29 сентября состоится онлайн-митап для тех и других сразу — как это возможно?

Секрет в том, что у митапа будут два параллельных трека (каждый из трёх докладов). Так что фронтендеры смогут узнать полезное на одном, «мобильщики» — на другом. В мобильном треке освещены и iOS, и Kotlin Multiplatform, и Flutter, так что есть интересное для самых разных специалистов. И состав спикеров заметный: например, Виталия Фридмана уже знают многие JS-разработчики, а Александр Денисов отлично известен Flutter-сообществу.

Под катом — подробное описание программы. А тут добавим, что при начале в 19:00 доклады завершатся уже в 21:05, так что полностью выпадать из жизни вечером среды не придётся. Впрочем, можно не только смотреть доклад, но и подключаться к дискуссии после него, и вот сколько времени вы там промучаете спикера вопросами — это больше от вас зависит.

Читать далее

Как спарсить любой сайт?

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

Меня зовут Даниил Охлопков, и я расскажу про свой подход к написанию скриптов, извлекающих данные из интернета: с чего начать, куда смотреть и что использовать.

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

Узнать как

Разница между useMemo и useCallback подробно

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

useCallback используется для мемоизации коллбеков в компонентах, а useMemo используется для мемоизации значений. По своей сути, эти два хука ничем не отличаются и предназначение у них одно и тоже - хранение данных. Строение идентичное, как и в useEffect и useLayoutEffect, первым аргументом идёт коллбек и вторым - массив зависимостей.

Вот несколько вопросов:

Узнать разницу между хуками

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

11 проектов, которые нужно сделать, чтобы стать мастером фронтенда

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

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

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

Читать далее

Решил 50 задач и ответил на вопрос — Python или JavaScript?

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


Привет, друзья!


Я — JavaScript-разработчик. Код пишу в основном на React (иногда на Vue), немного на TypeScript, немного на Node, немного знаю SQL, но...


  • со мной работает много людей, которые пишут код на Python
  • вокруг много разговоров про Python
  • повсюду преподают Python
  • Яндекс любит Python (раньше Гугл тоже его любил, но теперь у него есть Go)

Короче говоря, сложно было не заинтересоваться Python.


Как известно, лучший способ научиться "кодить" — это писать код.


Предлагаю вашему вниманию 50 популярных в сфере программирования задач, решенных с помощью Python и JavaScript.


Цель — сравнить языки на предмет предоставляемых ими возможностей.


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


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

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

Mongoose + Redis. Автоматизация кэширования за 5 минут

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

Mongoose представляет специальную ODM-библиотеку (Object Data Modelling) для работы с MongoDB, которая позволяет сопоставлять объекты классов и документы коллекций из базы данных. 

Redis (Remote Dictionary Server)- это быстрое хранилище данных типа «ключ‑значение» в памяти, активно используемое в разработке с целью повышения производительности сервисов

В рамках данного гайда мы рассмотрим связку Mongoose + Redis и посмотрим, как обеспечить максимально удобное взаимодействие между ними

Читать далее

Что не так с сорсмапами и как с ними не связываться?

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

Здравствуйте, меня зовут Дмитрий Карловский и у меня… посттравматическое стрессовое расстройство после генерации сорсмапов. И сегодня, с вашей помощью, мы будем это лечить путём максимально глубокого погружения в травмирующие события.



Это — текстовая расшифровка выступления на HolyJS'21. Вы можете посмотреть видео запись, прочитать как статью, либо открыть в интерфейсе проведения презентаций.

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

Концепция контроллеров компонента в Angular: часть вторая

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

Несколько месяцев назад я написал статью «Как мы делаем базовые компоненты в Taiga UI более гибкими: концепция контроллеров компонента в Angular». Я рассказал о том, как мы добавляем гибкости и избавляемся от дублирования кода с помощью DI. Пришло время продолжить статью.

Сегодня посмотрим на более хитрые трюки с такими директивами-контроллерами и попробуем сделать метаконтроллер, который, в свою очередь, состоит из других контроллеров. Все это будет происходить в рамках безграничных возможностей Dependency Injection в Angular.

Давайте посмотрим

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

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

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

React.js — 5 вещей, которые могут вас удивить

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

React.js - довольно простая в понимании и относительно легкая в освоении библиотека, особенно учитывая широкий выбор материалов, призванных помочь новичкам. Но каждый инструмент имеет свою долю уловок и проблем, которые обычно эти материалы не затрагивают. Вы сталкиваетесь с ними, когда кто-то проверяет ваш код или, того хуже, когда вы предстаете лицом к лицу с проблемой и отчаянно пытаетесь найти решение. Надеюсь, в этой статье я смогу раскрыть некоторые из этих моментов в React и, может, даже удивить вас!

Читать далее