Обновить
150.69

HTML *

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

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

Трансляция WebRTC-видеопотока из браузера на YouTube Live в 65 строк JavaScript/HTML-кода

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


В данной статье мы расскажем как работают трансляции Youtube Live и покажем как человек с базовыми знаниями JavaScript может закодить трансляцию на Youtube Live с HTML страницы с использованием технологии WebRTC.

Для работы категорически потребуются следующие знания и умения:

1) Базовые знания JavaScript / HTML
2) Умение работать в командной строке Linux.
3) Прямые руки.
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №249 (6 — 12 февраля 2017)

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

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

Пишем самый простой и быстрый input type file

Время на прочтение2 мин
Количество просмотров72K
Доброго времени суток, мой дорогой друг. В сети, да и на Хабре, есть множество статей на тему создания своего input type=«file», но все они отличаются большим количеством костылей и большим количеством кода, что, как мне кажется, не есть хорошо. Ибо, как бы это не было парадоксально, меньше — лучше.


Дайджест свежих материалов из мира фронтенда за последнюю неделю №248 (30 января — 5 февраля 2017)

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

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

Google Chrome Extensions: быстрый переводчик своими руками

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

Недавно заметил, что пусть мой английский не так уж и плох, я всё равно довольно часто отвлекаюсь на перевод отдельных незнакомых слов. И так как мне надоело каждый раз тратить на это свое время я решил написать расширение-переводчик. Можно сказать:
Но такие уже есть!
Да, есть, но, во-первых, я раньше не писал расширения для браузеров и хотел попробовать, во-вторых, создавать что-то самому всегда веселее чем пользоваться готовым. Так что кому это интересно так же как и мне — добро пожаловать под кат.
Читать дальше →

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

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

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

А если без JavaScript?

Время на прочтение3 мин
Количество просмотров72K
В нашем мире без JavaScript никуда! Куча фреймворков, библиотек и прочей радости! jQuery плотно вошел в нашу жизнь. React с Angular пробивают дорогу к светлому будущему. Да и не за горами поддержка браузерами ES6 без Babel.

Но если тема заходит об обычном сайте со стандартным функционалом, не редки случаи, когда JavaScript начинают “злоупотрелять”. И все, в принципе, нормально… Но порой задаешься вопросом: «А если без JavaScript?».

KeepDraw.js — javascript framework для рисования на canvas

Время на прочтение3 мин
Количество просмотров14K
Всем привет. В этой статье речь пойдет о библиотеке для рисования на canvas — KeepDraw.
Это фреймворк для работы с canvas 2d с поддержкой событий и анимации.

Отличительные черты:


  1. API в стиле ООП;
  2. События для мыши, клавиатуры и сенсорных экранов;
  3. Поддержка анимации;
  4. Рисование кривых безье по точкам;
  5. Множество функций, проверяющих пересечения фигур и точек;
  6. Заливка фигур градиентами и изображениями;
  7. Шаблоны объектов — линия, прямоугольник, текст, многоугольник и круг.
  8. Поддержка мобильных устройств.
  9. Сглаживание фигур с использование кривых безье.
  10. Легковесный. Сжатая версия весит 15 килобайт.
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №246 (16 — 22 января 2017)

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

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

Чек-лист вёрстки

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

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

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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №245 (9 — 15 января 2017)

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

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

FPS и пусть ваш код подождет

Время на прочтение8 мин
Количество просмотров19K
Приветствую, уважаемые читатели Хабра. Эта статья про фронтенд, JavaScript и FPS. И сегодня мне хотелось бы поделиться своими мыслями о «слепом» коде, который фактически никак не учитывает производительности среды исполнения. Ну и, конечно, напишем очередной велосипедокостыль — куда без них.

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

Верстка интернет-магазина: список товаров

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


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


Некоторые приемы уже были рассмотрены в различных статьях. Однако у меня возникло желание объединить их и проиллюстрировать отдельными демо. Надеюсь, в таком виде наработки окажутся полезны верстальщикам, которым часто приходится работать над интернет-магазинами.

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

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

Простой шаблонизатор на чистом JS со связями

Время на прочтение4 мин
Количество просмотров14K
В последнее время все чаще требуется максимально быстрая разработка прототипов веб-приложений. Интерфейсы усложняются, требуется отображение огромного количества данных. И вот я озадачился созданием легкого и максимально простого html-шаблонизатора. Кому интересно, что получилось на ~50 строках JS-кода — под кат.
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №244 (2 — 8 января 2017)

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

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

Скорость с доставкой до пользователя

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


Анатолий Орлов ( anatolix ), Денис Нагорнов ( Яндекс )


Анатолий Орлов: Всем привет! Меня зовут Анатолий. Я последние 10 лет работал в Яндексе. В Яндексе я занимался разными вещами, но, так получилось, что на HighLoad я всегда доклады делаю про скорость разного вида. У меня есть содокладчик — Денис Нагорнов, он и сейчас работает в Яндексе и занимается, помимо всего прочего, не поверите, тоже скоростью.

Доклад называется «Скорость с доставкой до пользователя». Как вы знаете, огромное количество компаний пытаются оптимизировать загрузку своих страничек. Некоторые компании так гордятся достигнутыми результатами, что они эти результаты пишут на своих страничках, причем даже не внизу, а вверху.

Например, скриншот с сайта Google:
Читать дальше →

Адаптивный jQuery без window.matchMedia

Время на прочтение3 мин
Количество просмотров23K
Велосипед с электроприводом вместо рейсового автобуса. Хочу поделиться своим методом адаптации скриптов jQuery (сам привык писать скрипты на jQuery, но разницы нет, все описанное верно и для чистого javascript) параллельно адаптации веб-верстки.
Читать дальше →

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

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

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

Как мы звезды рейтинга дробили

Время на прочтение3 мин
Количество просмотров21K
CF Rating

Вместо предисловия


Привет всем хабражителям!
Взбрело мне как-то, холодным зимним вечером, внести на сайт вместо целых звезд рейтинга — их частичную заливку для дробных чисел (4.5, 3.85 и тд.). Так ведь и глазу милее и информативнее — какое заведение лучше, а какое — хуже. Вот и сели мы с командой думать и гадать.
Читать дальше →

Видео-курс «Основы HTML» — в помощь преподавателю информатики

Время на прочтение1 мин
Количество просмотров4.1K
Мы сняли видео-курс «Основы HTML». Он простой и увлекательный, включает раздел теории и довольно прикольной практики (про это ниже).

Перед тем, как объяснять тонкости языка разметки гипертекста, новичкам нужно сначала объяснить, что такое гипертекст и чем он отличается от обычного текста. В общем-то, гипертекст как идею придумали в 1960х, а сегодня даже трёхлетние дети не задумываюсь клацают по ссылкам на iPad. Смело можно сказать, что гипертекст — это будущее сегодня.

Вот одно из первых видео курса по HTML:



Курс состоит из 2 больших разделов — в первом рассказывается, что такое теги и какие они вообще бывают: форматирование текста, картинки, таблицы и формы. А также, что такое «валидность» документа, как это проверить и главное зачем. Даже на HTML-entities отведено одно занятие.
Читать дальше →