Недавно на Хабре появилась статья от @sanReal, где Александр рассказал о том, каким приёмам и каким возможностям Svelte он научился на собственном опыте. Я был немного удивлён не увидев в его списке упоминания одного из самых мощных инструментов фреймворка — Действий. К тому же, общаясь с людьми в сообществе @sveltejs, которые уже создают очень хорошие приложения при помощи Svelte, я иногда замечаю, что не все пользуются Действиями даже там, где их применение идеально решало бы задачу. В этой статье я расскажу, что такое Действия и на простейших примерах покажу их применение.
Рубрика «javascript» - 58
Svelte: знакомимся с Действиями
2020-02-03 в 6:06, admin, рубрики: actions, javascript, svelte, SvelteJs, действия, Разработка веб-сайтовДайджест свежих материалов из мира фронтенда за последнюю неделю №400 (27 января — 2 февраля 2020)
2020-02-02 в 21:17, admin, рубрики: angular, css, ES6, html, html5, javascript, JS, React, vue, браузеры, дайджест, Разработка веб-сайтов, ссылки, фронтендПредлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Нет, динамические системы типов по своей сути не более открыты
2020-02-02 в 18:09, admin, рубрики: haskell, java, javascript, динамическая типизация, никто не читает теги, Программирование, Совершенный код, статическая типизацияСвященные войны в интернете о системах типов по-прежнему страдают от распространенного мифа о том, что динамические системы типов по своей природе лучше подходят для моделирования предметных областей «открытого мира». Обычно аргумент звучит так: цель статической типизации состоит в том, чтобы как можно более точно зафиксировать все сущности, однако в реальном мире это просто неудобно. Реальные системы должны быть слабо связаны и должны как можно меньше быть завязаны на представление данных, поэтому динамическая типизация приводит к более устойчивой системе в целом.
Создаем генератор адаптивной галереи изображений со встроенным слайдером
2020-02-02 в 5:55, admin, рубрики: gallery, javascript, slider, галерея, Программирование, разработка, Разработка веб-сайтов, слайдер
Доброго времени суток, друзья!
Вместо введения (постановка задачи)
Все началось с изучения чужих слайдеров (готовых решений в сети, типа bxslider, owlcarousel и slick). Когда-нибудь я напишу подробные руководства по работе с этими инструментами (sweet dreams). Появилось желание написать свой слайдер. Однако вскоре (в том числе, после прочтения нескольких статей на Хабре) пришло осознание, что просто слайдер — это для слабаков. Нужно что-то более радикальное.
В итоге придумал себе такую задачу: написать генератор адаптивной галереи со встроенным слайдером.
Условия:
- Возможность загружать любое количество изображений (из любого места на жестком диске).
- Галерея состоит из загруженных изображений, разметка формируется «на лету» с соблюдением семантики HTML5.
- Галерея одинаково хорошо смотрится на экранах с различным разрешением.
- При клике на любом изображении генерируется слайдер.
- При генерации слайдера затемняется фон.
- Изображение, по которому кликнули — первый слайд.
- Переключение слайдов реализовано через DOM.
- Слайды переключаются плавно.
- Возможность управлять переключением слайдов с помощью кнопок и клавиатуры.
- Возможность вернуться к галерее при клике на текущем слайде и кнопке, а также с помощью клавиатуры.
- Возможность получить готовый код.
- Чистый JavaScript (вся разметка через JS).
- Минимум кода.
Итак, поехали (как сказал Гагарин, отправляясь в космос).
Читать полностью »
Дайджест материалов сообщества Svelte (16.01 — 01.02)
2020-02-02 в 4:21, admin, рубрики: digest, javascript, links, svelte, SvelteJs, Разработка веб-сайтовСегодня мы начинаем делиться с вами наиболее заметными материалами сообщества Svelte. Приятного чтения!
Веб-компоненты и открытые стандарты
2020-02-01 в 9:47, admin, рубрики: Google, IT-стандарты, javascript, Разработка веб-сайтов, рассуждения, что делать
Если спросить разработчиков, почему они выбрали веб-компоненты для своего проекта, довольно часто можно услышать такие аргументы
- Это веб-стандарт, сделанный открытым сообществом, а не какой-то частной компанией
- Веб-стандарты не ломают обратную совместимость, не придется переживать за свой код в будущем
- Все современные браузеры придерживаются стандарта в своем поведении, меньше сюрпризов на кросс-браузерном тестировании
Аргументы выглядят логичными и справедливыми в обычной ситуации, но в случае веб-компонентов есть нюансы, которые я попробую раскрыть в этой статье.
Игра, управляемая лицом, в масках Инстаграм, или двойной клик глазами
2020-01-31 в 20:08, admin, рубрики: AR, Instagram, javascript, spark ar, дополненная реальность, игры для instagram, игры для мобильных устройств, крестики-нолики, продвижение игр, разработка игр, Разработка под AR и VR, социальные сети, Социальные сети и сообщества
Что за бред, подумаете вы. Что за бессмысленный набор слов? Но, увы или ура — кому как, сегодня это уже не бред, а реальность. Речь в статье пойдет о написанной мной для Инстаграм игре, в которой в качестве контроллера используется ваше лицо, а точнее, не только оно, но иногда и вся голова. Перемещение по игровому полю производится посредством поворота и наклона головы, а выбор действия — открытием рта либо двойным «кликом» (морганием) глазами. Double blink, наверно, стоило бы его назвать…
О дивный новый мир! Вероятно, хипстеры будущего займутся разработкой скриптов для генерации красивого разноцветного дыма за своими легковыми космическими капсулами или написанием шейдеров для придания интересных визуальных эффектов черным вратам персонального телепорта, типа падающих снежинок (Web 100.0) или фрактального тумана (WebGL 100.0) или… Нет, пожалуй, у меня не хватит фантазии представить себе, какой ерундой можно было бы заняться в будущем: я пытаюсь мыслить слишком логично. Но лет 30 назад мы точно, ни в каком сне, ни при каких условиях не смогли бы даже подумать, что сегодня мы будем создавать маски для социальной сети под названием Инстаграм. И более того — что внутри этих масок появятся полноценные игры. Мне стало страшно и интересно. В общем, страшно интересно. И, как вы уже поняли, я не удержался и тоже написал такую игру. Разумеется, для того, чтобы поиграть в нее, у вас должен быть смартфон на Android или iOS с фронтальной камерой и установленным приложением Инстаграм.
Читать полностью »
Знакомимся с Web Animations API
2020-01-31 в 14:08, admin, рубрики: animation, css, html, javascript, анимация
Доброго времени суток, друзья!
Представляю Вашему вниманию перевод статьи Charlie Gerard «Exploring the Web Animations API».
Знакомимся с Web Animations API
Веб API постоянно эволюционируют. Некоторые из них, такие как Console или Canvas, хорошо поддерживаются всеми браузерами, другие по-прежнему находятся на стадии разработки.
Одним из API, находящимся на стадии разработки, является Web Animations API или WAAPI. Несмотря на то, что первый вариант спецификации был опубликован в 2012 году, а сам API впервые реализован в браузерах Firefox и Chrome в 2014 году, я узнала о нем совсем недавно (я тоже раньше о нем не слышал — прим.пер.).
Он позволяет разработчикам работать с CSS анимацией средствами JavaScript. Его синтаксис похож на синтаксис традиционной CSS анимации, но имеет некоторые особенности, которые облегчают разработчикам создание и изменение анимации.
Давайте рассмотрим этот API на простом примере.
Читать полностью »
Dagaz: Сумма технологий
2020-01-31 в 13:06, admin, рубрики: AI, Board Games, chess, Dagaz, javascript, логические игры, разработка игр
Итак, технологии интересуют меня, так сказать, по необходимости: потому что всякая цивилизация включает и то, к чему общество стремилось, и то, чего никто не замышлял.
Порой, и довольно часто, путь технологии открывал случай: искали же когда-то философский камень, а нашли фарфор.
Станислав Лем.
С самого начала работы над проектом, было понятно, что качественный AI мне жизненно необходим! Самому с собой играть скучно, а модуль для игры по сети — он неизвестно когда ещё будет. Я пытался писать ботов сам, но все они работали либо плохо, либо плохо и медленно. В конце концов, я устал заниматься этой самодеятельностью и нашёл шахматного бота, качество игры которого меня вполне устраивало. Но тут возникла проблема. Мне-то были нужны не только Шахматы. Тому, как я с этим боролся, и посвящена эта статья.
Читать полностью »
Как мигрировать с mocha на jest в 14 простых шагов — и зачем
2020-01-31 в 11:25, admin, рубрики: javascript, node.js, тестирование, Тестирование веб-сервисов
Уже давно я заглядывался на фреймворк для тестирования jest, в котором есть огромное количество всяких вкусных фишек, одна из которых — многопоточное выполнение тестов. При условии того, что у меня был проект на 5000 юнит тестов, миграция обещала быть крайне полезной. Далее я расскажу 14 простых шагов, за которых мне удалось мигрировать — пусть и с некоторыми оговорками — и что мы в результате получили. Спойлер — всё получилось очень круто.Читать полностью »