Обновить
512K+

JavaScript *

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

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

JavaScript. Работа с буфером, Ctrl+C Ctrl+V

Уровень сложностиПростой
Время на прочтение3 мин
Охват и читатели18K

Как копировать в буфер картинки. Какие типы данных можно класть в буфер. Поддержка кастомных типов. Как сделать свои кнопки копировать/вставить.

Читать далее

Конец фронтенд-разработки

Уровень сложностиПростой
Время на прочтение10 мин
Охват и читатели124K

Большие языковые модели, такие как GPT-4, с угрожающей скоростью становятся все более эффективными. Через пару лет нам больше не понадобятся разработчики!
...Или, по крайней мере, такая позиция становится вирусной в Твиттере. Я гораздо более оптимистично смотрю на то, что эти достижения ИИ означают для будущего разработки программного обеспечения.

Читать далее

Создание карты потоков с помощью JavaScript: пошаговое руководство

Уровень сложностиСредний
Время на прочтение16 мин
Охват и читатели7.8K

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

В текущем руководстве мы познакомим вас с процессом создания карты потоков. А чтобы сделать этот процесс более практичным, мы используем пример визуализации количества студентов из Индии, обучающихся в разных странах. Следуя этому руководству, вы научитесь создавать собственные карты потоков с помощью JS для любых видов данных.
Читать дальше →

Простейшее решение калькулятора на js без eval();

Уровень сложностиПростой
Время на прочтение4 мин
Охват и читатели18K

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

Читать далее

Формат имён в коде

Уровень сложностиПростой
Время на прочтение4 мин
Охват и читатели37K

Здравствуйте, меня зовут Дмитрий Карловский и я.. изобрёл $mol только для того, чтобы ваши глаза кровоточили, глядя в его код. Во всяком случае, такое ощущение может сложиться, если почитать разного рода околоJSНые чаты, но не обращаться к первоисточникам, где все технические решения вытекают из чисто прагматических рассуждений. Один из таких анализов позвольте представить вашему вниманию.

Вколоть прививку от бешенства

Представляю универсальный responsive header для React.js

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

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

Зачем каждый раз тысячи фронтендеров разрабатывают этот хедер тратя множество часов опять и опять, когда почти все хедеры имеют один и тот же функционал и вид? Почему для этого до сих порт нет вменяемой библиотеки, позволяющей решить проблему подключением одного лишь компонента не тратя уйму времени? Подумала я и создала npm-пакет для React.js, представляющий собой универсальный хедер. Я реализовала большинство фич, которые вам могут потребоваться.

Читать далее

Пишем свой мессенджер на PHP

Уровень сложностиПростой
Время на прочтение6 мин
Охват и читатели23K

Пишем свой Мессенджер на PHP через WebSocket. Так и для Начинающих так и далёких от IT людей.

Тут вы узнайте как установить PHP, WebSocket и в чём его различие с AJAX (http) запросами как написать сервер и клиент Мессенджера полностью.

Читать далее

Как выбрать библиотеку стайлинга и заменить несколько дизайн-систем на одну. Часть 1

Уровень сложностиСредний
Время на прочтение6 мин
Охват и читатели3.3K

Привет! Меня зовут Вадим Казаченко, я лид фронта дизайн-системы ВТБ. Год назад устроился в банк и получил командную задачу — построить единую библиотеку компонентов, настолько универсальную, чтобы ее можно было использовать в любом продукте дизайн-системы банка, и при этом она не должна становиться «узким горлышком», как это обычно происходит с UI-китами в крупных компаниях. Дело в том, что в ВТБ существует множество дизайн-систем, над которыми работают десятки дизайнеров.

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

Читать далее

Сравниваем структуры хоть и глубоко, но быстро

Уровень сложностиПростой
Время на прочтение5 мин
Охват и читатели5.6K

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

Погрузиться поглубже

Create react app умирает?

Уровень сложностиПростой
Время на прочтение4 мин
Охват и читатели17K

Зайдя на официальный сайт React я не сразу понял, что произошло.

Когда мы заходим на страницу документации React в раздел установки, мы можем увидеть различные предложенные варианты установки фреймворков React, а именно Next.js, Remix, Expo, Gatsby. Но при этом нет явного варианта установки самого React в чистом виде. Неужели React сдает позиции.

На самом деле это не так. Давайте разберемся, что же происходит в настоящее время и что собираются делать разработчики.

Читать далее

React: интересная схема работы с формами

Уровень сложностиСложный
Время на прочтение14 мин
Охват и читатели30K


Hello, world!


В этой статье я хочу рассказать о схеме (назовем ее так) работы с формами в React, которая на сегодняшний день кажется мне наиболее эффективной. Эта схема предполагает использование React Hook Form для обработки форм и Zod для валидации пользовательских данных. Применение данной схемы имеет несколько существенных преимуществ по сравнению с использованием других решений или реализацией необходимого функционала вручную. Главными преимуществами являются минимизация количества шаблонного кода и автоматическое выведение типов (type inference).


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


Руководства, шпаргалки, вопросы и другие материалы по JavaScript, TypeScript, React, Next.js, Node.js, Express, Prisma, GraphQL, Docker и другим технологиям, а также Блог по веб-разработке.


Интересно? Тогда прошу под кат.

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

