Все потоки
Поиск
Написать публикацию
Обновить
75.13

HTML *

Стандартный язык разметки web-страниц

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

Обзор возможностей PlayCanvas для создания Web VR приложений

Время на прочтение7 мин
Количество просмотров5.6K


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

От парсера афиши театра на Python до Telegram-бота. Часть 2

Время на прочтение8 мин
Количество просмотров17K


Продолжаем историю о разработке Telegram-бота для поиска билетов — HappyTicketsBot, начало можно почитать в первой части.

Во второй расскажу о самом боте, поделюсь кодом, а также идеями, которым скорее всего не суждено стать реальностью. Большая часть функционала к моменту создания бота уже была написана в формате скрипта, поэтому основной задачей стояло наладить интерфейс взаимодействия с пользователем через Telegram-messenger. Получилось не так болтологически, как в 1й части, так что attention — много кода.

Спойлер: HappyTicketsBot так и не улетел крутиться на иностранный сервер, он локальный и русский, но однажды запуск (верю) состоится =)

UPDATE: После расшаривания бота среди театральной публики о нем написали в СМИ. Резко нахлынул поток пользователей. Через пару дней игры «подними сразу, как упало» бот и на сервер улетел, и пережил ряд улучшений. Я довольна=)
Читать дальше →

Инструменты для создания адаптивного сайта без доступа к сайту

Время на прочтение4 мин
Количество просмотров11K
Есть сайт у которого нет мобильной версии, и нужно с минимальными затратами времени сделать мобильным пользователям этот сайт приятнее в использовании.

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

Можно пойти обычным путем – скопировать сайт и доработать его на своей машине, или же писать все прямо на работающий сайт (так лучше не делать).



Тут на помощь приходят юзерскрипты, livereload, sass или другие препроцессоры. С этим набором время адаптирования сайта сокращается в несколько раз.

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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №357 (18 — 24 марта 2019)

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


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

Обзор курсов по веб разработке

Время на прочтение5 мин
Количество просмотров95K

В заметке я расскажу о моем опыте прохождения курсов по web разработка в школах: специалист, loft school, html academy, learn.javascript.ru. Эта заметка будет интересная всем, кто интересуется веб разработкой и всерьез думает сделать это своей работой. Подобные мысли заняли меня 2 года назад. Тогда я работал инженером. Сейчас я работаю frontend разработчиком в банке, поддержка ветхого сайта на битрикс и разработка нового на react, так что обучение не прошло даром. Мне периодически задают вопросы, где можно поучиться веб разработке и с чего начать, по этому я решил систематизировать свой опыт.


Итак, я решил, что курсы с четким планом обучения, заданиями и проверкой со стороны преподавателя (наставника) это самый короткий путь к мой цели, так и вышло. Но пройденные курсы сильно различались, а проходил я их специально в разных школах.

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

Искусство парсинга 2 или транслитерация собственной разметки

Время на прочтение39 мин
Количество просмотров6.9K

+БОНУС: взаимное включение классов друг в друга в C++


Привет, Хабр! Эта статья — прямое продолжение статьи Искусство парсинга или DOM собственными руками, где мы разобрали HTML-документ и построили на его основе абстрактное синтаксическое дерево (AST) с доступом к любому элементу через индексацию при помощи лишь стандартной библиотеки C++, проще говоря, научились самостоятельно парсить XML-подобные штуки. Напомню, что процесс парсинга, или синтаксического анализа/разбора состоит из двух этапов: лексического разбора (разбора текста на токены) и построения AST. Если первый мы рассмотрели очень подробно, с примерами и исходниками, то описание второго похоже на пустую куколку бабочки, у которой есть только оболочка, а прекрасное содержимое автор извлёк перед публикацией. На то была причина, для HTML построить дерево действительно просто, нужно всего 4 класса: пустой тег, блок, текстовый узел и корень документа, наследуемый от блока. Сегодня мы оставим такую простоту позади и построим дерево, где свойства элементов, и пустых, и блочных, будут содержаться не в атрибутах тегов, а непосредственно в классах, а для этого классов придётся создать много. Действительно много. Строить будем не из простых известных языков разметки, а создадим свой, с правилами, показанными на изображении под катом. Плюс в конце ещё переведём, или, говоря правильнее, транслитируем документ с предыдущей статьёй, размеченной нашим языком, в HTML, а в качестве бонуса я отвечу начинающим программистам C++ на тривиальный, но труднонаходимый вопрос: как включать классы «друг в друга»?
Читать дальше →

