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

Вероятно, вы уже знакомы с блоковой моделью CSS для обычных элементов. Давайте начнем с аналогичного «общего обзора» для CSS Grid:


В основе структуры CSS Grid находится основной контейнер, представляющий собой обычный div, имеющий margin, border и padding. Для создания CSS grid контейнера добавим свойство display: grid. Элементы сетки — это потомки, размещенные внутри родительского контейнера. Они обычно определяются как список, описывающий header, sidebar, footer или другие аналогичные элементы макета сайта, зависящие от его дизайна.

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

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

В этом году вы со своим приятелем Стивом Стивингтоном основали стартап по отслеживанию пользователей. Бизнес основан на утечке метаданных WhatsApp, которую вы обнаружили. Вам обоим стоило бы ещё поучиться менеджменту, но всё же фирма выросла в мощную, хотя неустойчивую компанию из 65 разномастных стажёров и студентов, фрилансеров и неоплачиваемых работников на испытательном сроке. Вы недавно переехали в щегольской новый офис в отделе литературы 19-го века Общественной библиотеки Сан-Франциско, и у вас завидная репутация в сфере интернет-маркетинга.

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

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

Собеседование — это экзамен

Ведущий — строгий учитель, а кандидат — студент. Классический сеттинг. Обычно проходит так. Спросили откуда ты, что ты, и потом пошло техническое собеседование.

Начинается с простых вопросов на раскачку, примерно таких:

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

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

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

Материал, посвящённый переменным окружения в Node.js, перевод которого мы сегодня публикуем, написал Берк Холланд, веб-разработчик, в сферу интересов которого входят JavaScript, Node.js и VS Code. Кроме того, стоит отметить, что у него сложились непростые отношения с Java. Вот его история.

Переменные окружения — одна из фундаментальных конструкций среды Node.js, но почему-то я никогда не стремился научиться правильно ими пользоваться. Возможно, случилось так из-за их названия — «Environment Variables». Это название вызывало у меня нечто вроде посттравматического синдрома, неприятные воспоминания о том, как я пытался добавить путь к домашней директории Java в Windows. Я тогда толком не мог понять, надо ли добавлять этот путь в переменную PATH, в переменную JAVA_HOME, или и туда и туда. Было неясно и то, нужно ли, чтобы в конце этого пути стояла точка с запятой. Собственно говоря, тогда у меня возникал и вопрос о том, почему я использую Java. Как бы там ни было, я наконец нашёл в себе силы и приступил к знакомству с переменными окружения Node.



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

При поиске этого словосочетания англоязычный Гугл выдает 104 000 000 результатов. По статистике, боязнь публичных выступлений входит в топ-5 человеческих страхов. Каждый выступавший признается в интервью, что хотя бы раз испытывал страх перед выступлением.

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



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

Автор материала, перевод которого мы сегодня публикуем, говорит о том, что из опыта знает о важности опенсорсных проектов в деле веб-разработки. Однако, из-за того, что на GitHub присутствует очень много библиотек для React, программисты оказываются избалованы выбором. Поэтому было бы неплохо сузить рассматриваемые варианты до буквально нескольких проектов. Перед вами — обзор первой десятки самых популярных библиотек для React с GitHub, ранжированных по количеству присвоенных им звёзд.

Глубока ли кроличья нора?



Сколько минут вам потребуется, чтобы понять в чем фишка?

Фрэнсис Бэкон в 1620 году разделил источники человеческих ошибок, стоящих на пути познания, на четыре группы, которые он назвал «призраками» или «идолами» (лат. idola).

• «Призраки рода» проистекают из самой человеческой природы, они не зависят ни от культуры, ни от индивидуальности человека. «Ум человека уподобляется неровному зеркалу, которое, примешивая к природе вещей свою природу, отражает вещи в искривлённом и обезображенном виде».
• «Призраки пещеры» — это индивидуальные ошибки восприятия, как врождённые, так и приобретённые. «Ведь у каждого, помимо ошибок, свойственных роду человеческому, есть своя особая пещера, которая ослабляет и искажает свет природы».
• «Призраки площади (рынка)» — следствие общественной природы человека, — общения и использования в общении языка. «Люди объединяются речью. Слова же устанавливаются сообразно разумению толпы. Поэтому плохое и нелепое установление слов удивительным образом осаждает разум».
• «Призраки театра» — это усваиваемые человеком от других людей ложные представления об устройстве действительности. «При этом мы разумеем здесь не только общие философские учения, но и многочисленные начала и аксиомы наук, которые получили силу вследствие предания, веры и беззаботности». [Wikipedia]

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

Я как-то немного пропустил статью и весь всплеск обсуждений и критики Xored. Поэтому буду нагонять.

