Pull to refresh
0
0

User

Send message

Подборка подкастов по программированию на русском и английском языках

Reading time 7 min
Views 180K
Всем привет! В этой статье собраны одни из лучших подкастов по программированию как на русском так и на английском языках, которые позволят вам быть всегда в курсе последних новостей.

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

И да, есть много интересных и популярных подкастов для разработчиков и программистов. Подкасты невероятно полезны, они будут держать вас в курсе всего что происходит в интересующей вас сфере, а также помогут вам развить более широкий взгляд на постоянно развивающуюся область информационных технологий.
Читать дальше →
Total votes 74: ↑71 and ↓3 +68
Comments 63

Проверяем браузер на поддержку определённого CSS свойства

Reading time 4 min
Views 28K
Поддержка браузерами того или иного CSS свойства до сих пор остаётся одной из основных проблем веб-вёрстки, так как корректировка под различные браузера, особенно старые, занимает очень много времени и портит настроение. Поэтому многие верстальщики ограничиваются поддержкой IE с помощью условных комментариев, а некоторые вообще забивают на старые браузера и блокируют доступ к своему сайту со старых версий выводя сообщение типа «Ваш браузер устарел...».

В этой статье я расскажу, как можно проверить, поддерживает ли браузер то или иное CSS свойство.
Читать дальше →
Total votes 21: ↑21 and ↓0 +21
Comments 24

7 лучших ферм устройств для тестирования мобильных приложений

Reading time 6 min
Views 54K

Еще в далекие времена, когда балом смартфонов заправляли Nokia и Microsoft, возникла одна характерная особенность мобильной разработки — разношерстность устройств по характеристикам и модификациям операционок. Приходилось тестировать приложение не только на разных версиях ОС, но и на разных физических устройствах. После выхода iOS самих моделей телефонов всегда было мало, поэтому с ними проблем не возникало. А вот в мире Android проблема фрагментации встала во весь рост. Моделей на рынке тысячи, и все время появляются новые, и твое приложение или игра должны гарантированно работать на каждой из них. Добавим еще разные версии прошивок на этих моделях… И поймем, что вручную потребуется куча человеко-часов для проверки каждого релиза.


Читать дальше →
Total votes 17: ↑17 and ↓0 +17
Comments 0

Обзор анимации с codepen для страниц загрузки сайта

Reading time 14 min
Views 26K
Обзор анимации с codepen для страниц загрузки сайта

Программисты проверяют идеи для сайтов на площадках: codepen, jsbin, jsfiddle, cssdesk. Потому что там они мгновенно видят результат написанного кода и могут показать его другим.


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


Я решил делать подборки полезных решений с codepen. Первую уже выпускал на хабре «Обзор многоуровневых меню». Теперь вторая — «Обзор анимации для страниц загрузки сайта».


Подборку разделил на 3 статьи.


Читать дальше →
Total votes 26: ↑25 and ↓1 +24
Comments 13

11 вещей которые я узнал, читая спецификацию flexbox

Reading time 8 min
Views 99K

Я всегда считал, что с flexbox довольно легко работать — глоток свежего воздуха после стольких лет float'ов и clearfix'ов.


Правда недавно я обнаружил что борюсь с ним; что-то растягивалось, когда я не думал, что оно должно тянуться. Я поправил здесь, другой элемент сжался. Я починил это, что-то другое ушло за экран. Какого Джорджа Буша тут происходит?


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


Как бы там ни было, я решил что пора вести себя как взрослый разработчик и выучить flexbox должным образом. Но вместо того, чтобы прочитать 10 очередных блог-постов, я решил отправиться прямиком к исходнику и прочитать The CSS Flexible Box Layout Module Level 1 Spec


Вот хорошие отрывки.


Читать дальше →
Total votes 66: ↑62 and ↓4 +58
Comments 33

Что намазать на зубы, чтобы они не выпали

Reading time 8 min
Views 193K


Хорошо зафиксированный пациент в анестезии не нуждается

По многочисленным просьбам трудящихся сегодня мы будем заниматься очень важными вопросами:


  • Как правильно мазать зубы пальцем?
  • Хорошо ли растворяются пломбы в кислоте?
  • Почему больно, когда сверлят зубы дрелью без анестезии?
  • Зачем мазать зубы зеленкой?
  • Лечение кариеса на дому
  • Глубокое микрофторирование эмали

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

Читать дальше →
Total votes 209: ↑206 and ↓3 +203
Comments 693

Математика CSS-шлюзов

Reading time 18 min
Views 54K

CSS-шлюзом (CSS-lock) называется методика из адаптивного веб-дизайна, позволяющая не перепрыгивать от одного значения к другому, а переходить плавно, в зависимости от текущего размера области просмотра (viewport). Идею и одну из реализаций предложил Тим Браун в статье Flexible typography with CSS locks. Когда я пытался разобраться с его реализацией и создать свои варианты, мне с трудом удавалось понять, что именно происходит. Я выполнил много вычислений и подумал, что полезно будет объяснить другим всю эту математику.

