Рубрика «html» - 79

Позвольте представить, Shadow DOM API на основе слотов

2016-06-25 в 20:05, admin, рубрики: custom elements, html, javascript, safari, shadow dom, slot, web components, webkit

Предлагаю вашему вниманию перевод статьи «Introducing Slot-Based Shadow DOM API» автора Ryosuke Niwa, написанную им в блоге WebKit осенью прошлого года.

Мы рады анонсировать что базовая поддержка нового Shadow DOM API на основе слотов, которую мы предлагали в апреле (прим. переводчика: речь идёт об апреле 2015) уже доступна в ночных сборках WebKit после r190680. Shadow DOM это часть Веб Компонентов – набора спецификаций, изначально предложенных Google для того чтобы сделать возможным создание переиспользуемых виджетов и компонентов в вебе. Shadow DOM, в частности, предоставляет легковесную инкапсуляцию DOM дерева, позволяя создавать на элементе параллельное дерево, так называемое «теневое shadow дерево», с помощью которого изменяется отрисовка элемента без изменения DOM. Пользователи такого компонента не смогут ненароком что-то в нём изменить, ведь его shadow дерево не является привычным потомком элемента-хоста. Кроме того, действие стилей также ограничено областью действия (scope), а значит CSS правила, объявленные снаружи shadow дерева не применяются к элементам внутри такого дерева, а правила, объявленные внутри – к элементам снаружи.
Читать полностью »

Подборка уроков для начинающего разработчика игр на JavaScript

2016-06-24 в 5:28, admin, рубрики: canvas api, html, html5 canvas, javascript, игростроение, разработка игр, создание игр

В этой подборке уроков рассматриваются основы создания игр на JavaScript, изучив которые вы научитесь:
— Работать с позицией курсора мыши
— Вращать объекты внутри CANVAS элемента
— Выделять объекты мышью внутри CANVAS
— Перетаскивать объекты внутри CANVAS
— Создавать эмуляцию гравитации для объектов внутри CANVAS
— Определять скорость мыши
— Использовать мультиязычность в своих игровых проектах.
Все уроки полностью на русском языке и выполнены в наглядной форме.

Читать полностью »

Опрос: насколько строго вы следуете стандартам и лучшим практикам на фронтенде?

2016-06-23 в 8:15, admin, рубрики: html, javascript, веб-стандарты, Микроформаты, опрос, Прогрессивное улучшение, Разработка веб-сайтов, Семантика, семантика и семантическая верстка

Как-то так получилось, что за последнюю неделю я посмотрел довольно большое количество выступлений на разных крупных и не очень конференциях. И часто там говорили об очень важных, в теории, вещах: производительности, доступности, прогрессивном улучшении.
Но, судя по моему опыту и ощущениям, на практике никто этим не занимается, кроме самых крупных компаний. Эти ощущения подтверждает, например, подкаст Веб-стандартов: там при обсуждении каких-то технологий или практик, постоянно звучат слова "мы это у себя не используем", "только если заказчик пнёт".
Я бы хотел проверить, так ли это, проведя небольшой опрос. Думаю, результаты будут интересны многим, приглашаю обсудить вопросы, ответы и вообще эту тему в целом в комментариях.
P.S. Я в опросе довольно вольно использую термин "стандарты". Понятно, что для некоторых вещей стандартов нет, но придумывать какое-то альтернативное название не вижу смысла.
Читать полностью »

Как стать профессиональным веб-разработчиком: практическое руководство

2016-06-22 в 22:46, admin, рубрики: cms, html, java, javascript, бэкенд, обучение, разработка, Разработка веб-сайтов, фриланс, фронтенд

Как стать профессиональным веб-разработчиком: практическое руководство - 1
Дорога длинна и трудна, но интересна и полезна!

Статья задумывалась как практическое руководство для желающих стать профессиональным веб-разработчиком. Я уже более 20 лет пишу код для веба. Я ежедневно работаю с веб-разработчиками и помогаю им. В статье я опишу, что вам нужно выучить, когда вам нужно это выучить и где взять информацию (чаще всего даже бесплатно). Затем я дам совет по получению реального опыта, и что самое важное – по получению денег за написание кода.

По статье разбросано множество ссылок на бесплатные и важные ресурсы. Для простоты я собрал их в PDF и разбил по категориям. Мне не платят за упоминания сайтов, ссылки на которые я привёл – я всего лишь хочу порекомендовать вам лучшие ресурсы, чтобы помочь вам достичь вашей цели.

Что нужно помнить:

1. Статью разрешается пролистывать

Руководство может помочь вам вне зависимости от вашего положения на дороге к профессиональной разработке. Прокрутите его к тому заголовку, который лучше всего описывает ваше сегодняшнее положение, и читайте оттуда. Если вы только начали этот путь, или пока размышляете об этом – последуйте совету Короля из «Алисы в стране чудес»:

