Как стать автором

HTML *

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

СтатьиПостыНовостиАвторыКомпании

drafterleo 29 мар 2017 в 17:31

Hello, Шульте

3 мин

11K

CSS * HTML * JavaScript *

Наверное, каждый программист, интересующийся предметами с приставкой "пси", должен воплотить в виртуальность таблицы Шульте — уж очень они соблазняют своими легкодоступными, квадратно-цифровыми очертаниями. Но кропать таблицы на родных плюсах было как-то не с руки — всё равно что ездить за мороженным на танке. Теперь же на старости лет профессиональное любопытство докатилось и до веба, а для погружения в премудрости HTML/CSS/JavaScript (в качестве учебно-увлекательного проекта) таблицы Шульте — самое оно.

По мере ограниченных сил, громадного двухнедельного опыта и недоразвитого дизайнерского таланта, постарался сделать "стильно, модно, молодёжно" — чтобы всё было по возможности responsive и reactive и нормально встраивалось через iframe.

Список доступных настроек

размер таблицы (Grid);
группы чисел в таблице (Groups);
инверсия порядка обхода чисел (Inverse Count);
показывать ячейку под указателем (Show Hover);
обозначать фоном пройденные числа (Show Trace);
подсвечивать результат клика (Show Hit Result);
перемешивать числа (Shuffle Numbers);
повернуть числа в разные стороны (Turn Numbers);
вращать числа (Spin Numbers).

Последние две опции ставят нетривиальную задачу — отличить шестёрку от девятки.

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

+14

HedgeSky 29 мар 2017 в 10:22

Неудобно редактировать ERb/EEx шаблоны? Попробуйте Slim/Slime

2 мин

5.5K

Веб-разработка * Программирование * Ruby * HTML * Elixir/Phoenix *

ERb — стандартный язык разметки в мире Ruby. Это html со вставками на Ruby. В мире Elixir ту же роль выполняет EEx. Такой же синтаксис, только вместо Ruby — Elixir. Вот как это выглядит:

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок</title>
    <meta name="keywords" content="template <%= language_name %>">
    <meta name="author" content="<%= user_name %>">
  </head>
  <body>
    <h1 class="page-header"><%= page_header %></h1>
    <div id="content">
      <p><%= page_content %></p>
      Дополнительный текст.
    </div>
  </body>
</html>

То же самое можно написать в 1.5 раза короче без потери читаемости.

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

+10

a84277755 29 мар 2017 в 08:43

Центрирование по вертикали несложных div при помощи data-

13 мин

3.9K

CSS * HTML * JavaScript *

Из песочницы

Доброго времени суток.

Возникла задача: в twitter bootstrap есть две колонки (div) с классами «col-md-6» и «col-md-6». В первой колонке текст, во второй видео с ютюб, при чем первая колонка в два раза выше второй. Нужно центрировать видео по вертикали относительно первой колонки. И таких участков на сайте несколько. В некоторых местах нужно у двух колонок сделать равные высоты.

Можно было бы руками править каждый раз, но решил попробовать всё ускорить, написать скрипт, который при помощи добавления data- сделает рутинную работу за меня.

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

+1

netologyru 27 мар 2017 в 16:03

Гид по верстке адаптивных писем

13 мин

68K

Блог компании НетологияCSS * HTML * Верстка писем *

Команда мультиканальной маркетинговой платформы Sendsay специально для Нетологии составила подробный гид по верстке адаптивных писем для начинающих верстальщиков: с пошаговой инструкцией, примерами и ссылками на фреймворки, инструменты и шаблоны.

В гиде: основные принципы адаптивной верстки, таблицы с ограничением максимальной ширины, резиновые картинки, специальные комментарии, инструменты, фреймворки, советы и подборка классных писем.

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

+11

SuperPaintman 26 мар 2017 в 20:23

Создание вашей первой игры на Phaser. Часть 1 — Введение

3 мин

20K

Canvas * WebGL * Разработка игр * JavaScript * HTML *

Туториал

Phaser

Оглавление

0. Подготовка к работе
1. Введение [Вы тут]
2. Загрузка ресурсов
3. Создание игрового мира
4. (wip) Группы
5. (wip) Мир физики
6. (wip) Управление
7. (wip) Добавление целей
8. (wip) Последние штрихи

Добро пожаловать в наш первый урок по созданию игр на Phaser. Здесь я расскажу вам, как создать небольшую игру — платформер, которая познакомит вас с основными функциями данного фремворка и работу с ним в нынешних реалиях (ES6 / TypeScript + WebPack).

Что такое Phaser?

Phaser — это HTML5 (JavaScript / TypeScript) игровой фреймворк, который призван помочь разработчикам создавать крутые, кросс-браузерные HTML5 игры в короткие сроки и, в отличии от других фреймворков, phaser изначально затачивался под мобильные устройства. Единственное требование выдвигаемое данным фреймворком — поддержка тега <canvas />. Он также много чего унаследовал от Flixel.

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