Xored — лучшее место для работы, со своей уникальной культурой, уникальным подходом к росту и открытой зарплатной сеткой. Интересные задачи, отличный сплоченный коллектив, гибкий график, возможность частичной работы, и еще много-много всего. За последние годы фирма выросла до 110 человек. При всем при этом, она сохранила и хорошие зарплаты, и интересные проекты, и командный дух.

Всё началось, когда автор Ruby on Rails признался миру:

Вконтакте запустил Streaming API, инструмент для получения публичных данных из ВКонтакте по заданным ключевым словам.

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

Давайте напишем бота для телеграмма с оповещением о записях в ВК.

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

Стиль — авторский.

Узнаете, об использовании Rollup как более компактную и эффективную альтернативу webpack и Browserify для объединения файлов JavaScript.

В конце этого руководства мы сконфигурируем Rollup для:

• объединения нашего скрипта,
• удаления неиспользуемого кода,
• трансплайнинг его для работы со старыми браузерами,
• поддержки использования модулей Node в браузере,
• работы с переменными окружения и
• оптимизации нашего кода для уменьшения размера выходного файла

Предварительные требования

• Начальные знания в JavaScript.
• Первоначальное знакомство с модулями ES2015 также не повредит.
• На вашем компьютере должен быть установлен npm. (У вас его нет? Установите Node.js здесь.)

Всем привет! Хочу поделиться своим переводом интересной статьи Reducing our Redux code with React Apollo автора Peggy Rayzis. Статья о том, как автор и её команда внедряли технологию GraphQL в их проект. Перевод публикуется с разрешения автора.

Переключаемся на декларативный подход в Высшей Футбольной Лиге

Я твёрдо убеждена, что лучший код — это отсутствие кода. Чем больше кода, тем больше вероятности для появления багов и тем больше тратится времени на поддержку такого кода. В Высшей Футбольной Лиге у нас совсем небольшая команда, поэтому мы принимаем этот принцип близко к сердцу. Мы стараемся оптимизировать всё, что нам по силам, либо путём увеличения переиспользуемости кода, либо просто перестав обслуживать определённую часть кода.

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

Все пользователи облачных сервисов Amazon давно знают про родной консольный инструмент для работы с ними — aws-cli. Но оказалось, что далеко не всем его достаточно: по этой причине компания WALLIX выпустила альтернативное и более функциональное решение под названием awless.

Исходный код awless написан на языке Go (использует AWS Go SDK) и опубликован на GitHub под свободной лицензией (Apache License 2.0). Текущая версия awless — 0.1.0. Поддерживаются операционные системы GNU/Linux, Mac OS X и Windows. Что же позволяет эта утилита?

Одной из лучших особенностей React является то, что он не накладывает каких-либо ограничений на файловую структуру проекта. Поэтому на StackOverflow и аналогичных ресурсах так много вопросов о том, как структурировать React-приложения. Это очень спорная тема. Не существует единственного правильного пути. Предлагаем разобраться в этом вопросе с помощью статьи Джека Франклина, в которой он рассказывает о подходе к структурированию больших React-приложений. Здесь вы узнаете, какие решения можно принимать при создании React-приложений: о выборе инструментов, структурировании файлов и разбивки компонентов на более мелкие части.

Чтобы перейти с bash на zsh необходимо знать базовые отличия между ними — без этого будет сложно провести первоначальную настройку zsh в ~/.zshrc.

Я не нашёл краткого описания этих отличий когда переходил сам, и мне пришлось потратить немало времени на вычитывание документации zsh. Надеюсь, эта статья упростит вам переход на zsh.

Зачем переходить

Для начала — а стоит ли вообще тратить своё время и внимание на переход? Учить ещё один диалект sh, менее распространённый чем POSIX sh или bash, заново заниматься настройкой рабочего окружения…

На мой взгляд, если вы проводите много времени в консоли, вам нравятся Vim или Emacs и вы уже потратили немало времени на их настройку "под себя" — однозначно стоит! Zsh по духу очень на них похожа: это очень сложная и гибкая программа, чьи возможности полностью мало кто знает, но потратив некоторое время на настройку можно получить очень удобную лично вам рабочую среду.

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

UPD. CardInfo больше не работает. Используйте BinKing.

Гайд по использованию: https://habr.com/ru/post/527796/
Сайт сервиса: https://binkng.io

Всем кто верстал, верстает или будет верстать форму для приёма банковских карт дарю плагин CardInfo.js, с помощью которого можно сверстать вот такую форму:

Плагин по номеру карты определяет один из 49 российских банков (потом и прочие страны добавлю), выдаёт вам логотип банка, цвета для фона, ссылку на сайт банка, определяет тип карты, его логотип и прочее. С этими данными делаете что хотите, верстаете любую форму.

Поиграться с формой можно на демо странице. Код плагина и инструкции по установке на гитхабе.

Под катом:

• Пара слов о плагине;
• Про базу банков, и почему их 49, а не 50;
• Про логотипы банков;
• Про логотипы типов;
• Несколько моих вопросов к читателям;