Изображения и текст принадлежат их авторам.

Анимация элементов в мобильных приложениях — это просто. Правильная анимация тоже может быть простой… если вы последуете представленным в статье советам.

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

Рад представить дополнение оригинального списка из 300 потрясающих бесплатных сервисов. Автор оригинальной статьи Ali Mese добавил ещё +100 новых сервисов, которые помогут найти все — от источников вдохновения и редакторов фотографий до создания опросов и бесплатных иконок.

И еще подборку +500 инструментов от 10 марта 2017 г. смотрите здесь.

A. Бесплатные веб-сайты

• HTML5 UP: Адаптивные шаблоны HTML5 и CSS3.
• Bootswatch: Бесплатные темы для Bootstrap.
• Templated: Коллекция 845 бесплатных шаблонов CSS и HTML5.
• Wordpress.org | Wordpress.com: Бесплатное создание веб-сайта.
• Strikingly: Конструктор веб-сайтов.
• Layers: Создание сайтов на WordPress (new).
• Bootstrap Zero: Самая большая коллекция бесплатных шаблонов Bootstrap (new).
• Landing Harbor:  Продвижение мобильного приложения c помощью бесплатного лендинга (new).

Маленький рассказ о том, как наша команда решила организовать иконки в грядущем проекте. Чуть-чуть исторического экскурса, взгляды по сторонам (на PNG и векторные шрифты) и рассказ о том, как мы всё-таки обустроились в итоге.

Иконки у нас используются, и активно – хорошо подобранная иконка заменяет слова и предложения (а фигово подобранной иконке можно сделать всплывающую подсказку, но не будем о грустном)

В общем, есть (и продолжают создаваться) иконки. Надо их положить на веб-страницу. Надо сделать это так, чтобы потом голова не болела про них весь остаток проекта и ещё пару лет в поддержке. Ну и есть дополнительные хотелки:

• хочется вектора. Ну, ладно, вектор – это средство, а не цель. Цель – не беспокоиться ВООБЩЕ об изменении размеров, ретина дисплеях, сохранении изображения в разных форматах для разных целей.
• хочется стилизации иконок. Потому что у нас из коробки как минимум два набора тем (светлая и тёмная), а то и контрастная, для людей с нестандартным зрением, а то и оранжевенькая какая-нибудь появится ближе к Новому году… В общем – одна и та же по сути иконка должна выглядеть слегка иначе в зависимости от выбранной на странице темы.
• хочется динамической стилизации иконок. Статики – нам мало. Этого хватает для скриншотиков и рекламных буклетиков, но не для живых пользователей. А мы хотели жизни! Мы хотели ховера! Мы хотели селекшена!!! И дизаблить, дизаблить их всех!.. Извините.
• НЕ хочется, чтобы в этом участвовал JavaScript в любой его форме и проявлении. Иконки – это внешний вид, а за него ответственный HTML + CSS. Ну, ладно, класс selected я готов навесить на элементы, но это последняя граница…

Есть и факторы, облегчающие задачу. Иконки сейчас (2015, осень, начинает снежить) в моде плоские, строгие. Если лет пять назад иконки пестрели, то сейчас это ушло под влиянием МС, Эппла, Материал Дизайна…

tl;dr Внимание. Следующие несколько разделов – это расплывание мыcлею по древу, причём вширь, обзор решений (в том числе – неудачных) и котик в разных ракурсах.
Кому хочется технических подробностей того, что же вышло в итоге – пожалуйте сюда.

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

• Нет возможности оптимизировать автоматически много файлов
• Сложно и неудобно использовать в рабочем процессе

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

Оптимизация изображений с помощью командой строки

Для каждого png файла используются optipng и pngcrush, а для jpg — jpegtran. Для начала опробуем optipng:

Хабр, привет.

Не так давно SLY_G опубликовал цикл переводов книги Eloquent Javascript (за что ему большое спасибо). В комментариях раз за разом поднимались вопросы о сборке переводов книги, что, собственно, я и сделал при помощи сервиса Gitbook — «Выразительный Javascript», pdf, ePub, mobi и онлайн версия.

Репозитарий книги, pull requests принимаются.

Вам когда-нибудь хотелось прямо в CSS коде посчитать, в меню 4 элемента или 10? Для четырех задать им ширину по 25%, а если набралось десять — прижать их друг к другу и уменьшить отступы?
Как выяснилось, CSS умеет работать с разным количеством элементов, позволяя избавиться от головных болей и лишнего кода на js.

