Языки и фреймворки, которые вы должны изучить в 2015м году

Языки / платформы

Node.js является победителем в этом списке,  PHP второй, и JavaScript — третий. Существует большое сообщество вокруг Node.js, так что это не удивительно. Если вы знаете JavaScript, вы уже наполовину способны к создания веб-приложений в Node.js.

Фреймворки

AngularJS занимает первое место среди фреймворков. Крупные компании и предприятия приняли Angular, и вырос спрос на специалистов знающих данный фреймворк. Дело в том, что он опирается на некоторые из лучших инженеров Google, также помогает ему достичь первое место.

Чтобы помочь вам сделать свой выбор, ниже небольшой обзор из вышеперечисленных технологий!

Вот то, чему вы должны научиться в 2015 году

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

1. JavaScript везде

офмфыскшзе
image-323

Если вы занимаетесь веб-разработкой, JavaScript является языком, который вы должны знать, независимо от того, какой язык программирования используете. Сегодня вы можете использовать JS в браузере, на сервере, в мобильных приложениях и даже на программируемом оборудовании. ES6 принесет необходимых улучшений и сделает язык еще более мощным и легко в написании. Это также хорошая идея, чтобы узнать о Bower и npm, а также инструменты, такие как jshint и jscs.

2. AngularJS

angular
image-324

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

3. React

react
image-325

React является новичком в этом списке. Библиотека разработана Facebook и обеспечивает очень быструю работу благодаря производительности своей виртуальной DOM, и может быть легко подключен в существующие проекты. Она также имеет очень активное сообщество, которое развивается все виды компонентов. На наш взгляд, React имеет большой потенциал и является фреймворком, который стоит чтобы посмотреть (и учить) в 2015 году.

4. Node.js

nodejs
image-326

С Node.js вы можете разрабатывать сетевые серверные приложения на JavaScript. Он может быть использован для простых движков веб-сайтов с использованием такой структуры, как Express, конечных точек API, WebSocket серверов или даже торрент-клиентов. Node имеет невероятно активное сообщество и превысил всех других языков по количеству модулей в этом году.

5. NoSQL databases

nosql
image-327

Базы данных, которые не нужны ни таблицы, ни SQL высоко ценятся современные веб-разработчики, и мы считаем, что эти базы данных станут только более популярным в следующем году. Два примечательных варианты MongoDB и Redis. Это гораздо проще начать с одного из этих баз данных, чем с MySQL и Postgres. Но не ведитесь, думая, что базы данных NoSQL являются идеальной заменой — в некоторых ситуациях классический реляционная база данных сделает ваше развитие легче даже если это займет больше усилий.

6. Less/Sass/Stylus

lesscss
image-328

Существует много что не нравится в CSS. Это слишком просто, в конечном итоге получаются громоздкие файлы с 1000 линиями, который трудно ориентироваться и измененять. Чтобы решить эту проблему, есть языки, такие как Less, Sass и Styles, которые составляются для CSS и предлагают переменные, макросы и другие вкусности, которые помогут вам улучшить ваш код. Вы можете изучить один из них за один день.

7. Потрясающие новые фреймворки

exciting-new-frameworks
image-329

Meteor принципиально новый подход к развитию веб-приложений, которые размывает границы между фронтендом и бекендом. Это позволяет писать Reall-time приложения, и имеет быстро растущее сообщество. Hood.ie является небольшим его соперником, и предлагает новый подход. Он обрабатывает серверную часть для вас, так что вы можете полностью сосредоточиться на фронтенде вашего приложения.

8. Потрясающие новые языки

exciting-new-languages
image-330

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

9. Классические популярные фремворки

full-stack-frameworks
image-331

Несмотря на то что одностраничные приложения набирает популярность, до сих пор огромный спрос имеют на классические серверных веб-приложения. Ruby on Rails, Django, Laravel, Play, ASP.NET являются наиболее популярными фреймворками в данный момент.

10. Старая гвардия

the-old-guard
image-332

