CSS Protips

Это современные решения типичных проблем, коллекция советов, которая поможет вам улучшить ваши профессиональные навыки CSS.

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

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

Cодержание

1. Используем псевдо-класс :not для задания рамки навигации
2. Добавляем межстрочный интервал элементу body
3. Центрируем по вертикали все что угодно
4. Правильно разделяем запятыми элементы списков
5. Отрицательный порядковый номер в nth-child
6. Используем SVG-логотипы
7. Аксиоматический CSS
8. Максимальная высота у CSS-слайдера
9. Наследуем box-sizing
10. Одинаковая ширина ячейки таблицы
11. Динамические внешние отступы при помощи flexbox
12. Используем селектор атрибутов пустых ссылок
13. Стили по умолчанию для обычных ссылок

При создании сайтов часто возникает задача создания админки для редактирования контента. Задача, в общем, тривиальная, но сделать удобную админку не так-то просто.

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

Всем известный jQuery-плагин tablesorter с tablesorterPager-ом и менее известный, но гораздо более функциональный DataTables хороши, но обладают некоторыми недостатками. Главный из них — сложность динамического добавления новых строк в таблицу (после добавления строки в таблицу, новая строка потеряется при следующем вызове сортировки). tablesorter вообще не даёт средств для добавления строки в свой кэш, DataTables предоставляет широкое и функциональное API для управления внутренним представлением таблицы, но это API довольно многословно и не очень гибко.

Хочу предоставить общественности реализацию админки на относительно новой javascript-фреймворке AngularJS. Будет создана страничка для редактирования списка вопросов, разбитых по категориям и отвечающим. В статье нет сравнения с другими подобными фреймворками, но нет и простого повторения официальной документации, я постараюсь поделиться своим опытом в использовании фреймворка и расскажу о нескольких интересных приёмах работы с ним.

Сразу приведу, что получится в итоге (кликабельно):

Осенью Академический университет и Computer Science Center запускают годовую образовательную программу по основам программирования (code.stepic.org). Программа запускается на платформе онлайн-обучения Stepic. При успешном завершении программы студентам будет выдан диплом о профессиональной переподготовке от Академического университета.

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

В ушедшем году, вышел стандарт ECMAScript 2015 (неформально ES6), который сильно изменил, то к чему мы привыкли. Появилась масса новых возможностей, которые по сути представляют собой современное надмножество языка, пытающегося решить существующие проблемы. Class, let, const, стрелочные функции… разработчик, который ранее не видел код, написанный на ES6, не сразу догадается, что перед ним, по сути, старый добрый JS.

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

Здравствуйте, меня зовут Александр Зеленин и я веб-разработчик. Я расскажу, как сделать так, чтобы ваш сайт открывался быстро. Очень быстро.

Это обзор и частичный перевод статьи Advait Sarkar из Computer Laboratory, University of Cambridge «The impact of syntax colouring on program comprehension».

Краткое содержание

Взяли 10 случайных «computer science» студентов-магистров из University of Cambridge (на самом деле 7, так как 3 очкарика оказались частично несовместимы с оборудованием Tobii2 X120 eye tracker). Предложили разбираться с короткими вычислительными задачами на Python (надо было назвать корректный результат выполнения кода). Замеряли время выполнения задач. Не давали ничего записывать на бумажке (только думать, можно вслух). Следили за глазами с помощью упомянутой окулографической системы.

В конце попросили оценить свой опыт в программировании (да, с учетом возможного эффект Даннинга — Крюгера).

Выводы

• Подсветка помогает быстрее понимать код. На примере 6 задач с общим временем решения в 13 — 20 минут:
  
  • 8.4 секунды разницы между медианами времени выполнения задачи (с гипотезой, что для больших задач эффект становится заметнее)
  • значительное (на 23 штуки) уменьшение количества переключений внимания (переводов и фиксации взгяда с места чтения на различимо другую область задания)
