Обновить
256K+

JavaScript *

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

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

Differential Serving — делаем свой код чище и производительнее

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


Всем привет!

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

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

Differential Serving поможет заметно облегчить бандл — это довольно интересный метод оптимизации. Толкового материала по теме нашла маловато, в основном на английских форумах, поэтому решила поделиться своим небольшим исследованием.
Читать дальше →

Декораторы в JavaScript с нуля

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

Декоратор — это средство, которое позволяет обернуть одну функцию другой и расширить ее возможности. Вы «декорируете» существующий код, обернув его другим кодом. Этот прием известен всем, кто знаком с композицией функций или функциями высшего порядка.

Декораторы — явление не новое. Они используются и в других языках, например в Python, и даже в функциональном программировании на JavaScript. Но об этом мы поговорим позже.

Читать далее

Начинающим React-разработчикам: приложение со списком дел (покупок)

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

Если вы только начали изучать React, для отработки основных концепций этого фреймворка можно создать простое приложение. Первое, что приходит в голову, — это приложение для составления списка дел или покупок. С него и начнем. Основные концепции React изложены в официальной документации на сайте, а в предыдущих записях моего блога можно найти ссылки на другие руководства по работе с React.

Запустите VS Code или любой другой редактор кода. Для создания React-приложения наберите в терминале команду:

Читать далее

Дайджест свежих материалов из мира фронтенда за последнюю неделю №444 (1 — 6 декабря 2020)

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

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

Безжалостное избавление от Layout Shift на netlify.com

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

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

Читать далее

JavaScript исполняется 25 лет: краткая история языка и скидка 50% на WebStorm

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

25 лет назад, 4 декабря 1995 года JavaScript был впервые представлен миру. Мы хотим отметить день рождения языка и поблагодарить вас за его поддержку все эти годы, поэтому мы подготовили для вас небольшой сюрприз!


js-25-picture

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

Web Components и IoC

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

Замечательной особенностью веб-компонентов или скорее даже языка разметки HTML является возможность прозрачно оборачивать существующий контент новым. Благодаря этому, вы можете практически неинвазивно дорабатывать существующий legacy код, а так же изящно структурировать новый.

Говоря конкретно, если вы обернете какую-то верстку своим кастомным элементом (гугл. Custom Elements), в хуке connectedCallback(), то ваш элемент может определить какие у него внутри есть подэлементы и настроить свою и их работу соответствующим образом если надо приспособить их к новым требованиям и это будет вполне себе архитектурно грамотным решением. Также он будет получать всплывающие события от своих подэлементов и если вы включили изоляцию теневого дерево, он станет их безальтернативным брокером (а если не включили - прозрачным прокси), т.к. за его пределы они всплывать не будут и вся ответственность ляжет на него. 

Читать далее

Салют от Сбера в Яндекс.Облаке

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


В сентябре 2020 г. Сбербанк переименовал себя просто в Сбер (т.н. ребрендинг), и на радостях запустил собственную платформу голосовых ассистентов под названием Салют. Особенностью Салюта является наличие сразу трёх голосовых ассистентов на выбор пользователей: Сбер — мужчина, стиль обращения на «вы», Афина — женщина, обращается также на «вы», и Джой — девушка с дружеским «ты».

Сбер (банк, не его тёзка — голосовой ассистент) открыл эту платформу для сторонних разработчиков, пригласив их делать для неё приложения, т.н. смартапы — аналог навыков голосовой помощницы Алисы, и учредив для них конкурс с весьма щедрым призовым фондом. В этом туториале мы рассмотрим как сделать смартап на Node.js, разместить его код в Яндекс.Облаке (используя функции), и, наконец, создать проект в Салюте, пройти там модерацию, и опубликовать наш смартап, чтобы он стал общедоступным.
Читать дальше →

Производительность TypeScript

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

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

RxJS и Angular: искусство отписки от уведомлений

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