Существует большая коллекция установленных языков и платформ, которые по-прежнему востребованы — Java, .NET, Python, Ruby. Они имеют большие сообщества и будет хорошо смотреться в любом резюме. Все они имеют свои плюсы и минусы.

Рейтинг браузеров к октябрю 2014

Статистика десктопных и планшетных браузеров за август и сентябрь 2014 года:

Браузер Август Сентябрь изменения относительно
IE (all) 20.31% 20.44% +0.13% +0.60%
IE11 9.10% 9.22% +0.12% +1.30%
IE10 3.05% 2.89% -0.16% -5.20%
IE9 3.12% 3.02% -0.10% -3.20%
IE6/7/8 5.04% 5.31% +0.27% +5.40%
Chrome 46.37% 45.67% -0.70% -1.50%
Firefox 17.48% 17.43% -0.05% -0.30%
Safari 4.42% 4.64% +0.22% +5.00%
iPad Safari 6.38% 6.56% +0.18% +2.80%
Opera 1.42% 1.36% -0.06% -4.20%
Others 3.62% 3.90% +0.28% +7.70%

Статистика десктопных и планшетных браузеров начиная c сентября 2013 по сентябрь 2014 год

Браузер Сентябрь 2013 Сентябрь 2014 изменения относительно
IE (all) 28.54% 20.44% -8.10% -28.40%
IE11 0.03% 9.22% +9.19% +30,633.30%
IE10 12.16% 2.89% -9.27% -76.20%
IE9 5.93% 3.02% -2.91% -49.10%
IE6/7/8 10.42% 5.31% -5.11% -49.00%
Chrome 40.88% 45.67% +4.79% +11.70%
Firefox 18.37% 17.43% -0.94% -5.10%
Safari 8.51% 11.20% +2.69% +31.60%
Opera 1.14% 1.36% +0.22% +19.30%
Others 2.56% 3.90% +1.34% +52.30%

Таблицы показывают статистику для браузеров. В столбце «Изменение» является абсолютное увеличение или уменьшение доли рынка.«Относительно» колонка указывает пропорциональное изменение, то есть 5,2% пользователей Internet Explorer 10 включен браузеры в прошлом месяце.

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

Статистика мобильных браузеров на август 2014 и сентябрь 2014

Мобильный браузер Август Сентябрь изменения относительно
Chrome 22.67% 24.49% +1.82% +8.00%
iPhone 21.75% 23.07% +1.32% +6.10%
Android 22.35% 21.53% -0.82% -3.70%
Opera Mini/Mobile 11.15% 10.12% -1.03% -9.20%
UC Browser 10.33% 9.86% -0.47% -4.50%
Nokia Browser 3.89% 3.56% -0.33% -8.50%
IEMobile 2.34% 2.27% -0.07% -3.00%
Others 5.52% 5.10% -0.42% -7.60%

Chrome в настоящее время используется четверть мобильных устройств.

Введение в Emmet — основные команды.

Как веб-разработчик, я всегда искали инструменты для увеличения скорости разработки и её производительность. Эта статья для веб-разработчиков, которые часто работают с HTML и CSS но еще не используют Emmet.

Установка

Emmet это плагин который помогает писать код на много быстрее. На оф.сайте Emmet можно скачать плагин для редактора который вы используете. Если вы используете Sublime Text, как я, Эммет может быть легко установлена ​​через Package Control.

install-emmet
image-166

HTML аббревиатуры

Инициализация

С emmet на создание html документа уходят считанные секунды. Стоит ввести всего лишь ! или html:5 и клавишу Tab.

initializers
image-167

  • html:5 или ! для HTML5
  • html:xt для XHTML
  • html:4s для HTML4

Добавление классов, id и других атрибутов

Поскольку синтаксис Emmet похож на описание селекторов в CSS, пользоваться им очень просто.

classes-ids
image-168

Кроме того, вы можете комбинировать классы и идентификаторы. Например команда p.bar#foo выведет:

<p class="bar" id="foo"></p>

Для содержания тегов используются фигурные скобки h1{foo}:

<h1>foo</h1>