От парсера афиши театра на Python до Telegram-бота. Часть 1

Время на прочтение6 мин
Количество просмотров24K


Я очень люблю оперу и балет, но не очень — отдавать большие деньги за билеты. Ежедневный просмотр сайта театра с тыканьем в каждую кнопку ужасно утомлял, а внезапно появлявшиеся билеты по 170 рублей на супер-составы бередили душу.
Чтобы автоматизировать это дело появился скриптик, который бежит по афише и собирает информацию о самых дешевых билетах на выбранный месяц. Запросы из серии «выдай список всех опер в марте на старой и новой сцене до 1000 рублей». Подруга обронила «а ты не Telegram-бота делаешь?». Такого в плане не было, но почему бы и нет. Бот родился, хоть и крутился на домашнем ноутбуке.
Потом Telegram заблокировали. Мысль запулить бота на рабочий сервер растаяла, да и интерес, чтобы довести функционал до ума, угас. Под катом рассказываю о судьбе сыщика дешевых билетов с самого начала и о том, что с ним сталось после года использования.
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №356 (11 — 17 марта 2019)

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


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

Sketch + Node.js: генерируем иконки для множества платформ и брендов. Часть 2

Время на прочтение16 мин
Количество просмотров4.9K


Это вторая часть статьи о создании инструмента, способного экспортировать все помещённые в Sketch-файл иконки: в разных форматах, для разных платформ, с возможностью A/B-тестирования каждой из иконок.

Первую часть вы можете прочесть по ссылке.



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

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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №355 (4 — 10 марта 2019)

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


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

Как я создавал Recycle! VR

Время на прочтение8 мин
Количество просмотров3.4K


В предыдущей статье мы попробовали создать базовую сцену в A-Frame, чтобы опробовать основные концепции фреймворка на практике. В этой статье я хотел бы поделится своим опытом создания игры на A-Frame — Recycle! VR. Репозиторий проекта доступен по следующей ссылке.

Переработка!?


Идея создания игры пришла почти сразу как только я узнал о Web VR. Хотя в целом, я считаю, что игры в веб в любом случае будут уступать хорошим проектам даже для мобильных устройств, не говоря уже о персональных компьютерах и консолях. Но, как мне кажется, игра самое сложное испытание. Я начал думать о том, что конкретно я могу сделать. Я наблюдал за другими проектами и мне сразу бросилась в глаза возможность брать что-то с помощью контроллера. А так как я уже довольно длительное время связан с организацией которая занимается раздельным сбором мусора, ответ пришел сам собой. Переработка. Мы берем мусор и бросаем его в корзину. Что может быть проще. Но все оказалось не так просто, об этом, собственно, и пойдет речь далее.
Читать дальше →

Веб-компоненты в реальном мире

Время на прочтение8 мин
Количество просмотров32K

Photo by NeONBRAND


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


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

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

Искусство парсинга или DOM своими руками