Руны и лёд: техническое собеседование по TypeScript

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

Крисс проводит тебя в комнату для совещаний.

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

«Как дела?», — спрашивает он.

Сложный вопрос для начала беседы, придётся объяснять внутренний механизм, приводящий в движение твои действия. Возможно, он риторический?

«Действительно, как?», — улыбаешься ты.

«… хм, отлично. Ну, приступим?»

Ты утвердительно киваешь.

«Хорошо. Мы займёмся небольшой программной головоломкой, чтобы я понял, как ты умеешь решать задачи. Не волнуйся, если не получится сделать это упражнение, мне главное понять, как ты мыслишь и общаешься».

Волноваться? Ты с трудом вспоминаешь это ощущение. Возможно, оно осталось в твоей юности, когда ты зимовал на Свальбарде* с медведями. Ещё до того, как ты понял сейд.
Читать дальше →

Трансплантация реактивности

Уровень сложностиСредний
Время на прочтение19 мин
Охват и читатели4.8K

Здравствуйте, меня зовут Дмитрий Карловский, и я.. тот самый чел, который написал реактивную библиотеку $mol_wire. Именно благодаря мне вам есть сейчас чем пугать детей перед сном.

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

Берегите синапсы, сейчас будет настоящий киберпанк..

Открыть ментальный сокет

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

Создание простого SPA на VueJs с использованием CMS Strapi

Уровень сложностиСредний
Время на прочтение10 мин
Охват и читатели20K

Данное руководство составлено на основе некоторого опыта, который был получен из книг и официальной документации. Вашему вниманию будет представлено 2 варианта написания простых в поддержке сайтов на Vue.js (с использованием backend систем и без). 

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

Во второй части мы рассмотрим более сложный вариант, с использованием опен сорс CMS решения для управления данными сайта. Весь код в данном руководстве представлен в синтаксисе javascript/hml/css и bash.

Читать далее

Стартап в Соло. Часть 4: техническая реализация

Уровень сложностиСредний
Время на прочтение10 мин
Охват и читатели5.4K

В этой статье хочу рассказать, как технически устроен мой Telegram чат для сайта, из каких компонентов состоит и с какими подводными камнями я сталкивался.

Читать далее

Как мы нейросеть в браузер тащили

Уровень сложностиПростой
Время на прочтение3 мин
Охват и читатели8K

Здравствуйте, товарищи! Хочу написать a good story про то, как портировал нейросеть в браузер.

Задача пришла ко мне от моих институтских друзей из ИВМ РАН. Есть некий фронтенд, на который доктор загружает КТ снимок. Доктору предлагается при помощи веб интерфейса выделить сектор с сердцем, который будет передан на сервер, где алгоритмически отсегментируется граф аорты для последующего анализа.

Меня попросили сделать нейросеть для выделения 3d сектора с сердцем, а затрачиваемое время не должно превышать 2-3 секунд.

Гонять весь КТ снимок на сервер только за координатами накладно, т.к. КТ снимок обычно состоит из 600-800 кадров размера 512 * 512 пикселей, поэтому мое предложение о браузерном варианте пришлось кстати.

Читать далее

Основы фронтенд-разработки: фреймворки, DOM-дерево, взаимодействие с бэкендом

Уровень сложностиСредний
Время на прочтение8 мин
Охват и читатели27K

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

Делаем бесконечную рабочую область без Canvas

Уровень сложностиСредний
Время на прочтение6 мин
Охват и читатели8.4K

Рабочее пространство в нашем приложении представляет собой бесконечную доску, по которой могут перемещаться ноды. Необходимо реализовать масштабирование этого пространства и перемещение по нему. Все это мы делаем без использования Canvas, так как приложение построено на React, в дизайн-системе используется antd, а ноды могут быть огромными формами. Согласитесь, реализовывать такие интерфейсы было бы гораздо сложнее, не будь у нас доступа к нативным средствам HTML-5.

Читать далее

Встраиваем JS- скрипты в PDF для социальной инженерии — пошаговое руководство

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

Введение

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

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

Мы, Маргарита Белоусова, аналитик аналитического центра и Анастасия Прядко, специалист по анализу защищенности компании УЦСБ написали пошаговую инструкцию, как сделать фишинговый документ: детали и примеры кода. Кроме того, мы кратко рассмотрели структуру PDF-файла, как и куда в него внедрять JavaScript, а также способы маскировки факта внедрения скрипта. Наш опыт пригодится безопасникам, системным администраторам и всем, кто связан с ИБ.

Структура PDF

Организация данных в памяти

PDF способен на большее, чем просто отображать текст. Он может также включать в себя изображения и другие мультимедийные элементы, может быть защищён паролем, выполнять JavaScript и многое другое. Вне зависимости от версии структура PDF документа неизменна:

Читать далее

Node.JS: заменили модуль SSH2 на OpenSSH и снизили задержки eventloop в 15 раз

Уровень сложностиСредний
Время на прочтение5 мин
Охват и читатели6.7K

В нашем сервисе мониторинга и анализа PostgreSQL доступ к серверам осуществляется по протоколу SSH. В качестве ssh-клиента мы используем популярный модуль SSH2 , однако при передаче данных большого объема этот модуль вносит существенные задержки в event loop. Как их можно снизить - расскажем в этой статье.

Читать далее