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

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

CSS Refresher

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

От переводчика

Приветствую всех, меня зовут Максим Иванов, и сегодня я подготовил для вас перевод заметок разработчика из Сан-Франциско Васанта Кришнамурти (Vasanth Krishnamoorthy) «CSS Refresher». Web-программирование одна из самых быстро развивающихся отраслей в наше время. Казалось бы, возьми какой-нибудь видеокурс на tuts+ и освой html-верстку, однако, как говорил разработчик Opera Software Вадим Макеев, выступая на конференции CodeFest, они все равно это делают плохо. Но давайте посмотрим, может мы итак все это знаем.

Содержание

1. Позиционирование (position)
2. Отображение элемента в документе (display)
3. Плавающие элементы (float)
4. CSS селекторы
5. Эффективные селекторы
6. Переотрисовка и перерасчет
7. CSS3 свойства
8. CSS3 медиа-запросы
9. Адаптивный web-дизайн
10. CSS3 переходы
11. CSS3 анимации
12. Масштабируемая векторная графика (SVG)
13. CSS спрайты
14. Вертикальное выравнивание
15. Известные проблемы

Мне не нова магия Flexbox, но я не часто ее использую, и поэтому после паузы в использовании мне приходится открывать вот этот пост на CSS-Tricks чтобы освежить память.

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

Примечание: этот материал представляет собой свободный перевод статьи Джереми Томаса о том, как просто работать с Flexbox на примере верстки шаблона новостного сайта.

Поверьте, нет никакой необходимости в детальном разборе всех аспектов работы с Flexbox, если вы хотите начать им пользоваться уже сейчас. В этом руководстве автор собирается познакомить вас с некоторыми свойствами Flexbox и сделать «новостной лейаут» наподобие того, который вы могли видеть на сайте The Guardian.

Разработчики и неразработчики мыслят совсем по-разному. Поэтому то, что кажется всем остальным нормальным (вопросы, комментарии и просто фразы для поддержания разговора), может довести специалиста до белого каления. Менеджерам на заметку: если у программиста нервно задергался глаз после вашего вопроса, возможно, следует его переформулировать или вообще больше не задавать.

Такие вопросы, помимо нервного тика, приводят и к другим последствиям: у программистов не остается другого выхода кроме как соврать. Потому что дать человеку, далекому от программирования, экспресс-курс «Как писать код» за несколько минут, задача не из легких.

Итак, встречайте топ-7 фраз менеджеров, которые не оставляют выбора программистам.

В данной статье будет описан реальный способ получения сертификата от Let's Encrypt в ручном режиме для его дальнейшей установки на веб-сервер Windows (IIS/Microsoft Azure) или Linux (полностью ручной режим). Из-за отсутствия официального клиента под Windows для генерации сертификата будет использоваться дистрибутив Linux.



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

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

Данная статья — попытка этот обзор написать. Хотя нет, это скорее пост ненависти и боли (может даже немного нытья). Это такой расширенный вариант поста про минусы от pistol. Я постараюсь описать большинство тех вещей, которые раздражают именно меня и моих коллег в Битриксе. Постараюсь собрать в одном посте все те минусы, которые доставляют ежедневно очень много боли. Под конец я постараюсь сделать выводы.

Кто я такой? Да в общем-то, обычный разработчик. Работаю с битриксом с ноября 2010 года (5.5 лет). Работаю только с битриксом, не сделал ни одного коммерческого проекта на других CMS, не использовал фреймворки в создании сайтов. По роду деятельности я занимаюсь в основном интернет-магазинами, их созданием, поддержкой и развитием.

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

Здравствуйте. Меня зовут Андрей.
Летом прошлого года я опубликовал проект и статью "Чат-помощник на сайт с помощью Telegram за 15 минут". Идея проекта заключалась в том, чтобы реализовать на сайте всплывающий Чат-помощник, бэкэндом для которого (для чата) был бы набирающий популярность мессенджер Telegram.

На удивление проект довольно быстро стал набирать звезды на GitHub, а я — получать письма благодарности и просьбы о помощи в настройке от людей со всего света. Люди не могли запустить скрипт на своих хостингах: то set_time_limit(0) не поддерживается, то 503 ошибка, то пути не правильно указаны.
Вторая версия скрипта устанавливается намного проще и работает на основе WebHooks.

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

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

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

«Очень нравится сайт, потому что он не боится нарушать одно из первых правил шрифта – не использовать слишком много разных гарнитур. Используется четыре шрифта, два из семейства sans-serif и два из serif — Galaxie Copernicus, Interstate, Harriet и Nimbus Sans. Основной момент такого дизайна – последовательность, и сайт Бетани Хек последовательно использует каждый из шрифтов для своей цели.»
— Джеремия Шоаф, Typewolf