Если вы используете Angular и библиотеку RxJS, здесь вы узнаете все способы, которые вам могут понадобиться, чтобы подписываться на уведомления от объектов Observable и отписываться от них!

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

Чтобы избежать утечек памяти, важно вовремя отписываться от уведомлений, выпускаемых объектами Observable. В этой статье описано большинство доступных способов, с помощью которых в компонентах Angular можно отписываться от уведомлений, выпускаемых объектами Observable.

Начнем с создания демонстрационного сервиса (DummyService), которой поможет нам отслеживать устанавливаемые подписки.

Читать далее

«Никаких секретов» или Frida для Windows

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

Доброго времени суток! В этой статье будет рассказано, как знание JavaScript и концепций работы современного программного обеспечения могут помочь в reverse engineering, а так же продемонстрировано, как можно использовать тулзу для динамической инструментации для анализа любого ПО на Linux, Windows, Android и iOS.

Читать далее

Роутинг и рендеринг страниц на стороне клиента с помощью History API и динамического импорта

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


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

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

Исходный код на GitHub.

Поиграть к кодом можно на CodeSandbox.

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

  • Мы реализуем один из самых простых вариантов клиентской маршрутизации и рендеринга, парочку более сложных и универсальных (если угодно, масштабируемых) способов можно найти здесь
  • Обойтись совсем без сервера не получится. Мы будет манипулировать историей текущей сессии браузера: при ручной перезагрузке страницы браузер отдает предпочтение серверу, т.е. пытается получить несуществующую страницу, что приводит к печальным последствиям в виде невозможности установить соединение (мои попытки обмануть браузер с помощью сервис-воркера, т.е. проксировать отправляемые им запросы, не увенчались успехом). Единственной задачей нашего примитивного сервера будет ответ в виде index.html на любой запрос. Это позволит браузеру перейти к выполнению клиенского скрипта
  • Везде, где это возможно и уместно, мы будет использовать динамический импорт. Он позволяет загружать только запрашиваемые ресурсы (раньше это можно было реализовать только посредством разделения кода на части (chunks) с помощью сборщиков модулей типа Webpack), что хорошо сказывается на производительности. Использование динамического импорта сделает почти весь наш код асинхронным, что, в целом, тоже неплохо, поскольку позволяет избежать блокировки потока выполнения программы

Итак, поехали.
Читать дальше →

n8n. Автоматизация ИБ со вкусом смузи

Время на прочтение13 мин
Охват и читатели89K
Всем давно очевидна польза тотальной автоматизации, в том числе, и в области информационной безопасности. В условиях большого кадрового дефицита как никогда актуальна идея снятия рутинной рабочей нагрузки как со специалиста по информационной безопасности, так и со специалистов в других областях. 

В компаниях, где отлажены процессы ИБ, а также в центрах реагирования и мониторинга используется ПО, позволяющее автоматизировать принятия решений по возникающим инцидентам, но даже при этом многим до сих пор приходится писать скрипты для автоматизации рутинных операций. Что делать, если автоматизировать рутину вам хочется, но не хочется покупать дорогостоящее специализированное решение, разбираться с ним и потом долго настраивать его под свои нужды? А еще больше не хочется изобретать велосипед со скриптами и делать нечто свое, попутно изучая программирование и работу с БД? 

Источник

TL;DR: Telegram, REST API, Shodan, DNS-over-HTTPS. Пишем бота в Telegram  для парсинга инфы с shodan и поиска эксплойтов на exploit-db. Находим баг в работе n8n. 

Ответ есть – добро пожаловать во фронтенд со смузи и гироскутерами
Читать дальше →

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

WebStorm 2020.3: обновленный интерфейс, поддержка Tailwind CSS и другие улучшения

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

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


ws-2020-3-release-picture

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

Все ли вы знаете о useCallback

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

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

Начиная с версии ReactJS 16.8 в наш обиход вошли хуки.  Этот функционал вызвал много споров, и на это есть свои причины. В данной статье мы рассмотрим одно из самых популярных заблуждений использования хуков и заодно разберемся стоит ли писать компоненты на классах (данная статья является расшифровкой видео).

