Порядочный фронтендер знает HTML и CSS, разбирается во фреймворках и библиотеках, понимает, что находится «под капотом» на серверной стороне. Плюс, обязательно умеет работать с контролем версий, использовать графические редакторы, разбираться в шаблонах разных CMS.

Сегодня наша подборка посвящена именно фронтенд-разработке. В нее вошли 15 бесплатных курсов из раздела Образование на Хабр Карьере, которые познакомят с основами основ — HTML, CSS, JavaScript — и еще с кучей полезных вещей.

Если вы где-то видели интересный бесплатный курс и не нашли его в этом списке — делитесь ссылками в комментариях.

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

Основа эмпатии – это наблюдение. Причем, наблюдение не только за объектом дизайна и взаимодействующими с ним людьми, но и за контекстом такого взаимодействия!

Описание

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

Рассмотрим параметры, которые есть у Wayfinder. Указанные параметры относятся к первой версии.

В последнее время, сайты с parallax scrolling эффектом стали появляться повсюду. Я не хотел это пропускать, поэтому я создал демонстрационную страницу с parallax scrolling эффектом с помощью jQuery и CSS.

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

Меня аккаунт Вконтакте, и даже в Фейсбуке в качестве своего сайта не устраивает. Слишком много лишнего, навязанный формат и прочие неудобства.

Если бы я не был веб-разработчиком, мне пришлось бы плакать и грызть кактус. К счастью, я им являюсь, поэтому решил сделать себе сайт сам. Чтобы выкладывать на нём статьи вроде этой, небольшие хобби-проекты, и чтобы было что указать в поле «сайт» профиля на Хабре.

Если вы тоже хотели бы иметь сайт, который полностью контролируете, на котором всё именно так, как вам хочется, но всё никак руки не доходили разобраться и сделать, то эта статья для вас.

Некоторые знания HTML и JS вам пригодятся. Опыт работы с Node.js не обязателен.

Эта статья о том, как организовать свой 3D-кинотеатр используя существующие на сегодняшний день технологии с наименьшими затратами, то есть именно бюджетный вариант.
В данном посте я не буду рассматривать оборудование для премьерных показов фильмов, как в больших кинотеатрах, поэтому сразу расскажу почему:
Премьерный показ фильмов на сегодняшний день возможен, только на специальном дорогостоящем оборудовании сертифицированными под стандарт DCI, это такая защита данных от несанкционированного копирования.
Что бы иметь представление о какой стоимости профессионального оборудования идет речь, то это порядка 3 млн.руб. (100 000$) Согласитесь, такие вложения в ряде случаев могут быть вполне не оправданы. Я же предложу схемы, так называемых бюджетных мини 3D-кинотеатров с начальным вложением от 300 тыс.руб. (10 000$, простите, за такое грубое округление) Кого заинтересовало, прошу подкат.

Благодаря псевдоклассу :checked, появившемуся в CSS3, можно стилизовать формы с чекбоксами и радиокнопками как угодно. В этом топике рассмотрен один очень простой способ, причем без использования JavaScript.



Демонстрация Скачать исходники

В связи с прочтением соседнего поста предлагаю перечислить список бирж, на которых можно найти альтернативу тому унылому говну, в которое превратился free-lance.ru, ибо терпеть планомерный геноцид я больше не намерен.

Я начал писать этот плагин в феврале этого года просто для себя, потому что на тот момент я не нашел ничего похожего. Сейчас уже хабраюзеру известно про такие инструменты, как PixelPerfect и X-Precise, однако у каждого из них есть свои плюсы и минусы, как и у моего.

Итак, что же особенного в pixLayout?

Mousetrap — javascript-библиотека, позволяющая легко и непринужденно добавлять хоткеи на сайты, появилась не так давно. Но уже успела полюбиться мне настолько, что я решил сделать ее добавление к проекту на Ruby on Rails простым и приятным. А именно, завернуть в ruby-библиотеку для рельсов. Так появился gem mousetrap-rails.

В этом HOWTO я раскажу вам как обрезать фотографию до нужного вам размера и залить её на сервер с помощью Ruby on Rails.

Продолжаем изучать Ruby? Так точно!

В первой части мы получили обзорные знания о Руби и Рельсах и, надеюсь, решили, нужно ли нам это, или нет. Так как мы взялись за язык основательно необходимо обустроить рабочее учебное место. Нам нужны: сам интерпретатор Ruby, фрэймворк Rails, база данных (MySQL, думаю, будет лучшим выбором) и непосредственно среда разработки, которая должна сделать процесс программирования приятным, удобным и увлекательным ;)