Начните с начала, и продолжайте, пока не дойдёте до конца; и там уже остановитесь.
Читать полностью »

VIM: зачем, если есть IDE, и как?

2016-06-17 в 15:13, admin, рубрики: .ini, bash, C, css, CUDA, GAP, Go, html, IDE, latex, opencl, python, ruby, sage, vim, XML, yaml, Программирование, Разработка веб-сайтов

Сегодня вышел текст о том, как человек перешёл с Sublime на VIM. В комментариях, как обычно это бывает, появились сообщения в духе "Зачем мне тратить время на Vim, если есть IDE, где всё работает?" (люди даже статьи на эти темы пишут). Хотел внести свои пять копеек, но объём написанного плавно перевёл текст из разряда "комментарий" в разряд небольшой статьи.

В целом, всё, что ниже — это вкусовщина, конечно. Нравится вам ваша IDE (или ваш текущий инструмент), да и пожалуйста. Используйте для текущих задач то, чем вы владеете лучше всего, это аксиома эффективной работы. Но если у вас вдруг появилось немного времени на повышение вашей эффективности в целом, то попробую вас заинтересовать именно Vim'ом, сравнивая его с некой обобщенной IDE.

VIM: зачем, если есть IDE, и как? - 1 Читать полностью »

Как называть css-классы

2016-06-13 в 18:54, admin, рубрики: css, css-классы, html, Разработка веб-сайтов

Основываясь на моих любимых статьях по данной теме и личном опыте, вот мои 5 копеек о том, как называть CSS-классы.

0. Прежде чем думать о названии класса, выберете подходящее название для HTML-элементов

Если это поле, используйте элемент input

Читать HTML-документ будет гораздо легче.

Пример:

<div class='submit'/> <!-- Чёёё? -->
<input class='submit'/> <!-- Аа, ясно -->

Источник: Рафаэль Гоитер (французская статья)
Читать полностью »

Facebook Messenger был уязвим к атаке, требующей базовые знания HTML

2016-06-08 в 8:04, admin, рубрики: Facebook, facebook messenger, html, id сообщений, Блог компании Inoventica Services, информационная безопасность, переписка, уязвимость, чат

Команда специалистов Check Point security обнаружила в стандартном функционале Facebook, а так же в Facebook Messenger, уязвимость, которая позволяла получить доступ к любым отправленным через социальную сеть сообщениям пользователей.

Конкретно эксплоит позволял кому угодно получить доступ к сообщениям пользователей и изменять их содержимое, то есть, например, потенциально распространять вредоносное ПО.
Читать полностью »

Создание арканоида на чистом JavaScript с нуля. CANVAS

2016-06-08 в 2:22, admin, рубрики: Gamedev, html, javascript, Программирование, разработка игр, создание игр на javascript, метки: создание игр на javascript

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

Front-end шаблонизатор

2016-06-05 в 13:29, admin, рубрики: ajax, css, html, javascript, patterns, шаблонизатор, шаблоны

Прошлую свою статью я посветил описанию «велосипеда» (загрузчика и шаблонизатора в рамках «легкого» framework’а). Волею судеб, для пары проектов я был вынужден выделить шаблонизатор и сделать его standalone версию, обогатив при этом рядом новых возможностей. Именно об front-end шаблонизаторе и пойдет речь.

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

Вы front-end разработчик, и вам интересно использование шаблонов.
Вы back-end разработчик, и вам интересно использование шаблонов на front-end’е.
Вы давно ищете какой-нибудь инструмент для систематизации своей коллекции UI-control'ов, накопившуюся за несколько лет.
Вы интересуетесь разработкой web-компонентов.
Вам хочется высказать критические замечания и порекомендовать angularJS.
У вас есть свободное время и вам интересно почитать об очередном велосипеде.
У вас нет свободного времени, но вам интересно.
Вы хороший и любознательный человек.

Читать полностью »

Как я разрабатывал транслятор языков разметки

2016-06-05 в 5:55, admin, рубрики: html, java, парсеры, Разработка веб-сайтов, трансляторы

Эта история началась в далеком 2008 году. В одном из моих проектов для противодействия XSS-атакам я решил использовать BB-коды и начал искать подходящие библиотеки на Java. Хорошенько погуглив, я так ничего ничего и не нашел. Конечно, тогда было и сейчас есть много библиотек для трансляции BB-кодов в HTML, но все они меня не устраивали по одному критерию — невозможность добавлять или удалять тэги. Вспомнив курс "Языки программирования и методы трансляции" (польза от классического образования!) я принялся за реализацию своей собственной библиотеки для парсинга BB-кодов. В результате появился мой самый долгоживущий проект KefirBB.