А для атрибутов используются квадратные скобки a[href=#]:

<a href="#"></a>

texts-attrs
image-169

Вложенности

Селекторы > и + создают, соответственно, дочерние и соседние элементы, а селектор ^ позволяет подниматься в иерархии на один уровень.

nesting
image-170

Группировка

Чтобы эффективно использовать вложения, не включая их в беспорядочное месиво операторов, вам необходимо группировать некоторые куски кода. Это как математика — нужно просто использовать скобки вокруг определенных частей. Например, (.foo> h1) + (. Бар> h2) получится:

<div class="foo">
  <h1></h1>
</div>
<div class="bar">
  <h2></h2>
</div>

grouping
image-171

Скрытие имен тегов

Набрав код .item вы получите:

<div class="item"></div>

Но теперь emmet умнее, если вы объявите .item внутри , он сгенерирует:

<li class="item"></li>

implicit-tags
image-172

Вот список всех неявных имен тегов:

  • li для ul и ol
  • tr для table, tbody, thead и tfoot
  • td для tr
  • option для select и optgroup

Умножение

Вы можете определить, сколько раз элемент должен повторится с помощью операции *. Например ul>li*3 будет:

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

multiplication
image-173

Нумерация

Для изменения названия класса или идентификатара с каждым следующим элементом необходимо просто добавить знак $, ul>li.item$*3, получим:

<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
</ul>

numbering
image-174

CSS аббревиатуры

Значение

В Emmet вы можете использовать для CSS сокращений. Допустим, вы хотите определить ширину. Введите w100, и получите:

width: 100px;

values
image-175

А команда h10p+m5e выведет:

height: 10%;
margin: 5em;

Вот список некоторых команд:

  • p → %
  • e → em
  • x → ex

Дополнительные параметры

Используя команды @f получим:

@font-face {
  font-family:;
  src:url();
}

Но некоторые свойства, такие как background-image, border-radius, font, @font-face, text-outline, text-shadow, имеют дополнительные параметры, которые можно активировать используя +. Используя @f+ мы получим:

@font-face {
  font-family: 'FontName';
  src: url('FileName.eot');
  src: url('FileName.eot?#iefix') format('embedded-opentype'),
     url('FileName.woff') format('woff'),
     url('FileName.ttf') format('truetype'),
     url('FileName.svg#FontName') format('svg');
  font-style: normal;
  font-weight: normal;
}

extra
image-176

Нестрогий поиск

Модуль CSS использует нестрогий поиск, чтобы найти неизвестную аббревиатуру. Так, каждый раз, когда вы вводите неизвестныю аббревиатуру, Emmet ищет ближайшее определение сниппета. Например: ov:h и ov-h и ovh и oh будет генерировать одно и то же:

overflow: hidden;

fuzzy-search
image-177

Префиксы

CSS3 отличная штука, но его префиксы очень сложные. Для них в Emmet есть тоже аббревиатуры. Например, аббревиатура trs даст нам:

-webkit-transform: ;
-moz-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;

vendor-prefixes
image-178

Вы также можете добавить префиксы к любому виду элемента. Вам просто нужно использовать — префикс. Так,-super-foo получим:

-webkit-super-foo: ;
-moz-super-foo: ;
-ms-super-foo: ;
-o-super-foo: ;
super-foo: ;

Что делать, если вы не хотите, чтобы выводились все атрибуты? Нет проблем. Вы можете точно определить, какие браузеры необходимо поддерживать. Например, -wm-trf выведет:

-webkit-transform: ;
-moz-transform: ;
transform: ;
  • w → -webkit-
  • m → -moz-
  • s → -ms-
  • o → -o-

Градиент

Говоря о раздражающих особенностей CSS3, мы не можем забыть градиенты. Эти длинные определения с различными обозначениями теперь могут быть легко заменены с краткой аббревиатурой. Пример lg(left, #fff 50%, #000):

background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));
background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -moz-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(left, #fff 50%, #000);

gradient
image-179

На последок…

Это основы работы с замечательным плагином Emmet. Полный список команд вы можете посмотреть перейдя по ссылке на официальную документацию.

Равномерное распределение блоков на всю ширину

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

Сначала идет внешний блок .wrap

<div class="wrap">
</div>

Внешний элемент не обязательно должен быть div, он может быть и списком или тег-контейнером(main section header footer...)

Затем идут сами элементы. В данном случае это просто divы, но и тут могут быть почти любые элементы(a li img...)

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

Теперь CSS. Основное свойство для контейнера это text-align: justify

.wrap {
  text-align: justify;
}

А все элементы делаем inline-block

.wrap div{
  display: inline-block;
}

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

.wrap:after {
  display: inline-block;
  content: "";
  width: 100%;
}

Демо пример:

See the Pen CydfI by roma (@romasport) on CodePen.

Основные команды для работы с Git(шпаргалка)

Установка Git

Fedora:

$ yum install git

Ubuntu:

$ apt-get install git

Mac:

http://sourceforge.net/projects/git-osx-installer/
$ sudo port install git +svn +doc +bash_completion +gitweb
$ brew install git

Windows:

http://msysgit.github.io

Настройка Git

Установка имя и email:

git config --global user.name 'name'
git config --global user.email 'email@email.com'

Просмотр настройки:

$ git config --list

Инициализация

В папке проекта:

git init

Добавление

Файла:

git add my_file

Добавление в индекс всех изменений:

git add .

Проверка статуса файлов:

git status

Удаление из индекса

Удаление файла из индекса и из каталога:

git rm my_file

Удалить файл из индекса, оставив его при этом в рабочем каталоге:

git rm --cached my_file

Коммит

C указанием комментария:

git commit -m 'commit'

C указанием комментария и автоматической индексацией:

gir commit -a -m 'some commit'

Работа с облаком

С начало необходимо создать репозиторий в вашей учетной записи.

Выгрузка в облако(запросит имя пользователя и пароль)

git remote add origin https://github.com/username/repozit_name.git
git push -u origin master

6 советов по созданию хорошего кода

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

1. Используйте модули

Один из лучших способов сделать код последовательным, читаемым и организованным, является использование функциональных групп. Например, вместо того что бы писать весь ваш JavaScript в один main.js файле, используйте группировку, разделяя на отдельные файлы, исходя из функциональности кода, и собирая эти файлы в один, только на финальной стадии разработки.

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

Новые технологии, такие как Polymer позволяют писать костомные HTML элементы, так что HTML, CSS, JavaScript могут быть сгруппированы в отдельные компоненты на основе их функциональности. Убедитесь в этом рассмотрев Browserify, он позволяет использовать Node.js стили модулей в браузере.

2. Говоря о препроцессорах …

Препроцессоры не просто помогают вам с написанием модульного кода, они прекрасно подходят для других вещей! Препроцессоры добавят дополнительную функциональность в ваш код, в то время как на выходе будут те же HTML, CSS и Javascript файлы. Как правило, они требуют больше времени на установку и настройку, но это стоит того.

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

Вот наиболее распространенных препроцессоров для CSS, HTML и JavaScript: Sass, Haml и CoffeeScript соответственно.

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

3. Планируйте прежде чем программировать

Когда в последний раз, вы сидели и писали на бумаге как именно вы будете работать над проектом? Какие фреймворки вы планируете использовать, сколько браузеров поддерживать? В начале разработки, вы думаете, что вы точно знаете как и что должно работать, и только на полпути понимаете что вам нужно что то другое, и вы возвращаетесь в самое начало что бы переписать код.

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

4. Используйте контроль версий

Контроль версий это система, которая регистрирует изменения в файле или наборе файлов с течением времени, что позволяет нескольким пользователям редактировать и отслеживать изменения в проекте. Есть много таких систем которые позволяют использовать контроль версий, это Bitbucket, Assembla и GitHub.Самый популярный из них Github, так как он способствует социальному программированию, то есть люди могут делится кодом на Github, улучшая его и узнавая о коде добавленным другими пользователями.

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

5. Проверяйте код делясь им с другими

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

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

6. Возьмите кодирования вызовы

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

CodeWars отлично подходит для улучшения ваших знаний в JavaScript, а для практического его применения вам поможет Codepen.

Вывод

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

Установите Zend Server 7 на Ubuntu 14.04 Vagrant Box

Эта набольшая статья покажет вам как установить Zend Server 7 на Vagrant.

Шаг 1: Установка виртуального окружения

Убедитесь, что у вас установлены Virtualbox и Vargant — лучше всего обновить их до последних версий.

Шаг 2: Загрузка

Установка из репозитория. После завершения операции скачивания, загрузите его с командой vagrant up.

git clone https://github.com/Swader/trustead
cd trustead
vagrant up

После того, как загрузка будет завершена, введите в VM vargant ssh.

Шаг 3: Запуск установщика

Вы можете скачать 30-дневную пробную версию установки с Zend здесь, или вы можете скачать экземпляр установки пробной версии нашего CDN, вот так:

cd Code
wget http://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2014/07/1406030465ZendServer-7.0.0-RepositoryInstaller-linux.tar.gz
tar xvzf 1406030465ZendServer-7.0.0-RepositoryInstaller-linux.tar.gz
cd ZendServer-RepositoryInstaller-linux/
sudo ./install_zs.sh 5.5 nginx

После того как эти команды были выполнены, Zend Server будет установлен и запущен. Если у вас не установлен Nginx, он будет тянуть его вместе с версией PHP которую вы укажете.

После установки, вы должны получить доступ к интерфейсу Zend Server из браузера хост-машины через http://192.168.10.10:10081. Через этот интерфейс вы завершите установку из браузера.

Установите Zend Server 7
image-37

Шаг 4: Fix Log разрешения

Чтобы разрешить чтение / запись в логах, мы должны дать пользователю Zend разрешит изменять log файлы.

sudo chmod o+r /var/log/nginx/{access,error}.log

[Опционально] Шаг 5: Развертывание приложения

При желании, можно развернуть приложения. Установим PhpMyAdmin.

В VM, установить MySQL командой sudo apt-get install mysql-server.

На главной странице справочной Zend Server GUI (первая страница, когда вы нажимаете на Обзор), щелкните стрелку вправо под «Развертывание приложений», чтобы перейти к PhpMyAdmin.

Zend Server GUI
image-38

В Zend Server GUI, с помощью мастера установки установите PhpMyAdmin (обратите внимание на вопросы о пароле)

phpmyadmin
image-39

Вот и все! У вас есть рабочий установленный Zend Server, в комплекте с корпоративными функциями.

Как создать идеальную 404 страницу?

Как создать идеальную 404 страницу?
image-67

Если вы ни когда не попадали на страницу 404, то вероятно вы ни когда ни пользовались интернетом.

Концепция проста: если пользователь запрашивает URL, а сервер не может найти необходимую страницу, он отвечает ‘404 страница не найдена’ — или другими словами «Все работает, но я не могу найти то что вы запрашиваете».

Есть несколько правил, которые следует соблюдать, чтобы создать хорошую страницу ошибки 404:

Дизайн

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

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

Социальные ссылки

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

Основные ссылки

Для удобства пользователя, необходимо выводить на странице 404 главные ссылки сайта, их может быть 6 или 7, но не более, не надо ему выводить все карту сайта.
В большинстве случаев эти ссылки на страницы:

  • Главная
  • Последний статьи
  • Поиск
  • О сайте
  • Контакты

Вывод формы обратной связи

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

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

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

Аудио / Видео / Блок Юмора

Аудио / Видео также могут выводится на странице 404. Юмор как часть объяснения быть использованы с некоторой забавной анимацией. Это возможно удивит и развлечет пользователя.

Ниже приведен некоторые примеры конструкций страниц 404. Посмотрите на них и сделайте свою страницу вашего сайта более качественной.

craigslist

Craigslist предоставляет простую страницу 404 с ссылкой на главную страницу.

Craigslist
image-68

Niki Brown

Некоторые ссылки показаны на это странице как тайные, и они перенаправляют пользователя на хорошую музыку.

Niki Brown
image-69

cubeecraft

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

cubeecraft
image-70

Project-euh

Здесь вы можете наблюдать пример анимированной 404 страницы, а ссылка с анимации ведет каждый раз на разные страницы.

Project-euh
image-71

Technorati

Вариант страницы с последними записями и статьями сайта, это поможет отвлечь пользователя от того что он попал на страницу 404.

Technorati
image-72

Acme

Еще один пример необычной 404 страниц

Acme
image-73

Expansion Broadcast

Заполните форму, приведенную на этой странице, если вы не нашли то что искали. Это отличный способ взаимодействия с посетителями. Им также может дополнительно помочь социальный ссылки на Twitter и Facebook.

Expansion Broadcast
image-74

Attrition

Простой дизайн с простым сообщением о том что страница которую искали не найдена.

Attrition
image-75

webo group

Простая страница 404

webo group
image-76

THCNET

404 страница на THCNET не поможет вам найти то что вы искали прежде чем попасть сюда. Вместо этого они представили вам живое текстовое приключение игры Zork(игра 1980х годов). Попытайтесь сыграть в нее)

