Дайджест свежих материалов из мира фронтенда за последнюю неделю №251 (20 — 26 февраля 2017)
4 мин
Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.
Emoji.prototype.length — рассказ об эмоциональных символах в Юникоде
7 мин
Хабр довольно враждебно настроен к Эмодзи (здесь они просто не отображаются), считая их чем-то вроде «падонкаффского» языка. Не для серьёзных людей. Ведь и то и другое появилось примерно в одно время. И если «олбанский» йезыг быстро ушёл в небытие, то Эмодзи эволюционировали от простых точек с запятой и скобочек до полноправных символов в кодировке Юникод. Автор данной статьи предлагает посмотреть, что у этих маленьких сущностей «под капотом» (Здесь и далее курсивом — примечания переводчика).
Оригинальная статья написана для сайта Contentful Стефаном Джудисом (Twitter, GitHub).
Эмодзи – это основа текстового общения наших дней. Без этих маленьких символов, много бесед в чатах сегодня занчивались бы неловким молчанием или недопониманием. Я всё ещё помню старые добрые времена, когда СМС-ки были крутой штукой.
Предложение пообщаться в чате без смайликов скорее всего приведёт к сообщению «Ты что шутишь?». Все быстро поняли, что юмор и сарказм (кстати, нам бы не помешало быть менее саркастичными) не просто передать, используя лишь письменные знаки. В какой-то момент возник первый Эмодзи, и они быстро стали одним из фундаментальных компонентов любой беседы в текстовом формате.
Хоть я и использую Эмодзи каждый день, я никогда не задавался вопросом, как же они работают. Очевидно, что они каким-то образом связаны с Юникодом, но я и понятия не имел, что там творится под капотом. И мне, честно говоря, было всё равно.
Всё поменялось, когда я набрёл на твит Веса Боса (Wes Bos), в котором он показал несколько JavaScript-операций над строкой, содержащей семью Эмодзи.
Оригинальная статья написана для сайта Contentful Стефаном Джудисом (Twitter, GitHub).
Эмодзи – это основа текстового общения наших дней. Без этих маленьких символов, много бесед в чатах сегодня занчивались бы неловким молчанием или недопониманием. Я всё ещё помню старые добрые времена, когда СМС-ки были крутой штукой.
Предложение пообщаться в чате без смайликов скорее всего приведёт к сообщению «Ты что шутишь?». Все быстро поняли, что юмор и сарказм (кстати, нам бы не помешало быть менее саркастичными) не просто передать, используя лишь письменные знаки. В какой-то момент возник первый Эмодзи, и они быстро стали одним из фундаментальных компонентов любой беседы в текстовом формате.
Хоть я и использую Эмодзи каждый день, я никогда не задавался вопросом, как же они работают. Очевидно, что они каким-то образом связаны с Юникодом, но я и понятия не имел, что там творится под капотом. И мне, честно говоря, было всё равно.
Всё поменялось, когда я набрёл на твит Веса Боса (Wes Bos), в котором он показал несколько JavaScript-операций над строкой, содержащей семью Эмодзи.
Как разработать кросс-платформенное приложение с помощью одной лишь разметки JSON
8 мин
Перевод
Последние несколько месяцев я работаю над новым способом создания кросс-платформенных приложений для Android и iOS под названием Jasonette. Он позволяет написать приложение от начала до конца, используя только разметку JSON.
Если ваше приложение целиком написано через разметку JSON, с ним можно обращаться, как с любыми другими данными, а также удаленно обслуживать его по требованию из облака.
Больше нет необходимости в том, чтобы приложение было захардкорено на девайсе, Вы можете обновлять его по желанию посредством обновления разметки JSON на серверной стороне. При каждом запуске ваше приложение будет заново загружаться с сервера.
Если ваше приложение целиком написано через разметку JSON, с ним можно обращаться, как с любыми другими данными, а также удаленно обслуживать его по требованию из облака.
Больше нет необходимости в том, чтобы приложение было захардкорено на девайсе, Вы можете обновлять его по желанию посредством обновления разметки JSON на серверной стороне. При каждом запуске ваше приложение будет заново загружаться с сервера.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №250 (13 — 19 февраля 2017)
4 мин
Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.
$mol_app_bench: готовим JS бенчмарки быстро и просто
13 мин
Здравствуйте, меня зовут Дмитрий Карловский и я… тот ещё гурман. Мне нравится готовить изысканные блюда, которые элегантно и просто решают привычные уже набившие оскомину проблемы. Можно долго рассказывать о преимуществах тех или иных подходов, удешевлении поддержки, ускорении разработки, упрощения отладки, но всё это остаётся достаточно субъективными оценками, над которыми нужно размышлять. Поэтому рано или поздно (но как правило преждевременно), всё обсуждение скатывается к более-менее измеримым величинам — скорости работы, скорости загрузки и прочим скоростям. И мало того, что нужно сделать несколько реализаций на разных технологиях, чтобы было что сравнивать, так ещё и не плохо было бы нарисовать интерфейс с понятной человеку выдачей результатов. А всё это — время, которого всегда не хватает, особенно, если делать хорошо.
Чтобы упростить разработку бенчмарков мы выделили общую их часть в отдельное приложение, которое рисует весь интерфейс от выбора тестируемых вариантов до наглядного представления результатов, а вариативная часть подключается извне и реализует довольно простой интерфейс. Всё "накликанное" состояние сохраняется в ссылке, так что им легко поделиться с другими гурманами. Кроме того, поддерживается локализация и сортировка результатов по разным критериям — настоящий пир для всех любителей быстрой еды.
Далее вы узнаете:
- Как замутить свой бенчмарк, практически не прилагая усилий.
- Как запилить что-то по сложнее, с загрузкой целых приложений в отдельных фреймах.
- Как устроен $mol_app_bench изнутри.
- Как теперь жить-то со всем этим.
Wordpress + CloudFlare – свежий переезд на https
3 мин
Туториал
Давно перевожу все сайты на https. На днях опять встала задача переноса очередного сайта на Wordpress. Пишу по свежей памяти актуальную инструкцию по переезду.
Знакомство с Styled components
4 мин
Перевод
Предлагаем вашему вниманию перевод свежей ознакомительной статьи Cаши Грифа (Sacha Greif), соавтора книги «Discover Meteor», о специфике работы с библиотекой Styled components.
«СSS – странная штука. Его основам можно обучиться за 15 минут, но на то, чтобы найти хороший способ организации стилей, могут уйти годы.
Отчасти это объясняется особенностями самого языка. В своем исходном виде CSS довольно ограничен — никаких переменных, циклов или функций. В то же время, он развязывает вам руки, обеспечивая возможность задавать стиль элементам, классам, ID или любым их комбинациям.
«СSS – странная штука. Его основам можно обучиться за 15 минут, но на то, чтобы найти хороший способ организации стилей, могут уйти годы.
Отчасти это объясняется особенностями самого языка. В своем исходном виде CSS довольно ограничен — никаких переменных, циклов или функций. В то же время, он развязывает вам руки, обеспечивая возможность задавать стиль элементам, классам, ID или любым их комбинациям.
Новая сетка на inline-block: описание, пример использования, плюсы и минусы
7 мин
Для современной верстки использование сетки не новость. Практически все html-фреймвоки используют ту или иную сетку. Я встречала 3 вида сетки:
Сетка на inline-block имеет свои особенности, плюсы и минусы, которые следует рассмотреть.
- сетка на float;
- сетка на inline-block;
- сетка на flexbox.
Сетка на inline-block имеет свои особенности, плюсы и минусы, которые следует рассмотреть.
Трансляция WebRTC-видеопотока из браузера на YouTube Live в 65 строк JavaScript/HTML-кода
11 мин
В данной статье мы расскажем как работают трансляции Youtube Live и покажем как человек с базовыми знаниями JavaScript может закодить трансляцию на Youtube Live с HTML страницы с использованием технологии WebRTC.
Для работы категорически потребуются следующие знания и умения:
1) Базовые знания JavaScript / HTML
2) Умение работать в командной строке Linux.
3) Прямые руки.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №249 (6 — 12 февраля 2017)
3 мин
Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.
Пишем самый простой и быстрый input type file
2 мин
Доброго времени суток, мой дорогой друг. В сети, да и на Хабре, есть множество статей на тему создания своего input type=«file», но все они отличаются большим количеством костылей и большим количеством кода, что, как мне кажется, не есть хорошо. Ибо, как бы это не было парадоксально, меньше — лучше.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №248 (30 января — 5 февраля 2017)
4 мин
Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.
Google Chrome Extensions: быстрый переводчик своими руками
7 мин
Туториал
Недавно заметил, что пусть мой английский не так уж и плох, я всё равно довольно часто отвлекаюсь на перевод отдельных незнакомых слов. И так как мне надоело каждый раз тратить на это свое время я решил написать расширение-переводчик. Можно сказать:
Но такие уже есть!Да, есть, но, во-первых, я раньше не писал расширения для браузеров и хотел попробовать, во-вторых, создавать что-то самому всегда веселее чем пользоваться готовым. Так что кому это интересно так же как и мне — добро пожаловать под кат.
Ближайшие события
Дайджест свежих материалов из мира фронтенда за последнюю неделю №247 (23 — 29 января 2017)
4 мин
Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.
А если без JavaScript?
3 мин
В нашем мире без JavaScript никуда! Куча фреймворков, библиотек и прочей радости! jQuery плотно вошел в нашу жизнь. React с Angular пробивают дорогу к светлому будущему. Да и не за горами поддержка браузерами ES6 без Babel.
Но если тема заходит об обычном сайте со стандартным функционалом, не редки случаи, когда JavaScript начинают “злоупотрелять”. И все, в принципе, нормально… Но порой задаешься вопросом: «А если без JavaScript?».
Но если тема заходит об обычном сайте со стандартным функционалом, не редки случаи, когда JavaScript начинают “злоупотрелять”. И все, в принципе, нормально… Но порой задаешься вопросом: «А если без JavaScript?».
KeepDraw.js — javascript framework для рисования на canvas
3 мин
Всем привет. В этой статье речь пойдет о библиотеке для рисования на canvas — KeepDraw.
Это фреймворк для работы с canvas 2d с поддержкой событий и анимации.
Это фреймворк для работы с canvas 2d с поддержкой событий и анимации.
Отличительные черты:
- API в стиле ООП;
- События для мыши, клавиатуры и сенсорных экранов;
- Поддержка анимации;
- Рисование кривых безье по точкам;
- Множество функций, проверяющих пересечения фигур и точек;
- Заливка фигур градиентами и изображениями;
- Шаблоны объектов — линия, прямоугольник, текст, многоугольник и круг.
- Поддержка мобильных устройств.
- Сглаживание фигур с использование кривых безье.
- Легковесный. Сжатая версия весит 15 килобайт.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №246 (16 — 22 января 2017)
3 мин
Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.
Чек-лист вёрстки
7 мин
Это статья — список полезных мелочей. Весь текст поделен на две части. Первая рассказывает про простые элементы (текст, кнопки, изображения, формы и другие), вторая часть про производительность, масштабируемость, безопасность и доступность.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №245 (9 — 15 января 2017)
4 мин
Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.
FPS и пусть ваш код подождет
8 мин
Приветствую, уважаемые читатели Хабра. Эта статья про фронтенд, JavaScript и FPS. И сегодня мне хотелось бы поделиться своими мыслями о «слепом» коде, который фактически никак не учитывает производительности среды исполнения. Ну и, конечно, напишем очередной велосипедокостыль — куда без них.
