Существует много CSS-свойств, о которых некоторые дизайнеры просто не знают. Или — знают, но забывают использовать эти свойства там, где они способны принести большую пользу. Некоторые из этих свойств могут помочь отказаться от использования JavaScript ради достижения некоего результата, некоторые позволяют экономить время за счёт написания меньших объёмов CSS-кода. Я, занимаясь фронтенд-разработкой, постоянно натыкаюсь на подобные свойства. Однажды я подумал о том, чтобы взять и составить список CSS-свойств, интересных, но используемых редко. Так и родилась эта статья.

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

Сегодня мы предлагаем вашему вниманию перевод первого урока учебного курса по Vue.js для начинающих. Его порекомендовала Наталья Теплухина, Staff Engineer в Gitlab и Core Team Member фреймворка Vue (Q/A сессия с Наташей прошла в нашем инстаграм, а расшифровку можно прочитать здесь)

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

Это второй урок учебного курса по Vue.js для начинающих, который рекомендует Наталья Теплухина, Staff Engineer в Gitlab и Core Team Member фреймворка Vue (Q/A сессия с Наташей прошла в нашем инстаграм, а расшифровку можно прочитать здесь)

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



→ Vue.js для начинающих, урок 1: экземпляр Vue
→ Vue.js для начинающих, урок 2: привязка атрибутов
→ Vue.js для начинающих, урок 3: условный рендеринг
→ Vue.js для начинающих, урок 4: рендеринг списков
→ Vue.js для начинающих, урок 5: обработка событий
→ Vue.js для начинающих, урок 6: привязка классов и стилей
→ Vue.js для начинающих, урок 7: вычисляемые свойства
→ Vue.js для начинающих, урок 8: компоненты

А Вас не посещала мысль, что вёрстка руками — это долго, дорого, избыточно и устарело?
Меня вот постоянно. В данной статье я поверхностно затрону текущее состояние индустрии, проблематики и поделюсь результатами своих исследований.

Интересно? Добро пожаловать под кат!

Иллюстрация: Юлия Прокопова

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

Поэтому я оптимизирую настройки, чтобы показывать действительно, действительно хорошие буквы. Для этого необходим хороший монитор. Не просто нужен, а ОБЯЗАТЕЛЕН. А под «хорошим» я имею в виду настолько хороший, насколько это возможно. Это мои мысли, основанные на моём собственном опыте того, какие мониторы лучше подходят для программирования.

Имеется древняя игрушка LaserAge, которая написана на Flash (на очень древнем Macromedia Flash 4) и работает только под Windows. В детстве она мне очень понравилась, поэтому я решил для души портировать её, чтобы можно было играть с браузера со всех устройств.

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

При уничтожении всех противников на уровне происходит переключение на следующий уровень. Всего 100 уровней.

В терминах игры уровень — волна (Wave), а несколько волн объединены в большой уровень (Level), который представляет из себя просто смену заднего фона, т.е. всего 4 больших уровня в каждом из которых 25 волн. В последней волне большого уровня обычно бывает босс — противник с огромным значением жизни и мощным оружием.

Linux — это операционная система. Как винда (windows), только более защищенная. В винде легко подхватить вирус, в линуксе это практически невозможно. А еще линукс бесплатный, и ты сам себе хозяин: никаких тебе неотключаемых автообновлений системы!

Правда, разобраться в нем немного посложнее… Потому что большинство операций выполняется в командной строке. И если вы видите в вакансии «знание linux» — от вас ожидают как раз умение выполнять простейшие операции — перейти в другую директорию, скопировать файл, создать папочку… В этой статье я расскажу про типовые операции, которые стоит уметь делать новичку. Ну и плюс пара полезняшек для тестировщиков.

Я дам кратенькое описание основных команд с примерами (примеры я все проверяла на cent os, red hat based системе) + ссылки на статьи, где можно почитать подробнее. Если же хочется копнуть еще глубже, то см раздел «Книги и видео по теме». А еще комментарии к статье, там много полезного написали)

Что такое CI

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

Если вы не знаете как настроить CI в своем проекте, я приглашаю вас "под кат"

CI (Continuous Integration) — в дословном переводе «непрерывная интеграция». Имеется в виду интеграция отдельных кусочков кода приложения между собой. Чем чаще мы собираем код воедино и проверяем:

• Собирается ли он?
• Проходят ли автотесты?

Тем лучше! CI позволяет делать такие проверки автоматически. Он используется в продвинутых командах разработки, которые пишут не только код, но и автотесты. Его спрашивают на собеседованиях — хотя бы понимание того, что это такое. Да, даже у тестировщиков.

Поэтому я расскажу в статье о том, что это такое. Как CI устроен и чем он пригодится вашему проекту. Если вы больше любите видео-формат, можно посмотреть мой ролик на youtube на ту же тему.

С момента выхода моей предыдущей статьи о вопросах на собеседованиях Задачи с собеседований (front-end) прошло практически два года.

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

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

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