Read more

Опыт использования транслятора OberonJS для создания редактора интерактивных моделей

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

Занимательное дело — создавать образовательные модели. Приятно видеть, что человек понял что-то, взаимодействуя с твоей программой. Начинал делать модели в Matlab, пробовал использовать Flash и язык ActionScript, пока не узнал про Блэкбокс и Оберон, который идеально лёг на моё представление о том, сколько вообще язык программирования должен занимать в голове у специалиста предметной области. Однако в 21-веке люди просто боятся запускать компилированные приложения, и антивирусы часто дают ложно-положительные срабатывания. Как быть? Для дистрибуции образовательных приложений нужно было использовать браузерные технологии JavaScript и HTML5. В публикации разбирается, как удалось объединить Оберон и HTML5 canvas для создания интерактивных моделей онлайн.

Читать далее

Дайджест свежих материалов из мира фронтенда за последнюю неделю №443 (23 — 29 ноября 2020)

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

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

Индикатор искусственного горизонта на HTML5 canvas

Время на прочтение8 мин
Охват и читатели5K
Ниже будет представлено воплощение средствами HTML5 одной из необычных идей по визуализации пространственного положения управляемого объекта. Код может использоваться в браузерных играх, имитирующих управление транспортным средством в трехмерном пространстве. Способ представления информации ориентирован на симуляторы субтеррин или других фантастических машин.



Назначение и область применения искусственного горизонта


Искусственный горизонт в рассматриваемом здесь узком смысле представляет собой визуализацию наклона объекта относительно местной вертикали, используемую для управления его движением. Наклон определяется значениями двух углов Эйлера, крена и тангажа. Авиационному термину «тангаж» моряки предпочитают синоним «дифферент».
Читать дальше →

Обнаружение лиц в Node.js с использованием Rust и WebAssembly

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

В последней статье мы рассказывали, как вызывать функции Rust из Node.js. Сегодня мы расскажем, как написать приложение AIaaS (англ. Artificial Intelligence as a Service — «искусственный интеллект как услуга») на базе Node.js.

Большинство приложений с искусственным интеллектом сейчас разрабатываются на языке Python, а главным языком программирования для веб-разработки является JavaScript. Для того чтобы реализовать возможности ИИ в вебе, нужно обернуть алгоритмы ИИ в JavaScript, а именно в Node.js.

Однако ни Python, ни JavaScript сами по себе не подходят для разработки ИИ-приложений с большим объемом вычислений. Это высокоуровневые, медленные языки со сложной средой выполнения, в которых удобство использования достигается за счет снижения производительности. Для решения этой проблемы блоки интеллектуальных вычислений в Python оборачиваются в нативные C/C++-модули. Точно так же можно сделать и в Node.js, но мы нашли решение получше — WebAssembly.

Виртуальные машины WebAssembly поддерживают тесную интеграцию с Node.js и другими средами выполнения JavaScript-кода. Они отличаются высокой производительностью, безопасны с точки зрения доступа к памяти, изначально защищены и совместимы с разными операционными системами. В нашем подходе сочетаются лучшие возможности WebAssembly и нативного кода.

Читать далее

Веб-тренажёр Яндекс.Практикума. Как всё устроено

Время на прочтение7 мин
Охват и читатели21K
Образовательный процесс важно делать интересным и по возможности интерактивным. Особенно, когда дело касается технологий — гораздо полезнее, когда есть возможность не просто написать какой-то код, а потом получить ответ от проверяющего, мол, молодец, всё хорошо, а на лету смотреть, всё ли у тебя работает, где косяки и как ты в целом справился.

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



MVP показал себя хорошо, и мы вывели веб-тренажёр на уровень полноценного инструмента для проверки знаний наших студентов в Яндекс.Практикуме. Меня зовут Артем, и я расскажу, как мы делали тренажёр для обучения веб-разработке, как он работает и что умеет.