• эффективность помощи обратнопропорциональна квалификации (но нелинейно, т.е. не установлено, что когда-то подсветка перестанет помогать)
• работает только в том случае, если вы знаете что каким цветом подсвечивается
• мозг может игнорировать подсказки подсветки, если вы «ищете свободным поиском» (т.е. подсветка не мешает размышлять)

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



В общем, все хорошо, всем цветов!

Графики, цифры и более подробные выводы из статьи:

Просто «El clasico»

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

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

Средства массовой информации не перестают освещать тему нехватки квалифицированных программистов («программистов», «кодировщиков», «разработчиков ПО», поскольку все термины означают одно и тоже, я буду использовать из как взаимозаменяемые). Постоянно ведутся споры по поводу низкого уровня квалификации программистов. По сути мы просто не в состоянии подготовить кадры, соответствующие «солидным запросам завтрашнего дня». Вот что пишет The Telegraph:

«Согласно данным Научного Совета, к 2030 году количество специалистов в сфере информационно-коммуникационных технологий вырастет на 39%, а в отчете О2 за 2013 год отмечалось, что для удовлетворения спроса на такого рода специалистов в период до 2017 года потребуется порядка 745 000 новых сотрудников.

Кроме того, по результатам исследований, проведенных в прошлом году City & Guilds, три четверти работодателей из сферы IT, компьютерных и информационных услуг отметили явную нехватку квалифицированных кадров, в то время как 47% опрошенных заявили о неспособности действующей системы образования подготовить хороших специалистов».

Урок курса «Android. Быстрый старт»

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

История течет так быстро, что уже только убелённые сединами хипстеры начала этого века помнят, что в одном из гаражей города Пало Альто совсем недалеко от стен альма-матери множества IT-корпораций, в том числе, Sun Microsystems – Стэнфордского Университета, в 2003 году во время товарищеской вечеринки были сформулированы основные идеи программного продукта, который позже стал мировым хитом.

Базовые ценности никто не отменял

Почему мы упомянули Стэнфорд и Sun? Не только для того, чтобы передать тот дух свободы и творчества, который царил в это время в Кремниевой Долине, но и для того, чтобы с момента своего знакомства с Android, начинающие программисты понимали – эта ОС не появилась как бы сама собой на клочке бумаги и не была написана вот так «на коленке» юным дарованием.

За ней стояли люди, которые прекрасно понимали, что и зачем они делают. А заработанные ими 130 млн. долларов в 2005 году от продажи своего продукта корпорации Google только это доказывают.

Проблемы git-flow

Повсюду путешествую, преподавая Git людям — и почти на каждом уроке и семинаре, недавно мною проведённом, меня спрашивали, что я думаю о git-flow. Я всегда отвечал, что думаю, что этот подход великолепен — он взял систему (Git), для которой могут существовать мириады возможных рабочих процессов, и задокументировал один проверенный и гибкий процесс, который для многих разработчиков годится при довольно простом употреблении. Подход этот также становится чем-то вроде стандарта, так что разработчики могут переходить от проекта к проекту и из компании в компанию, оставаясь знакомыми с этим стандартизированным рабочим процессом.

Однако и у git-flow есть проблемы. Я не раз слыхал мнения людей, выражавших неприязнь к тому, что ветви фич отходят от develop вместо master, или к манере обращения с хотфиксами, но эти проблемы сравнительно невелики.

Для меня одной из более крупных проблем git-flow стала его сложность — бóльшая, чем на самом деле требуется большинству разработчиков и рабочих групп. Его сложность ужé привела к появлению скрипта-помощника для поддержания рабочего процесса. Само по себе это круто, но проблема в том, что помощник работает не из GUI Git, а из командной строки, и получается, что те самые люди, которым необходимо действительно хорошо выучить сложный рабочий процесс, потому что им вручную придётся пройти все шаги его — для этих-то людей система и недостаточно удобна для того, чтобы использовать её из командной строки. Вот что становится крупною проблемою.

Все эти проблемы можно без труда преодолеть, следуя гораздо более простому рабочему процессу. Мы не пользуемся git-flow в Гитхабе. Наш рабочий процесс основан (и всегда был основан) на более простом подходе к Git.

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