Время на прочтение14 мин
Количество просмотров16K
Привет, Хабр! Недавно я задался идеей создать простой язык разметки наподобие markdown, который отлично подходил бы для моих задач, а именно — быстрого написания лекций с форматированием и возможностью вставки математических формул «на лету», с применением одной лишь клавиатуры. Чтобы перевести текст, написанный в таком формате, в более понятную форму, например, документ LibreOffice Writer, нужен синтаксический анализатор, проще говоря — парсер. Поскольку я привык делать велосипеды, то направился в поисковые системы с запросами «parser example», «html to DOM», «how to parse html» и др. К моему разочарованию, на всех найденных ресурсах либо приводились элементарные примеры типа калькулятора Страуструпа с рекурсивным спуском, либо использовались готовые решения, такие как flex, bison, llvm и yacc. Библиотек, предназначенных для парсинга строго определённых языков, нашлось ещё больше (gumbo, jsoup, rapidjson, инструменты Qt и др.) Ни то, ни другое не входило в мои планы по написанию парсера своей разметки на C++ с использованием лишь стандартной библиотеки, поэтому моим источником знаний об искусстве парсинга вместо электронных ресурсов стали методички технических институтов. О том, как взять текст и построить из него AST (абстрактное синтаксическое дерево), о некоторых подводных камнях, на которые я натыкался в процессе, о возможных ошибках я сегодня и расскажу.

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

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

Кастомизируем select на чистом css

Время на прочтение4 мин
Количество просмотров99K
Как-то вечером я убивал время, читая статьи в интернете, и наткнулся на вот этот хабропост пользователя Cyapa, где расписано, как кастомизировать select на чистом css. В процессе просмотра данного решения нашел несколько весьма неудобных моментов, которые постарался исправить в своем решении этой задачи. Итак, приступим.
Читать дальше →

Новый кодек AV1: ускоряем загрузку видео в браузере

Время на прочтение6 мин
Количество просмотров100K
В этом руководстве мы научимся использовать видео в Вебе, как это принято в 2019. Chrome и Firefox начали поддерживать новый кодек AV1 — для них видео можно сделать в два раза меньше.

Отдельно поговорим, как заменить GIF на видео в AV1 и H.264 — тогда его размер упадёт в 20-40 раз.

AV1 в браузере

YouTube уже использует его в TestTube. Netflix заявил, что AV1 будет «их основным кодеком следующего поколения».

Мы в Злых Марсианах уже используем его на нашем сайте и на Ампллифере. В этой статье я поделюсь опытом внедрения AV1 и шаг-за-шагом расскажу, как вставить видео, чтобы оно работало во всех браузерах.
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №354 (25 февраля — 3 марта 2019)

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


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

Wolfensteiny 3D — реверс-инжиниринг 251 байтов JavaScript

Время на прочтение5 мин
Количество просмотров17K
При написании кода многие не задумываются ни о чем, кроме логики самой программы. Меньшее число людей думают об оптимизации кода по времени, по памяти. Но лишь единицы доходят до последнего уровня — сжатии программы до рекордно маленького размера.

Посмотрите, например, на результат работы всего 251 байта JavaScript:


Ну, давайте разбираться, как это работает!
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №353 (17 — 24 февраля 2019)

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


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

AMP и Турбо-страницы: плюсы, минусы и результаты внедрения

Время на прочтение8 мин
Количество просмотров28K
Те, кто следит за новинками сферы IT, знают про “быстрые страницы” от Google и Яндекс: AMP и Турбо-страницы. Они были выпущены больше 2 лет назад, но особого шума на рынке не произвели.Меня зовут Константин. Я директор веб-студии AlkoDesign. Мы решили напомнить об этих инструментах и поделиться результатами их внедрения.

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

Создаем базовую сцену в A-Frame

Время на прочтение13 мин
Количество просмотров11K


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

Давайте сделаем базовую сцену в A-Frame, чтобы понять как фреймворк работает. Нам потребуется начальное понимание HTML. В ходе этого урока мы выучим:

  • как добавлять 3D объекты с помощью примитивов;
  • как трансформировать объекты в 3-х мерном пространстве с помощью, перемещений, поворотов и масштабирования;
  • как добавить окружение;
  • как добавить текстуры;
  • как добавить базовую интерактивность с помощью событий и анимации;
  • как добавить текст.

Поиграть с кодом можно тут
Читать дальше →