Расцениваю это, как вызов. Спасибо, Джеремия!

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



Так почему же у нас есть правила насчёт количества используемых гарнитур?

Введение

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

На компьютере был открыт текстовой файл со списком статей и библиотек про веб-разработку. Он постоянно пополнялся новыми данными.

Свернув его, я пошел на улицу в поисках кинотеатра с Deadpool'ом запустил браузер и стал блуждать по окрестностям интернета. Во время прогулки я наткнулся на интересную js-библиотеку по созданию css-анимации, которую добавил в открытый до этого текстовой документ… Как оказалось, по этой теме у меня уже набралось больше 40 ссылок на материалы и библиотеки.

Не секрет, что большинство сайтов в наши дни взламываются не вручную. Есть большая армия ботов, которые ищут уязвимость в скриптах сайтов, брутфорсят админ-панели CMS, FTP/SSH аккаунты, затем загружают небольшие скрипты-загрузчики или бэкдоры, через них внедряют в скрипты сайта несколько десятков управляющих «агентов», а также раскидывают по случайным каталогам, открытым на запись, веб-шеллы, спам-рассыльщики и другие вредоносные php (и иногда perl) скрипты. Изнутри зараженный сайт выглядит примерно так (фрагмент отчета сканера AI-BOLIT):



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

• 41 вставка бэкдора
• 5 WSO веб-шеллов
• 4 скрипта, внедряющих вредоносный код в .php файлы
• 7 mail() спам-рассыльщиков
• 2 спам-рассыльщика, работающих через SMTP
• 1 бэкдор
• 1 скрипт, внедряющий вредоносный код в wordpress/joomla скрипты

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

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

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

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



Сегодня мы представляем вашему вниманию выжимку из статей блога FreshInbox о том, как создать интерактивное email-письмо.

Некоторое время назад после волшебного пендаля под названием Tolstoy Summer Camp я начал пилить свой стартап.
Сначала у меня в команде было два разработчика и дизайнер. Потом один разработчик ушёл пилить свой проект. Затем появился другой разработчик. И всё бы ничего, но я сходил с ума от того что не мог найти простых и понятных средств ведения дел в таких маленьких компаниях как моя.
Я перепробовал тучу всяких Basecamp, Asana, Redmine, Trello, Мегаплан и прочих, массу мессенджеров в разных сочетаниях c он-лайн файлопомойками типа Dropbox и GoogleDrive — ничего мне не нравилось. «Ну, не то это всё, не то!».

Недавно мы в «Я люблю ИП» закончили курсы по дизайну от trydesignlab.com. И это одна из самых важных статей, которую нам посоветовал ментор в процессе обучения. Именно поэтому мы решили её перевести. Посмотреть все наши работы с курсов можно в ВКонтакте по тэгу #design101@iloveip.

Вступление

Сначала о главном. Это руководство не для всех. Это руководство прежде всего для:

• разработчиков, которые хотят уметь делать хорошие интерфейсы для себя, если вдруг прижмёт;
• UX-дизайнеров, которые знают, что хороший UX-дизайн продаётся лучше в красивой UI-упаковке.

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

А пока давайте я расскажу, что вы найдёте в этой статье.

Синтаксис CSS несложен, и для понимания его совсем не нужно иметь степень доктора в области IT. Однако, это один из немногих популярных языков, который не является логичным в самом прямом смысле этого слова. В отличие от других языков веб-программирования, таких как JavaScript и PHP, в CSS проблемы не решаются с помощью обычной логики. Алгоритмы типа «если X, то сделать Y, в противном случае сделать Z» или «выбрать все Y, затем сделать с ними X» не могут быть осуществлены в таком языке, как CSS. Проще говоря, это язык, созданный для оформления, язык для дизайнеров, а не девелоперов. Некоторые из опытных программистов, с которыми я работал, именно по этой причине тратили много усилий на то, чтобы освоить CSS.

Обучение CSS начинается с классов и ID, а также с использования . и # для непосредственного обозначения элементов. Этого достаточно чтобы построить полнофункциональный веб-сайт, но это не достаточно гибкое решение в случае полной смены дизайна. Давайте взглянем на альтернативный подход к управлению такими труднодоступными элементами.

Довольно часто люди не понимают разницы между шириной (width) и шириной устройства (device-width) (и, более того, есть примеры с минимальной (min-device-width) и максимальной шириной устройства (max-device-width)), используя медиазапросы CSS. Это недопонимание приводит к написанию плохого кода и значительно большему количеству работы для разработчика. Этот вопрос очень часто встречается на форумах SitePoint, поэтому пришло время объяснить все подробнее. В этой статье будет затронута эта проблема, а также мы более подробно рассмотрим, какой вариант следует использовать, создавая отзывчивые сайты.

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