• Что поправить в верстке перед выпуском в продакшн?



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

    Читать дальше →
  • Дедовское UX проектирование: верстальщик — вредитель

      Привет всем. Решил вернуться в верстку после перерыва в пять лет, прорываюсь через технологии. С удивлением обнаружил, что технологии просто начали работать, а верстальщики дешеветь. Но если указать в документе слово «UX», то стоимость работ возрастает раза в два минимум, при тех же производственных затратах — довольно интересное предложение. Я пошёл смотреть видеофайлы (боже, там миллион видеофайлов — на русском), и слегка оторопел (слово изменено).

      Я не рассматриваю здесь материалы вида: «попробуем вбить гвоздь в камень, рельсу и дерево; далее оценим результат», и материалы вида: «все дети, кто научился переворачиваться на живот, непременно должны начать верстать» — речь о тонком моменте даже в серьезных материалах, когда технический специалист с приставкой UI/UX проваливается внутрь, скажем так, блока и добирается до букв, которые и несут сообщение в экран — текст, картинки и другие вещи. И перестаёт быть специалистом вне кода.

      Как и десять лет назад, большая часть верстальщиков с любыми приставками работают цирковыми медведями. Трюки — вот наша цель и мера профессионализма.

      Дальше несколько тезисов, как перестать быть медведем, и попытаться быть человеком.
      Читать дальше →
    • CANVAS шаг за шагом: Основы

      CANVAS шаг за шагом:
      1. Основы
      2. Изображения
      3. Понг
      4. Пятнашки

      Если верить англо-русскому словарю, то можно узнать что canvas переводится как холст, а если верить википедии, то можно узнать что тег canvas, это элемент HTML 5, который предназначен для создания растрового изображения при помощи JavaScript. Тому как создать это растровое изображение и будет посвящен мой небольшой текст. Прежде чем начинать пробовать свои силы в этом не легком деле рекомендуется уже иметь базовые знания о том что такое HTML и с чем едят JavaScript.
      Читать дальше →
    • Тренды 2015: Почему всё больше «не-технарей» изучают вёрстку

        image

        Раньше термин «компьютерная грамотность» по своей сути означал умение работать с офисным пакетом, но жизнь не стоит на месте, и теперь всё больше экспертов (и даже звезда НБА Крис Бош) заявляют о том, что крайне важным навыком для широкого круга людей становится умение программировать.

        При этом программирование — огромная область знаний, только небольшая часть которой может действительно пригодиться обычному человеку (то есть «не-технарю»). Мы считаем, что основу «новой компьютерной грамотности» должно составить знание вёрстки. В сегодняшнем топике мы рассмотрим примеры того, как изучение веб-технологий может помочь представителям не-технических профессий.
        Читать дальше →
      • Кроссбраузерная кастомизация системного скроллбара



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

          Под катом можно узнать, как в ближайшее время будет работать скролл в 2ГИС Онлайн.
          Подробности
        • Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №137 (1 — 7 декабря 2014)

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


            Читать дальше →
            • +34
            • 37,4k
            • 6
          • 9 основных принципов отзывчивого веб-дизайна

            • Перевод

            Отзывчивый дизайн — отличное решение проблемы корректного отображения сайта на разных экранах. Однако новичкам зачастую трудно понять основы, обучаясь только по книгам/статьям. С каждым днём появляется всё больше различных устройств, имеющих разные размеры экрана, поэтому создание дизайна в пикселях и только для настольных компьютеров/смартфонов остаётся в прошлом. Именно поэтому сейчас стоит изучить принципы отзывчивого дизайна — дизайна, совмещающего в себе адаптивность и резиновость (если вы ещё не знакомы с адаптивным дизайном, то эта статья будет хорошим выбором для начала изучения).
            Читать дальше →
          • Программирование для начинающих — пример создания Азбуки Морзе на базе визуальной системы Snap!

            • Tutorial


            Одной из целью популяризации DIY-робототехники, для меня, является привлечение внимания к IT, к программированию. И в этом плане мне интересны визуальные среды программирования, где простым Drag&Drop можно создавать программы. Для тех кто только начинает изучать компьютер — такой способ программирования может на начальном этапе вызвать интерес (благодаря своей простоте), и дальше уже способствовать к самостоятельному изучению (чего-то более сложного).

            Думаю многие слышали про Scratch — это «классика жанра» (созданная в MIT, идея 2003 и выход в релиз 1.0 в январе 2006 году), но для его работы необходимо установка ПО на компьютер (или Flash). Некоторое время назад в University of California at Berkeley была разработана система Snap!, интерфейсе которой близок к Scratch, но работает в браузере, на базе классических html/js/css. То есть для работы с ней — вам достаточно только браузера (и к тому же она open-source).

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

            Изучать что-то новое всегда интересно на каком либо примере из жизни, вот я и решил попробовать задачу рисования и озвучивания азбуки Морзе — этапы решения этой задачи и будет содержимым данной публикации.

            Программа будет при нажатии на клавиши — рисовать соответствующие символы, и так же «озвучивать». На КДПВ приведена итоговая программа, и справа написано «HI HABR, HABR HI».

            Посмотреть демо
            Если кому-то хочется сразу увидеть результат, то демо здесь.

            Управление:

            "клавиша вверх" — инициализация параметров и очистка (лучше нажать после загрузки — выставится ширина точек)
            "клавиша вниз" — перевод строки
            клавиши "h", "i", "a", "b", "r" — рисование и озвучивание соотв. буквы с помощью азбуки Морзе.
            Читать дальше →
          • Тестирование в Яндексе. Что мы узнали о фреймворке Appium, и можно ли его применять для серьёзных задач

              В мире тестирования программного обеспечения набирает обороты совсем молодое направление — автоматизация тестирования мобильных приложений. И ожидаемо, что как грибы после дождя стали появляться соответствующие инструменты: Calabash, iOS Driver, Robotium, Selendroid, Appium. И именно про наши эксперименты с последним в мобильном тестировании я и хочу рассказать.

              В последнее время Appium часто упоминают на конференциях и тут, на Хабре, было уже несколько постов о нем. Это фреймворк с открытыми исходным кодом, написанный на JavaScript и предназначенный для автоматизации тестирования мобильных приложений. По сути, это Selenium WebDriver, но для мобильных приложений. Appium позволяет управлять Safari и Chrome на соответствующих устройствах, а значит, и тестировать под ними веб-сайты, но обзор этих возможностей и нюансов, связанных с ними, — отдельная тема.

              Чтобы уберечь вас от тех шишек, которые мы сами набили, работая с Appium, я хочу рассказать вам о том, с какими особенностями фреймворка мы столкнулись, какие у вас могут возникнуть трудности и как с ними справиться.
              Читать дальше →
            • Кто возьмёт билетов пачку… или о монетизации игровых приложений

                image

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

                  В тот момент, когда начиналась разработка HTML Academy, мы достаточно серьёзно играли в WOW, да и, вообще, были поклонниками игр Blizzard со стажем. Поэтому с игровыми механиками были знакомы достаточно хорошо, хотя сами этого не подозревали. Многие интересные механизмы появились в академии, как нам казалось, сами по себе. Но позже выяснилось, что на самом деле они называются «игровыми механиками», а мы их неосознанно взяли из игровой практики.


                  Читать дальше →
                • Обещания JavaScript

                  • Перевод
                  Всем привет, и ещё раз всех с прошедшими праздниками. Трудовые будни набирают обороты и вместе с ними растёт информационный голод мучающий нас. Мир разработки переднего конца не дремлет и готовит нам много сюрпризов в наступившем году, и уж поверьте мне, скучно не будет ни кому. Одна из новых особенностей которые нам готовят разработчики браузеров совместно с группами разработчиков пишущих спецификации — JavaScript Promises(далее в переводе — Обещания, прошу сильно не бить) — полюбившийся многим шаблон написания асинхронного кода обзаводится нативной поддержкой. Что же такое обещания и с чем их едят можно прочесть в нижеследующем переводе(слегка вольном) замечательной статьи Джейка Арчибальда.

                  Подробности
                • Трюки с CSS-анимациями: мгновенные изменения, отрицательные задержки, анимация transform-origin и другое

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

                  Быстрое изменение состояния посреди анимации

                  Обычно анимации используются для того, чтобы плавно менять свойства элементов со временем. Однако изменения могут также быть практически мгновенными. Для этого надо задать два ключевых кадра с очень маленьким интервалом, например в 0.001%:

                  @keyframes toggleOpacity {
                    50% { opacity: 1; } /* Turn off */
                    50.001% { opacity: 0.4; }
                  
                    /* Keep off state for a short period */
                  
                    52.999% { opacity: 0.4; } /* Turn back on */
                    53% { opacity: 1; }
                  }
                  

                  Вот как я использовал этот приём для имитации мигающей неоновой вывески с помощью прозрачности и свойства text-shadow:


                  Читать дальше →
                • Как научить программировать гуманитария

                  Приветствую всех!

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

                  image

                  Мой опыт, на основании которого я сделал описываемые выводы, возник из примерно 6-летней в общей сумме работы с людьми, желавшими или думавшими, что желают, обучиться программированию. В процессе работы велись как групповые, так и индивидуальные занятия с обучающимися (возрастом от 16 до 26 лет), величина групп была в среднем около 11 человек, по несколько групп параллельно.
                  Читать дальше →
                • Обзор бесплатных сервисов для веб-разработки

                    Пост является личной подборкой полезных и нужных онлайн сервисов, которые позволяют бесплатно (или условно бесплатно) создавать действительно крутые вещи и разворачивать их в Сети. Не претендую на новизну или на полноту, но буду счастлив, если кому пригодится.

                    Всем нам иногда хочется попробовать новую идею, запилить какой-нибудь сайтик про манулов, но чтоб обязательно на node.js, хайлоад реди, с мемкешем, монго, фейловером и с претензией на мировое господство. У меня для Вас хорошие новости: благодаря щедрости проклятых западных капиталистов всё это можно получить совершенно бесплатно.
                    Читать дальше →
                  • Массовые интерактивные онлайн-курсы: опыт HTML Academy

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

                      А где-то в сторонке расположился небольшой островок обучающих ресурсов, работающих в другом формате, который можно назвать «интерактивный онлайновый фаблаб» или более формально — массовые интерактивные онлайн-курсы. Большая часть этих ресурсов предназначена для технарей: там обучают программированию, вёрстке, работе с базами данных и так далее.

                      В этой статье мы расскажем о том формате обучения, который применяется в HTML Academy. И, конечно, о наших особенностях, методиках и приёмах.


                      Читать дальше →
                      • +14
                      • 31,5k
                      • 7
                    • HTML Academy, Хабр и краудфандинг

                        HTML Academy — это интерактивные онлайн-курсы по HTML и CSS. Проект существует уже более года, за который мы создали более 15 курсов, большая часть из которых бесплатна. Всё это время работа велась на чистом энтузиазме, однако, сейчас уже нужно выходить на новый уровень, чтобы делать курсы чаще, круче и полезнее. Для этого есть много путей, и один из них — народное финансирование.

                        Немного об HTML Academy


                        Всё обучение в академии происходит в практическом режиме. По сути, оно сводится к прохождению огромного количества практических заданий. Практическое задание выглядит вот так:

                        Практическое задание
                        Читать дальше →
                      • 3G интернет в удаленности от базовой станции с помощью тарелки и кофейной банки

                        Всем жителям Хабра — привет!




                        Суть этой статьи показать еще один вариант словить за уши Э/М волну в относительной глубинке для нужд доступа в интернет.
                        Если где-то точно такая конструкция уже мелькала, милости прошу ссылку, будет интересно сравнить и пообщаться.
                        Материал изложу в повествовательной форме, надеюсь, никого этим сильно не замучаю, всякие термины, если кто не знает, и прочие подробности можно смело пропускать, от этого суть поста сильно не изменится.

                        Постановка задачи

                        Интернет – штука полезная и нужная, с этим, думаю, поспорить сложно. И если проблем в городе с интернетом нет, то в деревне, где мне часто приходиться по семейным обстоятельствам бывать, есть определенные проблемы. Есть частный деревянный дом а-ля «хата» (место действия: РБ), из интернета в моей окрестности доступ предоставляют 3 оператора, но максимум – это лишь технология EDGE. До двух ближайших базовых станций (БС) около 3.5 и 7 км. Между домом и БС лес, но не вплотную. Хватило бы и EDGE, но загрузка этих станций от других соседних деревень, судя по скорости, такая, что можно «прятаться в картошку».
                        Вариант покупать готовое решение отпал сразу из соображений спортивного интереса.
                        Вдохновившись на одном из форумов удачным опытом парней, где использовалась спутниковая тарелка (она же «офсетная зеркальная антенна») и сам 3G модем в фокусе, решил что-то подобное смоделировать да скрутить.
                        Сразу скажу, что антенну с модемом хотелось закинуть на чердак, дабы не портила внешний вид дома (об этом ниже).

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