В статье я опишу саму методику, её ограничения и лежащую в её основе математику. Не волнуйтесь: там в основном одни сложения и вычитания. К тому же я постарался всё разбить на этапы и украсил их графиками.
Читать дальше →
Total votes 70: ↑66 and ↓4 +62
Comments 37

Дайджест свежих материалов из мира фронтенда за последнюю неделю №261 (1 — 7 мая 2017)

Reading time 5 min
Views 24K
Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.

Читать дальше →
Total votes 39: ↑37 and ↓2 +35
Comments 8

Gixy — open source от Яндекса, который сделает конфигурирование Nginx безопасным

Reading time 10 min
Views 35K
Nginx, однозначно, один из крутейших веб-серверов. Однако, будучи в меру простым, довольно расширяемым и производительным, он требует уважительного отношения к себе. Впрочем, это относится к почти любому ПО, от которого зависит безопасность и работоспособность сервиса. Признаюсь, нам нравится Nginx. В Яндексе он представлен огромным количеством инсталляций с разнообразной конфигурацией: от простых reverse proxy до полноценных приложений. Благодаря такому разнообразию у нас накопился некий опыт его [не]безопасного конфигурирования, которым мы хотим поделиться.



Но обо всем по порядку. Нас давно терзал вопрос безопасного конфигурирования Nginx, ведь он — полноправный кубик веб-приложения, а значит, и его конфигурация требует не меньшего контроля с нашей стороны, чем код самого приложения. В прошлом году нам стало очевидно, что этот процесс требует серьезной автоматизации. Так начался in-house проект Gixy, требования к которому мы обозначили следующим образом:

— быть простым;
— но расширяемым;
— с возможностью удобного встраивания в процессы тестирования;
— неплохо бы уметь резолвить инклюды;
— и работать с переменными;
— и про регулярные выражения не забыть.
Читать дальше →
Total votes 112: ↑112 and ↓0 +112
Comments 18

Как мы оптимизировали Twitter Lite

Reading time 13 min
Views 12K

Twitter Lite и высокопроизводительные прогрессивные веб-приложения на React




Взгляд на то, как удаляли обычные и необычные узкие места в производительности при создании одного из крупнейших в мире прогрессивных веб-приложений (PWA) на React.js — Twitter Lite

Создание быстрого веб-приложения требует многих циклов измерений, куда тратится время. Нужно понять, почему это происходит, и применить потенциальные исправления. К сожалению, не бывает одного простого решения. Производительность — это бесконечная игра, где мы ищем и измеряем области для улучшения. В Twitter Lite сделано много маленьких улучшений в разных сферах: от первоначального времени загрузки до рендеринга компонентов React (и предотвращения повторного рендеринга), загрузки изображений и много другого. Большинство изменений небольшие, но они складываются, и в конечном результате мы получили одно из самых больших и быстрых прогрессивных веб-приложений.
Читать дальше →
Total votes 28: ↑26 and ↓2 +24
Comments 10

Выбор MQ для высоконагруженного проекта

Reading time 5 min
Views 170K
Современные масштабируемые системы состоят из микросервисов, каждый из которых отвечает за свою ограниченную задачу. Такая архитектура позволяет не допускать чрезмерного разрастания исходного кода и контролировать технический долг.

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

Если микросервис перестает отвечать на запросы в результате аварии, его клиенты должны быть мгновенно перенаправлены на резервный. Для управления потоком запросов часто используют так называемые очереди сообщений (message queues).

Недавно используемая нами очередь перестала нас устраивать по параметрам отказоустойчивости и мы заменили ее. Ниже мы делимся нашим опытом выбора.
Читать дальше →
Total votes 46: ↑38 and ↓8 +30
Comments 57

N причин, чтобы использовать Create React App

Reading time 10 min
Views 76K


Create React App — отличный инструмент для быстрого старта React-приложений. Вы не тратите время на настройку Webpack, Babel и других привычных инструментов. Они заранее настроены и спрятаны, так что разработчики могут сфокусироваться на коде и бизнес-логике приложения.
Читать дальше →
Total votes 35: ↑28 and ↓7 +21
Comments 33

Подделываем письма от крупнейших российских банков

Reading time 3 min
Views 41K
Однажды я просматривал электронную почту и наткнулся на спам от БинБанка. Это было особенно странно, так как мне предлагали не банковские услуги, а что-то на уровне «Доход 70000 рублей за день». Похоже, спамеры начали отправлять письма от имени разных компаний (вероятно, чтобы обходить какие-то фильтры). Если вам интересно почитать о подделке писем от крупнейших российских банков и полном игнорировании проблем со стороны службы безопасности, то добро пожаловать под кат.


Достаточно простой пример поддельного письма
Читать дальше →
Total votes 68: ↑63 and ↓5 +58
Comments 83