Рабочий процесс Гитхаба

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

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

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

С другой стороны, мы могли просто переименовать файлы и включить их в один прекомпилированный css (без какого-либо рефакторинга). Но для улучшения кода было бы хорошо порефакторить стили. Эта работа более затратная, но в будущем себя бы окупила. И, что самое важное — это позволило бы нам работать быстрее, с большей уверенностью что мы что-то не сломаем.

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

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

На этот раз было решено построить визуально регрессионный набор тестов.

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

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

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

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

Предлагаю читателям «Хабрахабра» перевод статьи Брэда Фроста (Brad Frost) «Atomic Web Design».



Мы не проектируем страницы, мы проектируем системы компонент. — Stephen Hay

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

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

Здравствуйте всем!

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

Удобочитаемый синтаксис, прост в обучении, высокоуровневый язык, Объектно-Ориентированый язык программирования (ООП), мощный, интерактивный режим, масса библиотек. Множество иных плюсов… И это всё в одном языке.
Для начала окунёмся в возможности и узнаем, что же умеет Python?

Муда, что по-японски означает «потери» — это любая деятельность, которая потребляет ресурсы, но не создает ценности для клиента. (Источник).



Эта короткая заметка для тех, кто системно ищет, где его студия теряет деньги. Похвальное занятие в наше весёлое время.

Хорошо систематизировали виды потерь ребята из Toyota. Тойотовцы выделяют 7-8 видов муды, потерь на производстве. Посмотрим, есть ли аналоги между потерями в автомобилестроении и работе студии.

Если на вашем столе стоит чашка остывшего желанного кофе или чая, значит, что-то не так. Во всяком случае, так наверняка подумал бы Дэвид Аллен, автор знаменитого метода GTD (Getting Things Done). Мы хватаемся за тысячу дел, пытаясь попутно не забыть про бытовые мелочи, часто забываем о цели, но помним о неотвратимо приближающихся дедлайнах. Порой страх перед лавиной задач буквально парализует мозг и наступают апатия, прокрастинация, депрессия. Работа в такие моменты движется медленно, кажется, даже курсор мыши еле ползёт по монитору. Такая ситуация тем опаснее, чем больше человек работает в команде, особенно, если речь идёт о команде разработчиков.

Веб-разработчику постоянно необходимо быть в курсе появления новых библиотек и инструментов. Я нашёл и выбрал несколько лучших инструментов для разработки как CSS, так и JavaScript. Это не просто копипаста – это выборка, основанная как на рекомендациях, так и на личном опыте использования.

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

Лучшие инструменты для CSS и JavaScript

1) Fileicone

Сборник 100%-CSS файловых иконок. Может пригодиться для дизайна страниц.



2) Marx

Элегантное обнуление CSS безо всякого JavaScript.

Сегодня мы представляем вашему вниманию адаптированную подборку инструментов (в том числе облачных) для разработчиков, которые позволяют создавать по-настоящему качественные проекты. Здесь представлены исключительно SaaS, PaaS и IaaS сервисы, предоставляющие бесплатные пакеты для разработчиков инфраструктурного ПО.

Прошло полгода с последней новости о TARS на хабре.

Напомню, что TARS — это сборщик html-верстки, основанный на gulp, в помощь любому frontend-разработчику (или даже целой команде), для создания проектов любой сложности. За последние шесть месяцев было закрыто 88 issue, выпущено 7 версий, появился CLI, так вышло, что с yeoman’ом отношения не сложились, поэтому появилась своя версия. TARS переехал в свой новый дом на github, обзавелся командой из 4 разработчиков + небольшой армией фанатов. Кстати, огромное вам спасибо за мгновенные фидбеки после релизов и не только. TARS был внедрен в нескольких вебстудиях России и за рубежом. Сборщик научил компонентному подходу не один десяток разработчиков, привлек в ряды frontend’еров тех, кто боялся всей рутины верстки. В общем, появилось много всего нового, и об этом хотелось бы рассказать.