Привет, хабражители!

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

Также хочу попросить вас о небольшой услуге: если вы знаете канал, не вошедший в список — опубликуйте ссылку на него в комментариях или отправьте pull request. Сообщество будет благодарно вам.

Под катом — текущая версия списка.

Тестирование является важной составляющей процесса разработки приложения. Для Android тестирование особенно важно, так как устройства сильно отличаются друг от друга:

• Размером и разрешением экрана.
• Версией Android.
• Форм-фактором.
• Системой команд процессора.
• Наличием фронтальной камеры, NFC, внешней клавиатуры, и т.д.

Поэтому тестировать приложение приходится на множестве устройств.
В процесс тестирования входят различные виды тестирования. Рассмотрим, как происходит процесс функционального тестирования приложения вручную. Тестировщик устанавливает на устройство приложение, вдумчиво проверяет всю функциональность, затем возвращает устройство в первоначальное состояние. И так для каждого приложения и каждого устройства. Очевидный недостаток такого способа – большие затраты времени для регулярного тестирования.
Очевидный плюс автоматизированного тестирования – его можно регулярно проводить без особых затрат. Например, каждую ночь тестировать свежий билд приложения на всем множестве имеющихся устройств, а утром анализировать результаты и исправлять ошибки.
В данной заметке будут рассмотрены средства реализации автоматического тестирования. Рассматриваются только инструменты, входящие в Android SDK или распространяющиеся под Open Source лицензией.

Слово Jumla на языке суахили означает «все вместе», «как одно целое».

Когда-то давно, довольно долгое время я верстал сайты на HTML/CSS/JavsScript и не имел никакого представления о CMS.
Пугающим моментом было то, что как я полагал владение PHP является крайне необходимым, однако по факту каких-то базовых знаний оказалось достаточно (простой код оказывается понятен программисту любого другого языка, а в дебри лезть не обязательно).
Для человека, владеющего только версткой и скриптами, довольно достаточно знать какие-то определенные моменты, для того, чтобы с ходу приступить к работе с Joomla.
Что-то в этих моментах схоже с другими CMS, что-то отличается.
Постарался изложить эти моменты кратко. Если бы они мне были известны сразу, то смог бы начать создавать администрируемые пользователями сайты гораздо быстрее.
Итак, если вы владеете HTML, но не имеете представления о CMS Joomla, то вам следует нажать кнопку ниже.

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

Часть 3

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

Часть 2
Часть 3

Шестьдесят два процента данных в сети составляют изображения, и мы каждый день создаем все больше байтов изображений. Это было бы потрясающе, если бы все они использовались по назначению. Но на маленьких экранах или на экранах с низким разрешением большая часть этих данных превращается в хлам.

Здравствуй, дорогой читатель хабра!
Сегодня мы поговорим о градиентных границах, режимах наложения, о том, как рациональнее сверстать стандартную иконку меню. А так же откроем для себя заново старое css-свойство visibility и рассмотрим новое медиа-выражение @Supports.

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

Когда вы приобретаете сервер VPS с 256MB или 512MB оперативной памяти на борту и лишь часть мощности процессора, то использовать для таких сервисов как MySQL/PHP/Apache настройки по умолчанию является очень плохой идеей. В настоящее время у меня запущено 3 сайта на самом дешевом тарифном плане с 512MB RAM/1 CPU. Не уверен полностью, но посещаемость составляет порядка 5-10 тысяч посетителей в день. Далее я хочу поделиться инструкцией как оптимизировать LAMP используя всего лишь 512 MB и при этом не уходя в swap. Обычно при такой настройки используется 256 – 378Mb памяти и все работает довольно быстро.

Определяем доступную память и активность swap.

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

$ free -m

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

$ ps -eo pmem,pcpu,rss,vsize,args | sort -k 1 -r | less

Настраиваем LAMP сервер для потребления малого количества оперативной памяти. Останавливаем, отключаем ненужные сервисы

Первый и очевидный вопрос, который необходимо задать — это «какие сервисы мне не нужны в использовании?». Недавно, я обнаружил очень удобную утилиту для управления сервисами. Она называется "sysv-rc-conf" и управляет сервисами при помощи псевдографики и флажками. Выгдялит вот так:

Здесь представлен список сервисов, которые я изменил.