THCNET
image-77

Google запустил Web Starter Kit

Google запустил новый инструмент под названием Web Starter Kit — мощный инструмент для быстрой разработки мобильных сайтов.

Web Starter Kit
image-18

Ранее Google выпустил много туториалов основ современной веб разработки. В этот раз они выпустили целый набор шаблонов и инструментов, которые сосредоточены больше на проблемы производительности и развития multi-screen. Большинство сегодняшних front-end фреймворков уже давно игнорируют производительность приложений и их оптимизацию!

    Web Starter Kit находится в бета-версии, но он уже включает следующие функции:

  • Multi-device адаптивный шаблон
  • Кроссплатформенная синхронизация
  • Мгновенная перезагрузки браузера
  • Минимизация кода
  • Встроенный HTTP-сервер
  • Поддержка Sass

…и многое другое. Для того что бы Web Starter Kit работал, у вас должны быть установленны NodeJS, Ruby, и Ruby Sass Gem. Установка Gulp не является обязательным условием.

В комплект также входит мульти-скрин грид система вдохновленная фреймворками Bootstrap и Zurb’s Foundation. Но в отличие от этих фреймворков, этот комплект не предлагает никаких элементов и компонентов пользовательского интерфейса. Инженер Google Адди Османи заявил Hacker News, что они не намерены конкурировать с Bootstrap в плане компонентов пользовательского интерфейса.