+10

SuperPaintman 26 мар 2017 в 20:17

Создание вашей первой игры на Phaser. Часть 0 — Подготовка к работе

7 мин

22K

Canvas * HTML * JavaScript * WebGL * Разработка игр *

Туториал

Phaser

Оглавление

0. Подготовка к работе [Вы тут]
1. Введение
2. Загрузка ресурсов
3. Создание игрового мира
4. (wip) Группы
5. (wip) Мир физики
6. (wip) Управление
7. (wip) Добавление целей
8. (wip) Последние штрихи

Эта серия статей научит вас основам и "хорошему тону" игрового фремворка Phaser. За данный курс, я постараюсь объяснить вам основные идеи и возможности фреймворка, а также покажу как его грамотно использовать в связке с TypeScript и Webpack.

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

+14

alexzfort 26 мар 2017 в 19:39

Дайджест свежих материалов из мира фронтенда за последнюю неделю №255 (20 — 26 марта 2017)

4 мин

18K

Блог компании Zfort GroupCSS * HTML * JavaScript * Веб-разработка *

Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.

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

+29

vladalivan 25 мар 2017 в 18:33

Выравнивание в Bootstrap

2 мин

47K

JavaScript * HTML * CSS *

Recovery Mode

При работе с фреймворком Bootstrap обычно сталкиваются с тремя основными проблемами:

Как поместить контент внизу колонки?
Как создать многорядную галерею колонок одинаковой высоты в одном .row?
Как центрировать горизонтально несколько колонок, если их суммарная ширина меньше 12 единиц и оставшаяся ширина нечетна?

Для решения первых двух проблем, необходимо скачать небольшой плагин.

Решение третьей проблемы подсмотрено здесь.

Общий код

<style>
    [class*=col-] {position: relative}
    .row-conformity .to-bottom {position:absolute; bottom:0; left:0; right:0}
    .row-centered {text-align:center}   
    .row-centered [class*=col-] {display:inline-block; float:none; text-align:left; margin-right:-4px; vertical-align:top} 
</style>

<script src="assets/conformity/conformity.js"></script>
<script>
    $(document).ready(function () {
        $('.row-conformity > [class*=col-]').conformity();
        $(window).on('resize scroll', function() {
            $('.row-conformity > [class*=col-]').conformity();
        });
    });
</script>

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

+2

sfi0zy 24 мар 2017 в 17:35

Учимся мыслить в REM. Разговор об очевидном и о производительности труда в небольшой веб-студии

6 мин

20K

CSS * HTML * Веб-разработка *

главная картинка
В течение некоторого времени мне в руки попадали различные макеты, сделанные как известными дизайнерами, так и не очень, а также сайты, которые верстались по этим макетам. Одни были симпатичными, другие немного старомодными, третьи — просто ужасными. Переодически и сам решал задачи по верстке, в том числе и pixel-perfect, и постепенно пришел к пониманию, что все размеры в макетах выбираются почти всегда ~~от балды~~ относительно случайным образом, что привносит в результат некоторую неоднородность, а в процесс верстки — лишнюю головную боль, костыли и потраченное время. В данной статье я бы хотел поделиться некоторыми размышлениями и экспериментами по этому поводу.

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

+18

alexzfort 19 мар 2017 в 20:00

Дайджест свежих материалов из мира фронтенда за последнюю неделю №254 (13 — 19 марта 2017)

4 мин

20K

Блог компании Zfort GroupCSS * HTML * JavaScript * Веб-разработка *

Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.

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

+35

GenrikhFetischev 15 мар 2017 в 14:30

Слайдер на CSS

3 мин

109K

Из песочницы

Хочу рассказать простой способ создания слайдера, без использования JS, при помощи анимации CSS.

1) Для начала напишем HTML, предположим что в слайдере будут сменять друг друга 4 изображения.

  <div class="slider">
      <div class="slide slide1"></div>
      <div class="slide slide2"></div>
      <div class="slide slide3"></div>
      <div class="slide slide4"></div>
 </div>

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

+7

Binjo 14 мар 2017 в 11:38

Правила использования ARIA в HTML

4 мин

94K

Веб-разработка * HTML *

Перевод

The Web Accessibility Initiative's Accessible Rich Internet Applications Suite (WAI-ARIA, или просто ARIA) — это набор инструментов и указаний для того, чтобы сделать веб-контент и приложения более доступными.
В частности, он включает в себя набор атрибутов, которые мы можем добавлять к HTML-элементам для придания им семантической информации, которая может быть прочитана с помощью специальных возможностей (assistive technologies).

Хотя ARIA может быть достаточно полезной, нам стоит быть осторожными в вопросах, как и когда её использовать. Вот 5 правил, которые необходимо учитывать при использовании ARIA в HTML.

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

+14

m31 13 мар 2017 в 12:13