Введение

В этой статье я подробно расскажу о том, как работать с библиотекой discord.js, создать своего Discord-бота, а также покажу несколько интересных и полезных команд.

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

Начало работы

Если вы уже знакомы с приведёнными ниже материалами, — смело можете пролистать этот раздел.

Всем привет! Давно хотел и наконец написал небольшую книжку — бодрое пособие по своей профессиональной области: актуальным подходам к разметке интерфейсов, экранному дизайну и доступности. Она о моем оригинальном подходе к созданию GUI, препроцессорам CSS (для объективности, немного и об альтернативных подходах), и его эффективном практическом использовании с javascript и популярными реактивными компонентными фреймворками Vue и React. Материал представлен аккуратно последовательно, но безумно интенсивно и динамично — ничего лишнего или даже слишком подробного — для того чтобы увлеченный и подготовленный читатель не потерял интереса и «проглотил на одном дыхании». С другой стороны, текст, достаточно сложный ближе к концу, и на всем протяжении — густо насыщенный идеями, ссылками на технологии и подходы — поэтому, очевидно, будет «на вырост» начинающим. Но, в любом случае, как и если вы только начали интересоваться данной тематикой, так и если уже давно занимаетесь веб-дизайном, версткой и программированием фронтенда — вам может быть полезно на него взглянуть.

Одной из самых нужных функций, которой нет в бесплатной версии GitLab, является возможность голосования против обнуления репозитория контролировать Merge request (MR), используя обязательный code review.

Сделаем минимальный функционал сами — запретим Merge, пока несколько разработчиков не поставят «палец вверх» на MR.

Аве Кодер!

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

Использование публичных API помогает компаниям увеличивать ценность собственного ресурса, создавать уникальный контент и удовлетворять требования различных бизнес-задач. Wrike —  не исключение. На базе API Wrike создано уже более 30 тысяч приложений. Число пользователей продукта растет, а значит и требования к порталу возрастают с каждым днем.

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

Оглавление

Введение
Классификация круговых интерфейсов
Принципы проектирования кругового интерфейса
Основы анимации кругового интерфейса
Библиотека классов на JavaScript для реализации круговых интерфейсов

Введение

Круговой интерфейс – это графический интерфейс, элементы которого имеют круглую форму, расположены или анимированы по круговой траектории.

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

Рис. 1 – Примеры круговых интерфейсов

Круговые интерфейсы могут применяться с целью:

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

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

Мой брат недавно отучился на компьютерщика и сейчас завершает стажировку в области фронтенд-разработки. Он узнал и о CSS Grid, и о CSS Flexbox, но в том, как он пользуется этими механизмами создания макетов, я отметил одну особенность, с которой я уже сталкивался. А именно, ему тяжело даётся принятие решений о том, когда использовать Grid, а когда — Flexbox. Например, он использовал CSS Grid для создания макета заголовка сайта. При этом он отметил, что довести проект до ума ему было нелегко, и что ему пришлось долго экспериментировать с grid-column и настраивать всё до тех пор, пока у него не получилось то, что ему было нужно.



Честно говоря, мне это не понравилось. Поэтому я решил поискать какой-нибудь ресурс, который помог бы моему брату как следует уяснить различия между Grid и Flexbox и дал бы возможность взглянуть на примеры, созданные с использованием обеих этих технологий. Но ничего подходящего мне найти не удалось. Тогда я решил написать статью, посвящённую Grid и Flexbox. Надеюсь, она получилась понятной.

Прим. перев.: эта шуточная статья, которую по праву охарактеризовали как иллюстрацию «SEO-driven development», нашла очень большой отклик на Reddit и других ресурсах. Соглашаясь с актуальностью той истории, что пародируется автором оригинала, мы рады поделиться её переводом с русскоговорящим сообществом.



Сразу после своего основания в 2010 году $ИЗВЕСТНАЯ_КОМПАНИЯ вполне помещалась в $ГАРАЖЕ_БРАТАНА_ОСНОВАТЕЛЯ. С тех пор мы росли как на дрожжах, чему способствовали постоянные вливания средств венчурными капиталистами. Сегодня сотни миллионов ежедневно активных пользователей (DAUs) изо всех уголков мира пользуются нашими продуктами в мобильных приложениях и на сайте $famouscompany.com.

За это время мы уже несколько раз в панике чинили бэкенд, чтобы уменьшить свой технический долг (как правило, сразу после очередного масштабного сбоя) и наши серверы не навернулись. Имевшийся технологический стек верой и правдой служил нам все эти годы. Но со временем стало очевидно, что, переписав приложение «с нуля», мы сможем выжать из пользователей дополнительные 2 млрд долларов в год.

Корпоративная этика в американских компаниях кардинально отличается от российских и европейских. Там абсолютно другой менталитет. И специалистам, которые переезжают в США работать, бывает очень сложно привыкнуть к вечным улыбкам и сверхобходительному отношению начальства к сотрудникам.

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

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

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

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