Комплект поставляется с двумя основными шаблонов: index.html и Basic.html. Первый, index.html, является точкой входа для сайта. Он содержит адаптивный дизайн и панель навигации.

панель навигации
image-19

Второй шаблон, Basic.html, может быть использован в качестве основного шаблона, если вам не нужно выдвижное меню. Вы можете просто переименовать его в index.html, удалив перед этим основной шаблон.

Работа с Web Starter Kit от Google становится еще легче, когда у вас установлен Gulp. Все задачи Gulp предварительно настроены в файле gulpfile.js, он находится в корневом каталоге. Запустив из командной строки команду gulp в папке вашего проекта будут сгенерированны готовая папки /dist. Эта папка содержит сжатый CSS, JS файлы, оптимизированные изображения и сжатые файлы HTML.

Папки проекта web starter kit
image-20

Запуск команду gulp serve загрузится версия сборки приложения в браузер. Он использует Live Browser Reloading, для обновления браузера, когда вы вносите какие либо изменения в код.

Инструмент Gulp также уже настроена функция PageSpeed. Как только вы начали разработку приложений с использованием Web Starter Kit, запустите команду gulp pagespeed и вы увидите производительность в балах у конкретной страницы.

pagespeed web starter kit
image-21

Одна из лучших особенностей Web Starter Kit является руководства UX Style из коробки. Там показанно основные стили типографии, шрифт значки и CSS классы для грид системы.

style guide web starter kit
image-22

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