Третья ежегодная конференция JavaScript-разработчиков в Одессе — JS Lab

2 мин

3.5K

Блог компании FlyElephantHTML * JavaScript * Программирование * Веб-разработка *

25 марта в Одессе пройдет третья ежегодная конференция JavaScript-разработчиков — JSLab.Наша команда FlyElephant помогает с организацией этой конференции и приглашает всех принять участие в ней.

Хочешь расширить свой кругозор и выйти за пределы своих ежедневных JavaScript задач? У тебя есть эта возможность. В этом году на JS Lab тебя ждет: 200 front-end и back-end JS-разработчиков из Украины и ближнего зарубежья; два потока состоящие из 12 докладов по 45 минут и 8 блиц-докладов по 10 минут; темы затрагивающие фронтенд, бекенд, виртуальную реальность, разработку игр, тестирование и все это на JavaScript.

Среди докладов, можно отметить следующие:

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

+15

alexzfort 12 мар 2017 в 20:58

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

4 мин

19K

Блог компании Zfort GroupВеб-разработка * JavaScript * HTML * CSS *

Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.

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

+27

Skaner 10 мар 2017 в 11:49

Разработка механики игры Bounce от Nokia на JavaScript

6 мин

18K

HTML * JavaScript * Программирование * Разработка игр *

Туториал

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

+18

askeet 7 мар 2017 в 12:55

Возрождение ActionScript2.0 c помощью JavaScript

3 мин

8K

JavaScript * HTML * Adobe FlashAction Script *

И вот уже март 2017 года, Adobe Flash Player уже не запускается по умолчанию без явных действий пользователя, по крайней мере в Google Chrome для автоматического запуска контента Adobe Flash Player необходимо выполнить следующии инструкции.Таким образом, акцент веб-разработки все больше и больше смещается в сторону использования JavaStript библиотек, предоставлющих доступ к HTML5 Canvas.

Одним из удобных способов разработки HTML5 Canvas, заместо Flash, является Adobe Animate CC 2017, который подерживает следущие типы проектов:

Из списка видно, что подержка ActionScript2.0 полностью исключена из текущей версии среды разработки, а также нет возможности перенести имеющийся AS2/3 код в html5 Canvas.
Единственное, что можно сделать в Adobe Animate CC 2017 — это преобразовать графическое содержимое Flash проекта и все входящие в него компоненты в HTML5 проект.
Для этого достаточно открыть Flash проект и выбрать из меню Commands пункт Convert To Other Documents Format после чего откроется диалоговое окно с предложением выбора типа проекта в который происходит преобразование. По умолчанию используется HTML5 Canvas, его и будем использовать в наших новых проектах.

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

+4

Igorgro 7 мар 2017 в 12:35

Мой Material Design Framework

3 мин

22K

JavaScript * HTML * CSS *

Из песочницы

Здравствуйте! Сегодня я решил рассказать о своем небольшом проекте, а именно о HTML фреймворке в стиле Material Design. Скачать его можно с GitHub: ссылка. Лучше всего он работает на браузерах Webkit. Теперь рассмотрим его поближе.

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

+25

alexzfort 5 мар 2017 в 20:12

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

4 мин

21K

Блог компании Zfort GroupCSS * HTML * JavaScript * Веб-разработка *

Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.

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

+29

sfi0zy 2 мар 2017 в 13:30

Создание картинок на CSS делает верстальщика лучше, или Чем себя занять долгими зимними вечерами

4 мин

39K

Веб-разработка * HTML * CSS *

Monster

Те, кто интересуется версткой, frontend разработкой и веб-дизайном, вероятно заметили, что в последние несколько месяцев в сети все чаще стали появляться анимированные картинки, сделанные с помощью HTML и CSS. В этой статье я постараюсь рассказать откуда это веяние появилось, в чем фишка и почему это стало так популярно среди верстальщиков (а возможно кто-то еще не слышал, может быть интересно познакомиться с таким видом деятельности).

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

+24

m31 27 фев 2017 в 20:07

Третья конференция JavaScript-разработчиков в Одессе «JS Lab» ищет спикеров

1 мин

2.4K

Блог компании FlyElephantHTML * JavaScript * Программирование * Веб-разработка *

Хабр, привет! 25 марта в Одессе я буду проводить ежегодную конференцию JavaScript-разработчиков — JS Lab. Сейчас мы запустили обновленный сайт и я занимаюсь формированием программы. В ближайшие дни на сайт мы добавим первых спикеров, а если вы хотите стать одним из них, пишите мне на почту (d.spodarets@flyelephant.net) или заполняйте форму здесь.

В отличие от прошлых лет, в этом году, мы отбираем 2 типа докладов — 12 докладов по 45 мин и 8 блиц-докладов по 10 мин. Традиционно будет два потока.

Следите за новостями в фейсбуке.

+7

1 2 ...

67

68 69 ...