Async/await: 6 причин забыть о промисах

Reading time 7 min
Views 160K
Если вы не в курсе, в Node.js, начиная с версии 7.6, встроена поддержка механизма async/await. Говорят о нём, конечно, уже давно, но одно дело, когда для использования некоей функциональности нужны «костыли», и совсем другое, когда всё это идёт, что называется, «из коробки». Если вы ещё не пробовали async/await — обязательно попробуйте.

image

Сегодня мы рассмотрим шесть особенностей async/await, позволяющих отнести новый подход к написанию асинхронного кода к разряду инструментов, которые стоит освоить и использовать везде, где это возможно, заменив ими то, что было раньше.
Читать дальше →
Total votes 55: ↑48 and ↓7 +41
Comments 182

OpenSSL, ssl_ciphers и nginx: прокачиваем на 100%

Reading time 11 min
Views 87K


Много где написано о том, как получить 100% и A+ по тесту от Qualys. При всём при том практически везде директивы ssl_ciphers и подобные даются как эдакие магические строки, которые нужно просто вставить, и надеяться, что автор не подводит вас под монастырь. Эта статья призвана исправить это недоразумение. По прочтению этой статьи директива ssl_ciphers потеряет для вас всякую магию, а ECDHE и AES будут как друзья да братья.


Также вы узнаете почему 100% по тестам — не всегда хорошо в реальности.

Читать дальше →
Total votes 66: ↑65 and ↓1 +64
Comments 92

Google Maps — кастомизируй меня полностью

Reading time 7 min
Views 170K
image

→ Демо: ссылка
→ Исходники: ссылка

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

В этой статье мы рассмотрим:

1. Внедрение Google Maps на сайт

  • Добавление через вставку iframe в разметку
  • Добавление через API

2. Кастомизация маркера

  • Инициализация маркера
  • Анимация маркера
  • Изображение маркера

3. Кастомизация информационного окна

  • Добавление информационного окна
  • Открытие информационного окна
  • Кастомизация элементов информационного окна
  • Параллакс-эффект для элементов в информационном окне

4. Кастомизация карты

  • Изменение цвета объектов карты
  • Кастомизация элементов управления
  • Маска для карты
Читать дальше →
Total votes 36: ↑35 and ↓1 +34
Comments 15

Отслеживание js-ошибок с помощью Метрики

Reading time 3 min
Views 13K

Использование системы отслеживания js-ошибок трудно переоценить. Даже на покрытом тестами сайте возникают js-ошибки, важно их найти и починить. Расскажу как искал подходящее решение.

Читать дальше →
Total votes 36: ↑35 and ↓1 +34
Comments 21

Использование Neutrino для быстрого начала разработки на JavaScript

Reading time 5 min
Views 16K

Тайсон Нил Деграс в детекторе нейтрино


Привет! Меня зовут Артем, и я занимаюсь тестированием веб-приложений в Badoo. Я регулярно изучаю профили крупных компаний на Github для того, чтобы узнать что-то новое как в веб-разработке, так и в трендах (иногда в будущих трендах). И это перевод статьи о Neutrino от Mozilla.


Neutrino — это инструмент, объединяющий в себе лучшие компоненты набора современных JavaScript-инструментов и простоту отсутствия первоначальных настроек.

Читать дальше →
Total votes 33: ↑32 and ↓1 +31
Comments 10

Что взять за основу React приложения

Reading time 10 min
Views 30K

Каждый раз начиная писать React приложение, вы так или иначе выберите какой-то вариант:


  • копи-паст вашего предыдущего проекта
  • какой-то бойлерплейт или даже генератор (типа Yeoman)
  • готовый фреймворк не требующий конфигурации
  • пишете сами все с нуля

Каждый из способов имеет свои сильные и слабые стороны, как на длинной, так и на короткой дистанции.


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

Читать дальше →
Total votes 33: ↑31 and ↓2 +29
Comments 84

Оптимизация фронтенда под браузеры

Reading time 19 min
Views 53K

enter image description here


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


  • С точки зрения User Experience (UX) фронтенд должен обеспечивать быструю загрузку и работу веб-страниц.
  • А с точки зрения Developer Experience (DX) нам хочется, чтобы и сам фронтенд тоже работал быстро, был прост в использовании и вообще являлся примером для подражания.

Всё это делает пользователей и разработчиков счастливее, а заодно существенно улучшает ранжирование сайтов поисковиками. Например, Google уделяет особое внимание оптимизированности фронтенда. Если вы достаточно долго бились над тем, чтобы ваш сайт заработал побольше баллов в Google Pagespeed Insights, то, надеемся, эта статья поможет вам лучше понять, для чего всё это нужно и каково разнообразие стратегий оптимизации фронтенда.

Читать дальше →
Total votes 48: ↑46 and ↓2 +44
Comments 6

Information

Rating
Does not participate
Registered
Activity