• Postfix. Этот сервис позволяет отправлять и получать почтовые email сообщения для домена. Я использую для этих целей Google Apps для отправки почты и mailchimp для новостных подписчиков. Таким образом я остановил и отключил этот сервис.
• Bind9. Он нужен для управления DNS записями Вашего домена. Его можно отключить, так как все DNS записи хранятся у хостера.
• SSHD. Имеются и другие реализации, которые используют гораздо меньше памяти, но они не поддерживают sftp, поэтому данный сервис я оставил без изменений.

Не запускайте X-сервер, выключите все ненужные сервисы и настройте Apache, MySQL, PHP только с базовой необходимой функциональностью.

Когда три года назад возникла необходимость вести учет доходов и расходов семейного бюджета, я перепробовал массу специализированных программ. В каждой находились какие-то изъяны, недочеты, и даже дизайнерские недоделки. После долгих и безуспешных поисков того, что мне было нужно, было решено организовать требуемое на базе шаблона Excel. Его функционал позволяет покрыть большую часть основных требований по ведению домашней бухгалтерии, а при необходимости – строить наглядные графики и дописывать собственные модули анализа.

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

Привет. Меня зовут Марк и я перевожу адаптирую и интерпретирую книгу Р. Курцвейла «The Singularity Is Near». Если вам не знаком Курцвейл и вы первый раз услышали про Сингулярность — посмотрите что об этом думают другие:

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

—Билл Гейтс

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

—The New York Times

«Волнующий и чрезвычайно глубокий взгляд на человечество как вид. Курцвейл является блестящим ученым и футуристом…»

—The New York Sun

Это настольная книга любого «истинно верующего» технократа, трансгуманиста и футурофила, если в двух словах. Именно эта книга считается лучшей работой Курцвейла и одной из лучших книг, описывающих ближайшее будущее человечества как биологического вида.

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



«Вот те раз!» — подумал я. Ни в одном реестре запрещенных сайтов данный ресурс не присутствовал и, с чего билайн его заблокировал — непонятно. Естественно после таких вот «заявочек» в голову полезли страшные мысли: «а что если завтра любимого „кина“ не будет!». Данные мысли тут же подвигли меня начать искать способы борьбы с данной ситуацией, и написать, для тех кому будет интересно, маленький обзор нескольких решений по обходу блокировки сайтов. (под катом скрины)

Вступительное слово

Привет хабрахабцы.
Когда указывал хаб для статьи, узнал, что на статьи по 3D принтерам подписано ни много ни мало 23774 человека.



Впервые о книге я узнал из статьи. Оригинальный вариант книги издан под лицензией Creative Commons и выложен в открытый доступ специалистами Международного центра теоретической физики (МЦТФ) Абдус Салам в Триесте (Италия)– в апреле 2013 года.

Расположена книга на сайте центра: Её можно скачать как в компактном размере, так и в хорошем качестве. Для владельцев iPad имеется и мультимедийная версия (если у кого-то есть возможность посмотреть что из себя представляет эта версия, пожалуйста напишите о впечатлениях, потому что обещанная *.ePub версия пока «Coming soon»). Также авторы загрузили версию книги в главную библиотеку 3D печатников Thingiverse.

YouTube Center — лучшее расширение для браузера, работающее на сайте YouTube, которое мне приходилось видеть. Не могу не поделиться.
Собственно, это расширение решает если не все, то большинство проблем, с которыми мы сталкиваемся на YouTube и о которых не раз вспоминали на хабре. О самом расширении тоже говорили на этом сайте, но оно насколько хорошее и удобное, что вполне заслуживает отдельного поста.

Возможности YouTube Center

Дополнение позволяет:

• разместить видео по центру страницы (1)
• указать размер плеера (2)
• указать качество видео (3)
• запретить автопроигрывание и буферизацию видео, в том числе в Linux в HTML5 (4)
• отключить Dynamic Adaptive Streaming over HTTP (Dash), которое не позволяет свободно передвигаться вдоль ролика, потому что буферизация каждый раз начинается заново (5)
• отключить рекламу, в том числе рекламу внутри видео (6)

(цифрами в скобках указаны ссылки на комментарии на хабре, в которых идёт речь о желательности таких функций на YouTube)

Есть и другие мелкие плюшки, вроде возможности:

• скачивать ролики (с выбором качества, формата и названия видео)
• удалить предложение видео в конце просмотра
• указать тип плеера (Flash или HTML5)
• указать разрешение, в котором загружены ролики
• добавить автоподсветку, выбрать её цвет и прозрачность

… и многое другое