Все мы, программисты, любим писать велосипеды. Безусловно, занятие это интересное, помогает развиваться, но иногда есть резон воспользоваться чужими, уже проверенными временем решениями. Информацию о сервисах, добавляющих на ваш сайт немного социальности без какого либо программирования я и решил собрать в этой статье. О каких то наверняка слышали многие, какие то будут внове. Если хоть один человек отыщет в данном посте что-то новое — значит этот текст писался не зря!

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

Предисловие

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

Введение

У меня за спиной огромный опыт работы с PHP, но сейчас я работаю Rails разработчиком. Огромную сложность для большинства людей, которые пытаются освоить что-то новое — это сам процесс обучения. Когда вы владеете каким-либо языком или фреймворком и знаете его вдоль и поперёк, переход на что-то новое не представляется необходимым.

Однако, изучение Ruby on Rails является достаточно простым занятием. Это невероятно мощный фреймворк, который имеет огромное сообщество, продвигающее его вперёд. Итак, у нас возникает вопрос: какой способ изучить Rails является лучшим? Вот он — план занятий.

Kickstrap это то, что будет если соединить Twitter Bootstrap, HTML5 Boilerplate, значки от IcoMoon и Font Awesome, добавить проверенные jQuery плагины Chosen и jGrowl, включить поддержку разных цветовых схем и тем оформления Bootswatch, дополнительную CSS сетку и вменяемую поддержку ранних версий IE.

Заинтересовал меня Rails. Купил пару книг, прочитал… достаточно чтобы, зачесались руки и пришло время ставить сабж. И приступать… хотя бы к экспериментам.

Задача: поставить Rails под Windows 7 (не спрашивайте меня почему) и запустить сервер.

Оказалось — это квест. Пары щелчков мышью недостаточно. Конечно, если не использовать Railsinstaller, на что мне правильно намекнули в комментариях (спасибо, dreamfall).

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

Дабы сразу определить целевую аудиторию этого цикла заметок-статей-поучений пару слов о себе. Бывший школьник, будущий студент, в программинге толком ничего не смыслю, хотя есть пара сайтиков на готовых движках. В php-скриптах могу чего-нить лишнее удалить, изменить, но написать что-то с чистого листа — это не ко мне. Неоднократно пытался научится мастерству создания программ, но обычно тормозил как только дело доходило до ООП (видел в коде эти многочисленные классы, в пособиях всякие «объекты», «инкапсуляции» и т.п. и зависал...)

Собственно точно такое же желание появилось и сейчас. Порыскав по сети в поисках «чего-бы такого интересного выучить» наткнулся именно на Ruby с его рельсами. По словам спецов разного качества Руби сейчас актуален, программировать на нем быстро, это полный ООП (что перспективно в дальнейшем покорении олимпа программирования), синтаксис несложен… В то же время язык — тормоз, нагружает систему, twitter в нем барахтается, пытаясь удержаться на плаву, постоянные проблемы с хостингом. Но я вроде как стартапить в многомиллионную аудиторию не собираюсь, а для общего образования всегда подойдет.

Так что стоит признаться, что и Ruby я знаю совсем каплю, но уверен, что и мои «капли» будут интересны некоторым индивидам, подобным мне. Я могу (и буду) часто ошибаться в каких-то понятиях, методах, но мы ведь готовы помогать друг другу? Вроде бы как Хабр — это элита ИТ, но я думаю, что местные спецы не будут против, если мы тут с начинающими ребятами немного «потусим» :)

Собственно в этой серии статей мы будем капля за каплей наполнять стаканчик знаниями о Руби, наполнять будем вместе — для меня это также станет дополнительным стимулом не бросать занятия. Надеюсь, что и вам будет интересно! Начнем?

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

Привет, Хабр!

Хочу поделиться замечательным мастер-классом по созданию реалистичных теней для блоков на чистом CSS, найденном на просторах рунета по адресу http://mainview.ru/css/realistichnye-teni-pri-pomoshhi-css3-bez-ispolzovaniya-izobrazhenij. Естественно, для того, чтобы примеры работали как надо, необходим браузер с поддержкой CSS3.

В связи с тем, что на Хабрахабре не нашёл я описания данного простого и в то же время удобного способа создания простых «тултипов» — всплывающих подсказок, я решил о нём написать.
В данном методе не будет использоваться JS, мы довольствуемся лишь CSS3 и HTML5.