• Делаем адаптивный HTML, добавляя одну строку в CSS

    • Перевод
    image

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

    И самое классное: адаптивность будет добавлена с помощью одной строки CSS.
    Это означает, что нам не нужно загромождать HTML лишними классами (Col-sm-4, col-md-8) или создавать медиа-запросы для каждого размера экрана.

    Рассмотрим все подробнее.
    Читать дальше →
  • Фэйковый дизайн

    • Перевод
    image

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

    Я еще отчетливо помню, когда я разрабатывал свои собственные обложки для CD известных групп, создавал фейковый сайт для электронной торговли со своими друзьями, воссоздавал известные логотипы в графическом редакторе «Corel Draw», переделывал популярный вебсайт просто для того, чтобы посмотреть, что бы я сделал иначе, и создавал фэйковый логотипы для несуществующих продуктов, которые ещё не существовали.

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

    Но все эти фейковые работы оказались чрезвычайно важны для моей карьеры.
    Читать дальше →
    • +19
    • 16,5k
    • 8
  • Взламываем собеседования: по алгоритмам, по архитектуре, поведенческие и прочее

    • Перевод
    image

    Я только что закончил семь собеседований в компаниях Кремниевой долины. В конечном итоге я принял предложение разработки программного обеспечения в Facebook.

    Вот как я готовился к этим собеседованию и чему я научился на этом пути.

    Мой многолетний путь в Кремниевую долину


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

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

    Я оставил свое место в качестве ведущего инженера iOS в чудесной компании в Мельбурне и я вернулся обратно в мой родной город Перт, чтобы учиться. Тут я буду готовиться к переговорному процессу которое ждет меня в Кремниевой долине. Я знал, что это будет невероятно сложно и тяжело.

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

    Ради этой статьи я не буду вступать в эту дискуссию. Вместо этого я рассмотрю различные типы методов интервью с точки зрения кандидата. Я также сосредоточу внимание на том, что я узнал из этого процесса.
    Читать дальше →
  • Что я узнал после 1000 code review

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

    Вот мои 3 (+1 бонусная) наиболее распространенные рекомендации по код-ревью.

    image

    Рекомендация 1: Выбрасывайте исключения, если что то идет не так


    Зачастую паттерн выглядит так:

    List<String> getSearchResults(...) {
      try {
        List<String> results = // make REST call to search service
        return results;
      } catch (RemoteInvocationException e) {
        return Collections.emptyList();
      }
    }


    Этот паттерн вызвал перебои в одном из мобильных приложений, над которыми я работал. Поиск на стороне сервера, который мы использовали, начал выбрасывать исключения. Оказалось, на серверном API приложения был некоторый код, похожий на приведенный выше. Поэтому приложение получало 200 ответ сервера и с радостью показывало пустой список для каждого поискового запроса.
    Читать дальше →
  • 8 учебных проектов

    • Перевод
    «Мастер совершает больше ошибок, чем новичок — попыток»

    Предлагаем 8 вариантов проектов, которые можно сделать «по фану», дабы получить реальный опыт разработки.

    Проект 1. Клон Trello


    image


    Клон Trello от Indrek Lasn .

    Что вы освоите:

    • Организация маршрутов обработки запросов (Routing).
    • Drag and drop.
    • Как создавать новые объекты (доски, списки, карточки).
    • Обработка и проверка входных данных.
    • Со стороны клиента: как использовать локальное хранилище, как сохранять данные в локальном хранилище, как читать данные из локального хранилища.
    • Со стороны сервера: как использовать базы данных, как сохранять данных в базе, как читать данные из базы.

    Тут пример репозитория, сделанного на React+Redux.
    Читать дальше →
  • Эволюция «img»: Gif без формата GIF

    • Перевод
    image

    tl;dr

    • GIF — это круто, но в плане качества и производительности они ужасны.
    • Замена GIF на video хорошая идея, но есть недостатки: они не подгружаются предварительно, используют range запросы.
    • Сегодня вы можете использовать img src =".mp4" в Safari Technology Preview.
    • Предварительные результаты показывают, что mp4s в тегах отображаются в 20 раз быстрее и декодируются в 7 раз быстрее, чем GIF-эквивалент — в дополнение к тому, что размер файла равен 1/14!
    • Фоновые CSS-видео и адаптивные видео могут стать клевой фишкой.
    • Наконец, синемаграфы будут без недостатков GIF.
    • Теперь мы ждем, когда другие браузеры пойдут следом: этот пост весит — 46 МБ на Chrome, и всего 2 МБ в Safari TP.

    Особая благодарность: Эрику Портису, Джеку Ноблу, Джону Дэвису, Дорону Шерману и Йоаву Вайсу.
    Читать дальше →
  • Как быстро спроектировать сайт с помощью CSS Grid

    • Перевод
    image

    Модуль CSS Grid — это фантастический инструмент для создания макетов веб-сайтов. Он позволяет вам экспериментировать с макетами быстрее, чем любой другой инструмент, которые я пробовал.

    В этой статье я научу вас, как это сделать.

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

    Если вы совершенно не знакомы с CSS Grid, вам может понадобиться просмотреть мою предыдущую статью Учим CSS Grid за 5 минут.
    Читать дальше →
  • Я создал приложение, которое делает изучение алгоритмов и структур данных гораздо интереснее

    • Перевод
    image

    Интерфейс CS-Playground-React

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

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

    Зайдите на CS-Playground-React, простую браузерную JavaScript-песочницу для изучения и практикования алгоритмов и структур данных.

    Это приложение не требует регистрации и автоматически сохраняет ваши достижения, предлагает решения когда вы застряли, и имеет кучу ссылок на полезные статьи, туториалы, и другие ресурсы, чтобы помочь сделать ваше обучение не очень болезненным, как было у меня.
    Читать дальше →
  • Учим CSS Grid за 5 минут

    • Перевод
    Быстро познакомимся с будущим макетов веб-сайтов.

    image

    Grid макеты имеют основополагающее значение для дизайна веб-сайтов, а модуль CSS Grid — это самый мощный и простой инструмент для его создания.

    В этом году модуль также получил нативную поддержку основных браузеров (Safari, Chrome, Firefox), поэтому я считаю, что всем фронтенд разработчикам придется изучать эту технологию в недалеком будущем.

    В этой статье я быстренько расскажу вам об основах CSS Grid.
    Читать дальше →
  • Хакерские байки c Quora

    • Перевод

    История первая


    Восемь лет назад в старшей школе я хакнул основной сервер моей школы и нанес реальный вред.

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

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

    Однажды я попросил учителя помочь мне с проектом, над которым работал, и он согласился. После урока я подошел к нему и отдал ему свою флешку. Он ее вставил в свой терминал, и мы начали обсуждать мой «проект».

    Он не знал, что на флешке был мой самозапускаемый троян. Файл был зашифрован, поэтому он проскочил через уже устаревший антивирус и заразил его терминал. Поэтому теперь оставалось лишь ждать, когда он попробует залогиниться на основном сервере.
    Читать дальше →
    • +8
    • 10,4k
    • 4
  • Фрэймворк для разработки продуктов от Facebook

    • Перевод
    Julie Zhuo, директор по продуктовому дизайну в Facebook, однажды выступала на «TNW Europe», и рассказывала о фрэймворке, который используется в Facebook, чтобы сфокусироваться на разработке продукта.

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

    Этот список не идеальный и не полный. Если бы была какая-то пошаговая инструкция (Шаг 1: Идея. Шаг 2: ??? Шаг 3: Профит!), тогда я бы потратила на неё хорошие деньги, а потом похлопала нас по спинам и смотрела бы, как новые потрясающие продукты цветут вокруг нас, словно цветочные поля в мае.

    Путешествие завершено на 1%. Давайте продолжим идти дальше и обучаться.

    Фрейминг


    1. Продукт успешен, потому что решает проблемы за людей. Это звучит очень просто, но это самая важная вещь, которую нужно понимать в создании хороших продуктов.
    2. Первым шагом в создании чего-то нового является понимание того, какую проблему ты хочешь решить и для кого. Это должно быть предельно ясно до того, как вы начнете думать над решением.
    3. Третий вопрос, который вы должны себе задать: «Почему именно эту проблему стоит решать?»
    4. Если аудитория, для которой вы создаете, узко определена (и вы её часть), то вы можете положиться на свою интуицию, чтобы принимать решения по продукту. Если же нет, то стоит полагаться на исследования и данные.
    5. Если вы — основатель стартапа, будет легче начать с решения проблем узкой аудитории, а затем расширяться к общей аудитории после того, как вы заручитесь изначальной поддержкой.
    6. Проблема, которую вы пытаетесь решить, должна быть поняла за пару предложений и резонировать с кем-либо из вашей целевой аудитории. Если этого не происходит, то считайте это тревожным признаком.
    Читать дальше →
  • [Опрос] Ваш самый нелегальный/неэтичный проект

    • Перевод

    История первая


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

    Чувак в адрес компании: если уволите меня, ваша система прекратит работать.

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

    В чем был фокус?

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

    Нелегально? Возможно. Неэтично? Ага. Отличная история? А то!

    Nupul Kukreja, Senior Engineer at Credit Karma
    Еще 5 историй
  • Использование SVG в качестве Placeholder’a

    • Перевод
    image

    Генерация SVG из изображений может использоваться для Placeholder’ов.

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

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

    В этом посте мы рассмотрим следующие темы:

    • Обзор различных типов Placeholder’ов
    • Placeholder на основе SVG (контуры, фигуры и силуэты)
    • Автоматизация процесса.

    Читать дальше →
  • [Ответ программиста из Google] Есть ли жизнь после 35-40 лет? (для разработчика софта)

    • Перевод
    image

    Джеф Нельсон (Jeff Nelson), придумал Chromebook, #Xoogler.

    Думаю, этот вопрос следует разбить на три разных вопроса или по-другому его сформулировать. Давайте разделим вот так:

    1. Является ли возрастной признак определяющим в карьере программиста?
    2. Не стоит ли мне подумать о карьере технического руководителя вместо должности наемного профессионала?
    3. Является ли совершенствование себя как разработчик софта тупиковым вариантом карьеры?

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

    Причины, по которым возрастная тенденция наблюдается в компьютерной индустрии, многообразны и не свидетельствуют о наличии какого-то сговора не нанимать сотрудников старшего возраста. Во-первых, некоторые компании считают, что легче всего набирать новых работников из числа выпускников топовых вузов (Массачусетского института, Стенфорда и т.д.). Недавние выпускники дешево обходятся. У них стабильный уровень подготовки. У них нет отрицательного опыта работы в других компаниях. Они как чистый лист, поэтому в какой-то степени их легче обучить корпоративной культуре, методологии разработки ПО, передовым технологиям и объединить с такими же выпускниками для работы над новым стартапом.
    Читать дальше →
  • Советы самому себе в молодости (дизайнерская версия)

    • Перевод
    image


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

    Найдите наставников для всего


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

    Найти наставника нужно не для того, чтобы научится всему в короткие сроки, это должно быть двустороннее взаимодействие.
    Читать дальше →
    • +8
    • 11,3k
    • 3
  • PM из Facebook: контринтуитивные выводы о менеджменте (часть 1)

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

    image

    В центре кадра — Julie Zhuo, product design director в Facebook

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

    Я люблю свою работу. Мне кажется, что из-за людей она и тяжелая, и безумная, и чудесная. Она о взаимодействии с людьми. О понимании людей. О поиске самого лучшего в людях. И снова о понимании, что все не идеальны, но вместе с нашими несовершенствами мы все равно можем добиться большего, чем в одиночку.
    Читать дальше →
  • Как я нашел уязвимости в системе баг-трекинга Google и получил $15,600

    • Перевод
    Вы когда-нибудь слышали о Google Issue Tracker? Наверное, нет, если вы не являетесь сотрудником Google или разработчиком, который недавно сообщил о проблемах в инструментах Google. И я тоже не знал, пока не заметил, что мои сообщения об уязвимостях теперь обрабатываются, путем открытия нового обсуждения, помимо обычных уведомлений по электронной почте.

    Поэтому я сразу начал пытаться взломать его.

    image

    Так что же это за сайт? Согласно документации, Tracker Issue (также называемая Buganizer System) — это инструмент, используемый компанией Google для отслеживания ошибок и запросов о добавление новых фич во время разработки продукта. Он доступен за пределами Google для использования общественностью и пользователями-партнерами, которым необходимо сотрудничать с командой Google по конкретным проектам.

    Другими словами, когда у кого-то проблема (issue) с продуктом Google, он идет в баг-трекер. Имеет смысл, не так ли? Мы, как внешние пользователи, видим только верхушку айсберга: небольшой набор предварительно одобренных категорий и проблем, связанной с добавлением сотрудником Google внешней учетной записи, например, сообщения об уязвимостях. Но сколько информации лежит под поверхностью?

    image

    Наблюдая за ID, назначенных на последние опубликованные баги, мы можем легко оценить, сколько применения этот инструмент получает изнутри. В рабочие часы в Mountain View открывается около 2000-3000 проблем за час. Похоже, утечка данных из этой системы будет иметь большую ценность. Давайте взломаем ее!
    Читать дальше →
  • Как рассказать о современной веб-разработке путешественнику во времени из 2007 года

    • Перевод
    image

    Привет!

    Надеюсь, вам понравится этот новый мир. Он очень отличается от мира 2007 года. Совет: если вы только что взяли ипотеку, вернитесь и отмените ее. Уж поверь мне.

    Я рад, что вас все еще интересуют компьютеры. Сегодня у нас их гораздо больше, чем 10 лет назад, и это связано с новыми задачами. Мы носим компьютеры на наших запястьях и лицах, держим их в карманах, в холодильниках и чайниках. Автомобили самоуправляются довольно хорошо, и мы обучили программы обыгрывать людей в любые игры, кроме, наверное, литрбола.
    Читать дальше →
  • Взлом Bitcoin по телевизору: обфускуй, не обфускуй, все равно получим QR

    • Перевод

    История про то, как секретный ключ для Bitcoin’a в виде QR-кода восстановили из размазанной картинки


    image

    Мы могли бы просто назвать этот пост «Насколько хорош QR-код и как мы его восстановили практически из ничего». Но гораздо интереснее, когда QR-код является ключом к кошельку на сумму $1000 в битках.
    Читать дальше →
  • UX-дизайн: 50 вещей, которые вы наверняка забыли сделать

    • Перевод
    «Я не злюсь, я просто разочарован.»
    — PM

    image


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

    Представляем вам чеклист из 50 пунктов для самопроверки. Вот примерные подразделы:

    1. Логин и регистрация
    2. Первый опыт
    3. Важные детали
    4. Запуск
    5. Профиль
    6. Безумные потоки


    Читать дальше →

Самое читаемое