• Стилизация старого доброго элемента button

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


    Читать дальше →
  • Как запустить email-рассылки и не попасть в спам?



      Изображение: Pixabay

      Email-маркетинг – эффективный инструмент взаимодействия с аудиторией, если работать с ним правильно. Ведь он теряет смысл, если ваши письма сразу летят в папку «Спам». Существует множество причин, почему они могут туда попадать. Сегодня мы поговорим о превентивных мерах, которые помогут избежать этой проблемы.
      Читать дальше →
      • +4
      • 10.2k
      • 8
    • Иллюстрированное руководство по OAuth и OpenID Connect

      • Translation
      Прим. перев.: В этом замечательном материале компании Okta просто и наглядно рассказывается о принципах работы OAuth и OIDC (OpenID Connect). Эти знания будут полезны разработчикам, системным администраторам и даже «обычным пользователям» популярных веб-приложений, которые скорее всего тоже обмениваются конфиденциальными данными с другими сервисами.

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


      «Предоставьте свою банковскую учётку». — «Обещаем, что с паролем и деньгами все будет в порядке. Вот прям честно-пречестно!» *хи-хи*

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

      Сегодня имеется единый стандарт, позволяющий одному сервису безопасно воспользоваться данными другого. К сожалению, подобные стандарты используют массу жаргонизмов и терминов, что усложняет их понимание. Цель этого материала — с помощью простых иллюстраций объяснить, как они работают (Думаете, что мои рисунки напоминают детскую мазню? Ну и ладно!).

      Читать дальше →
      • +38
      • 36.4k
      • 3
    • Как сделать ваш HTML отзывчивым, добавив одну строку кода на CSS

      • Translation
      Привет, Хабр! представляю вашему вниманию перевод статьи «How to make your HTML responsive by adding a single line of CSS» автора Per Harald Borgen.



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

      Самое крутое, что для добавления отзывчивости потребуется написать одну строчку кода на CSS
      Читать дальше →
    • Заворачиваем весь трафик ОС в Tor



        Все описанное в статье реализовано в виде инструмента Toroxy, доступного на GitHub
        В последнее время анонимность в сети является предметом горячих споров. Ни для кого не секрет, что данные о посещениях Интернет-ресурсов с локального устройства могут собираться на разных уровнях с целью построения «модели» пользователя, которая позже против него же и может быть использована (или могла бы). Поэтому не удивительно, что все большее количество активных пользователей Интернета становятся уверены в необходимости механизмов проксирования и анонимизации. В связи с этим появляется все больше новых VPN-клиентов, но, как показывает практика, далеко не всем из них по-настоящему можно доверять: то не все работает из коробки, то анонимизируется только HTTP-трафик, то качество реализации хромает, а то и вовсе разработчики грешат сливанием данных о своих пользователях.

        В этой статье мы попробуем собрать из ряда программных компонентов собственный инструмент с UI, который бы позволил полностью анонимизировать трафик локальной системы и не допустить утечек по «прослушиваемым» каналам ни на одном из этапов работы.
        Читать дальше →
      • Руководство по SQL: Как лучше писать запросы (Часть 2)

        Продолжение статьи Руководство по SQL: Как лучше писать запросы (Часть 1)

        От запроса к планам выполнения


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

        Следует также отметить, что некоторые из антипаттернов, упомянутых в последнем разделе, коренятся в проблемах производительности, таких, как операторы AND, OR и NOT и их отсутствие при использовании индексов. Размышление о производительности требует не только более структурированного, но и более глубокого подхода.

        Однако этот структурированный и углубленный подход будет в основном основан на плане запроса, который, как вы помните, является результатом запроса, впервые проанализированного в «дерево синтаксического анализа» или «дерево разбора» («parse tree»), и точно определяет, какой алгоритм используется для каждой операции и как координируется их выполнение.
        Читать дальше →
        • +15
        • 29.1k
        • 5
      • Книги по психологической самопомощи: есть ли в них хоть какой-то смысл, и, если да, какие выбрать?

          Многие не любят психологов и психологию, но немногие отрицают наличие у людей [вообще, а не у себя лично] психологических «заморочек». На этом фоне идея разобраться с этими сложностями самостоятельно может выглядеть привлекательно. Этим пользуются авторы и издатели, предлагающие разного рода «книги по самопомощи».


          Что под катом: обзор литературы, посвящённой исследованию [не]эффективности самостоятельной работы над психологическими проблемами по книгам (спойлер: эффективна, но с некоторыми оговорками), несколько списков книг, которые (опять же, с оговорками) можно для этих целей использовать.
          Читать дальше →
        • (Почти) бесполезный стриминг вебкамеры из браузера. Media Stream и Websockets

          • Tutorial
          В статье я хочу поделиться своими попытками сделать стримминг видео через websockets без использования сторонних плагинов браузера типа Adobe Flash Player. Что из этого получилось читайте далее.
          Читать дальше →
        • Чтение на лето: книги для технарей

            Мы собрали книги, которые рекомендуют своим коллегам по цеху резиденты Hacker News. Здесь нет справочников или руководств по программированию, зато есть любопытные издания о криптографии и теоретической информатике, об основателях IT-компаний, есть и научная фантастика, написанная разработчиками и о разработчиках — как раз то, что можно взять в отпуск.

            Читать дальше →
          • 10 PostCSS плагинов, которые сэкономят время вашему верстальщику


              У нас, у фронтендеров, есть такая категория инструментов, которые никак не решают стоящие перед нами задачи, а скорее влияют на сам процесс их решения. Изменяют его. Отношение к таким инструментам самое разное – начиная от мании в духе “давайте эту штуку пихать везде, это же так круто” и заканчивая отговорками вроде “раз не решает задачи бизнеса, значит оно нам не нужно”. Но, так или иначе, сегодня мы поговорим про PostCSS — один из таких инструментов.


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

              Читать дальше →
            • Как компьютеры научились потрясающе хорошо распознавать изображения

              • Translation

              Знаковая научная работа от 2012 года преобразовала область программного распознавания изображений




              Сегодня я могу, допустим, открыть Google Photos, написать «пляж», и увидеть кучу своих фотографий с различных пляжей, которые я посетил за последнее десятилетие. И я никогда не подписывал свои фотографии – Google распознаёт на них пляжи на основе их содержания. Эта, казалось бы, скучная особенность основывается на технологии под названием «глубокая свёрточная нейросеть», позволяющая программам понимать изображения при помощи сложного способа, недоступного технологиям предыдущих поколений.

              В последние годы исследователи обнаружили, что точность ПО становится лучше по мере того, как они создают всё более глубокие нейросети (НС) и обучают их на всё более крупных наборах данных. Это создало ненасытную потребность в вычислительных мощностях, и обогатило производителей GPU, таких, как Nvidia и AMD. В Google несколько лет назад разработали собственные специальные чипы для НС, а другие компании пытаются угнаться за ней.
              Читать дальше →
              • +13
              • 6.3k
              • 3
            • Как устроен формат JPEG

              • Translation

              Изображения формата JPEG встречаются повсюду в нашей цифровой жизни, но за этим покровом осведомлённости скрываются алгоритмы, устраняющие детали, не воспринимаемые человеческим глазом. В итоге получается высочайшее визуальное качество при наименьшем размере файла – но как конкретно всё это работает? Давайте посмотрим, чего именно не видят наши глаза!




              Легко принять, как само собой разумеющееся, возможность отправить фотку другу, и не волноваться по поводу того, какое устройство, браузер или операционную систему он использует – однако так было не всегда. К началу 1980-х компьютеры умели хранить и показывать цифровые изображения, однако по поводу наилучшего способа для этого существовало множество конкурирующих идей. Нельзя было просто отправить изображение с одного компьютера на другой и надеяться, что всё заработает.
              Читать дальше →
            • Как сделать из сайта приложение и выложить его в Google Play за несколько часов. Часть 2/2: Trusted Web Activity

              • Tutorial
              image

              В первой части мы превратили наш сайт в Progressive Web App. Там же было сказано, что совсем недавно, 6 февраля 2019 года, Google предоставили простую возможность выкладывать PWA в Google Play при помощи Trusted Web Activity. Всё, что нужно сделать, это написать небольшую обёртку под Android, которую можно будет выложить в Google Play. Когда пользователь скачает такое приложение-обёртку, оно просто будет открывать наше PWA внутри Chrome. Конечно же, интерфейс Chrome будет спрятан и всё будет выглядеть красиво.

              Если вы, как и я, никогда не писали приложений под Android, то дальнейшее вам тоже должно показаться чередой магических манипуляций. Но к чему только не прибегнешь, чтобы выложить своё приложение. Поехали!
              Читать дальше →
            • Все об SVG анимации

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



              Здесь не будет никаких плагинов, библиотек и прочего, речь пойдет только о чистом SVG.
              Единственный инструмент, который я буду использовать, это Adobe Illustrator.
              Получить сакральные знания
            • Как сделать из сайта приложение и выложить его в Google Play за несколько часов. Часть 1/2: Progressive Web App

              • Tutorial


              Наверное, все близкие к веб-разработке люди уже наслышаны о Progressive Web App. Ещё бы! Эта технология практически уравняла веб и мобильную разработку с точки зрения распространения продуктов и вовлечённости пользователей.

              Да, современный фронтенд, написанный, например, на React, работает как приложение. Но вот только скачивается это приложение в браузер и запускается из него. В этом и заключается огромный гандикап, который всегда имела мобильная разработка. Давайте подумаем, чем с точки зрения обычного пользователя, «приложение» отличается от «сайта». Сразу в голову приходит, что приложение в телефоне, а сайт на компьютере. Но ведь есть мобильный браузер, так что сайт и в телефоне тоже. Тогда остаётся 3 существенных отличия:
              Читать дальше →
            • Принципы построения REST JSON API

              • Tutorial

              Эта памятка писалась для внутренних нужд (открыть глаза менее опытным в вебе коллегам). Но, т.к. я насмотрелся велосипедов от довольно уважаемых, казалось бы, контор, — выкладываю на хабр. Мне кажется, многим будет полезно.


              Зачем


              Надеюсь, читающий уже понимает, зачем ему вообще нужен именно REST api, а не какой-нибудь монстр типа SOAP. Вопрос в том, зачем соблюдать какие-то стандарты и практики, если браузеры вроде бы позволяют делать что хочешь.


              • Стандарт HTTP это стандарт. Его несоблюдение вредно для кармы и ведёт к постоянным проблемам с безопасностью, кэшированием и прочими "закидонами" браузеров, которые совсем не закидоны, а просто следование стандарту.
              • Велосипеды со всякими {error: "message","result":...} невозможно нормально тестировать и отлаживать
              • Поддержка большим количеством готовых клиентских библиотек на все случаи жизни. Те, кто будет вашим api пользоваться, скажут большое человеческое спасибо.
              • Поддержка автоматизированного интеграционного тестирования. Когда сервер на любые запросы отдаёт 200 ОК — ну, это такое себе развлечение.
              Читать дальше →
            • Умеренный Hardening для Firefox

              • Tutorial


              Современный веб состоит из множества разных технологий, которые предоставляют самые разные возможности… но ещё и создают немалое количество угроз. Современные браузеры давно стали самыми сложными приложениями на компе, обогнав по сложности даже ядро ОС (в Firefox в несколько раз больше строк кода, чем в ядре Linux или офисных пакетах). Мы проводим в браузере большую часть своего времени, так что не удивительно, что браузер находится под прицелом: его постоянно пытаются взломать, использовать в ботнете, пытаются украсть из него наши данные, прослушать его трафик, отслеживать посещаемые нами сайты и наши действия на этих сайтах.


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


              Тем не менее, для усиления защиты браузера можно много чего сделать.

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