На сайте React'a есть туториал, в котором описывается разработка игры Tic Tac Toe. Я решил повторить разработку этой игры на Svelte. Статья охватывает только первую половину туториала, до реализации истории ходов. Для целей ознакомления с фреймворком этого вполне достаточно. Каждый раздел статьи соответствует разделу туториала, содержит ссылки на исходный код обоих фреймворков.
Рубрика «javascript» - 104
Сравнение: Svelte и React
2019-06-17 в 17:32, admin, рубрики: javascript, React, ReactJS, svelte, Веб-разработка, Программирование, Разработка веб-сайтовПравила выбора JS-фреймворка
2019-06-17 в 14:04, admin, рубрики: effcetor, html, isomorphic, javascript, ReactJS, RiotJS, Universal, universal-router, Клиентская оптимизация, Разработка веб-сайтовTL;DR
- В статье не рассматриваются JS-фреймвёрки из списка TOP-3
- При разработке на JS-фреймвёрке не из списка TOP-3 приходится решать на порядок больше технических вопросов, чем это ожидается в начале разработки
- История основана на реальных событиях
Приключения неуловимой малвари, часть 1
2019-06-17 в 13:01, admin, рубрики: fireless malware, javascript, powershell, visual basic, Блог компании Varonis Systems, информационная безопасность, макросы
Этой статьей мы начинаем серию публикаций о неуловимых малвари. Программы для взлома, не оставляющие следов атаки, известные также как fileless («бестелесные», невидимые, безфайловые), как правило, используют PowerShell на системах Windows, чтобы скрытно выполнять команды для поиска и извлечения ценного контента. Обнаружить хакерскую деятельность без вредоносных файлов — сложно выполнимая задача, т.к. антивирусы и многие другие системы обнаружения работают на основе сигнатурного анализа. Но хорошая новость состоит в том, что такое ПО все же существует. Например, UBA-системы, способные обнаружить вредоносную активность в файловых системах.
Читать полностью »
Которая родилась в процессе изучения кошмаров LexicalEnvironment и вообще ликбеза на тему "Почему оно работает так".
Задача получилась действительно из серии wtfjs, но после внимательного рассмотрения — полностью укладывается в логику работы языка.
Коллаборация и автоматизация во фронтенде. Чему мы научились за 13 школ
2019-06-17 в 11:57, admin, рубрики: FrontEnd Development, html css javascript, javascript, Блог компании Яндекс, интерфейсы, обучение программированию, разработка сайтов, Учебный процесс в IT, фронтендВсем привет. Коллеги недавно писали в этом блоге, что открылась регистрация в следующую Школу разработки интерфейсов в Москве. Я очень рад новому набору, ведь я был одним из тех, кто придумал Школу в 2012 году, и с тех пор постоянно ей занимаюсь. Она эволюционировала. Из неё вышло целое мини-поколение разработчиков с широчайшим кругозором и способностью взять на себя в проектах вообще всё, что связано с фронтендом. Кто-то из выпускников работает в Яндексе, кто-то нет.
ШРИ — как сервис: тоже требует разных форматов взаимодействия, автоматизации и экспериментов. Вот об этом и поговорим сегодня на Хабре. Будут и полезные ссылки для кандидатов.
История четырёхкратного ускорения React-приложения
2019-06-17 в 9:30, admin, рубрики: javascript, React, ReactJS, Блог компании RUVDS.com, разработка, Разработка веб-сайтовПочти 60% посетителей сайта покидают его в том случае, если его загрузка занимает более 3 секунд. 80% таких посетителей на сайт уже не возвращается. Это говорит о том, что успех веб-проекта не в последнюю очередь зависит от его скорости. Автор материала, перевод которого мы сегодня публикуем, хочет рассказать о методиках повышения производительности React-приложений.
Результаты оптимизации приложения
Читать полностью »
Почему [‘1’, ‘7’, ’11’].map(parseInt) возвращает [1, NaN, 3] в Javascript?
2019-06-17 в 7:30, admin, рубрики: javascript, map, parseInt, Занимательные задачки, Программирование![Почему ['1', '7', '11'].map(parseInt) возвращает [1, NaN, 3] в Javascript? - 1](https://www.pvsm.ru/images/2019/06/17/pochemu-'1'-'7'-'11'-map-parseInt-vozvrashaet-1-NaN-3-v-Javascript.png "Почему ['1', '7', '11'].map(parseInt) возвращает [1, NaN, 3] в Javascript? - 1")
Javascript — странный. Не верите? Ну попробуйте тогда преобразовать массив строк в целые числа с помощью map и parseInt. Запустите консоль (F12 на Chrome), вставьте код ниже и нажмите Enter
['1', '7', '11'].map(parseInt);Вместо ожидаемого массива целых чисел [1, 7, 11] мы получаем [1, NaN, 3]. Но как так? Чтобы узнать в чём тут дело, сначала нам придётся поговорить о некоторых базовых концепциях Javascript. Если вам нужен TL;DR, пролистывайте статью до самого конца.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №369 (10 — 16 июня 2019)
2019-06-16 в 20:17, admin, рубрики: angular, css, ES6, html, html5, javascript, JS, React, vue, браузеры, дайджест, подкасты, Разработка веб-сайтов, ссылки, фронтендПредлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
MAM: сборка фронтенда без боли
2019-06-16 в 15:49, admin, рубрики: $mol, build system, cyclic references, dependencies, javascript, mam, modular system, TypeScript, versioning, Разработка веб-сайтов, системы сборкиЗдравствуйте, меня зовут Дмитрий Карловский, и я… обожаю MAM. MАМ управляет Агностик Модулями, избавляя меня от львиной доли рутины.
Агностик Модуль, в отличие от традиционного, это не файл с исходником, а директория, внутри которой могут быть исходники на самых разных языках: программная логика на JS/TS, тесты к ней на TS/JS, композиция компонент на view.tree, стили на CSS, локализация в locale=*.json, картинки и тд, и тп. При желании не сложно прикрутить поддержку любого другого языка. Например, Stylus для написания стилей, или HTML для описания шаблонов.
Зависимости между модулями трекаются автоматически путём анализа исходников. Если модуль включается, то включается целиком — каждый исходник модуля транспилируется и попадает в соответствующий бандл: скрипты — отдельно, стили — отдельно, тесты — отдельно. Для разных платформ — свои бандлы: для ноды — свои, для браузера — свои.
Полная автоматизация, отсутствие конфигурирования и бойлерплейта, минимальные размеры бандлов, автоматическое выкачивание зависимостей, разработка сотен отчуждаемых библиотек и приложений в одной кодовой базе без боли и страданий. Ух какая наркомания! Уберите от мониторов беременных, слабонервных, детей и добро пожаловать на подводную лодку!
Как я отлавливал стили :before для фокус-элемента
2019-06-16 в 9:21, admin, рубрики: :before, css, javascript, отладкаСегодня столкнулся с интересной задачкой, которая заставила меня узнать больше об отладке в хроме. Хочу поделиться с вами (вдруг кто не знал). Возникшая проблемка не сложная, но оказалась не особо тривиальная.
В общем, сижу натягиваю стороннюю верстку готовую на сайт (этот момент важен, так как проблема залетела оттуда и я не был к этому готов). И на странице собирался ввести текст в спан редактируемый, который с атрибутом contenteditable=true. И вот сто раз так делал и все ОК было, а тут раз, два, и ничего не получается… И визуально элемент измененный в состоянии :focus. Ну, думаю, что-то со стилями, сейчас быстро найду, dev-tools в помощь. Расчехлил dev-tools и… и ничего не нашел… Странно. Открыл в другой вкладке другой сайт с таким же функционалом, там все работает, давай вложенность и стили сравнивать. Один-в-один.
В принципе, в заголовке написано с чем я столкнулся, но если вам нужны детали и решение, прошу под кат, там не будет много буков, а в короткое видео и чуть-чуть текста.
Читать полностью »