Pull to refresh
2
0
Денис Фокин @mrFox

Программист

Send message

Медиавыражения в CSS — это не только max-width

Reading time6 min
Views35K


Недавно мы опубликовали новый веб-сайт нашей компании Mabiloft с полностью переработанным чистым дизайном и множеством новых великолепных иллюстраций и анимаций.

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

Несколько недель спустя веб-сайт был почти готов и я просматривал его, чтобы убедиться, что всё работает как нужно. Заметив, что макет главной страницы неправильно отображался на нашем iPad, я быстро изменил некоторые CSS-правила и исправил ошибку, но… это привело к проблемам отображения макета на всех всех ноутбуках с небольшим экраном
Читать дальше →
Total votes 19: ↑17 and ↓2+15
Comments6

Как сделать ваш HTML отзывчивым, добавив одну строку кода на CSS

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



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

Самое крутое, что для добавления отзывчивости потребуется написать одну строчку кода на CSS
Читать дальше →
Total votes 79: ↑69 and ↓10+59
Comments38

Поймут даже дети: простое объяснение async/await и промисов в JavaScript

Reading time7 min
Views40K
Привет, Хабр! Представляю вашему вниманию перевод статьи «JavaScript Async/Await and Promises: Explained like you’re five years old» автора Jack Pordi.

Каждый, кто считает себя JavaScript-разработчиком, в какой-то момент должен был столкнуться с callback-функциями, промисами или, с недавних пор, с синтаксисом async/await. Если вы пробыли в игре достаточно долго, вы, вероятно, застали времена, когда вложенные callback-функции были единственным способом достижения асинхронности в JavaScript.

Когда я начал изучать и писать на JavaScript, уже существовало миллиард руководств и туториалов, объясняющих, как добиться асинхронности в JavaScript. Тем не менее, многие из них просто объясняли, как преобразовать callback-функции в промисы или промисы в async/await. Для многих этого, вероятно, более чем достаточно, чтобы они «поладили» с ними и начали использовать их в своем коде.

Однако если вы, как я, действительно хотите понять асинхронное программирование (а не только синтаксис JavaScript!), то, возможно, вы согласитесь со мной, что существует нехватка материалов, объясняющих асинхронное программирование фактически с нуля.
Читать дальше →
Total votes 21: ↑18 and ↓3+15
Comments25

Выездное обслуживание, заявки на карте, геолокация. Выбор картографического сервиса. Взгляд со стороны продукта

Reading time10 min
Views3.1K
Всем привет! Мы разрабатываем Okdesk — облачный Helpdesk для постпродажного сервисного обслуживания b2b клиентов. Среди пользователей нашего продукта — ЦТО и АСЦ по кассовой технике, интеграторы по автоматизации торговли, службы эксплуатации ритейл-сетей, компании обслуживающие коммерческую недвижимость и многие другие сервисные компании. Спецификой сервиса в таких компаниях является большое количество работы «в полях»: работа с оборудованием, техническое обслуживание инфраструктуры, планово-профилактические работы — всё это требует физического нахождения специалиста на объекте. Это обстоятельство накладывает ряд дополнительных требований к Helpdesk-решению, а именно: мобильное рабочее место инженера и визуализация запланированных работ на карте с отображением ближайших сотрудников. Мобильное приложение Okdesk для инженеров (под iOS и Android) появилось довольно давно и мы продолжаем его активно развивать. А вот отображение заявок и ближайших сотрудников на карте мы выпустили на днях.

image

Но речь в статье пойдет не о новой функциональности — заинтересованные могут получить 14-ти дневный бесплатный триал-аккаунт на сайте и познакомиться с системой самостоятельно. Речь пойдет о выборе картографических сервисов для реализации функциональности и какие продуктовые требования к ним предъявлять. Если для вашего проекта задача выбора решений для картографических модулей актуальна — добро пожаловать под кат.
Total votes 14: ↑13 and ↓1+12
Comments18

Как выстроить процессы и перестать издеваться над командой

Reading time10 min
Views55K
Всем привет! Сегодня хотел поговорить о процессах разработки. По мере роста компании не только развивается сам бизнес, но и копятся проблемы внутри, в частности в процессе разработки. Часто их пытаются решить внедрением каких-то практик и новомодных методологий. Увы, это насильное перестраивание процесса по книжкам и тренингам нередко это приводит к ещё большим проблемам — издевательству над людьми.

Недавно я выступал на конференции Saint TeamLead Conf 2019, в докладе я рассказал о том, как смог найти ряд проблем в рабочем процессе и потом постепенно поборол их. Здесь я постараюсь описать наиболее ценные практики, которые мне помогли не только наладить рабочий процесс, но и перестать издеваться над разработчиками. У сотрудников изменилось отношение к компании в целом и рабочему процессу.
Total votes 48: ↑46 and ↓2+44
Comments34

Асинхронное общение — вот настоящая причина, почему удалённая работа более эффективна

Reading time12 min
Views70K

Теперь асинхронную связь внедряют не только на удалёнке



Иллюстрация: Yin Weihung

Исследование за исследованием вновь доказывают, что удалённые работники более продуктивны, чем их коллеги в офисе.

Только не совсем понятно, почему.

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

Но кроме поездок на работу, все эти преимущества не столько результат автономного расположения, сколько побочный продукт асинхронной связи — сотрудники сами решают, когда общаться с коллегами.
Total votes 83: ↑80 and ↓3+77
Comments170

Полное руководство по настройке HTTP-заголовков для безопасности

Reading time7 min
Views34K


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


Я посмотрел, как эти компании вычисляют показатели безопасности других компаний. Оказалось, они смотрят на сочетание использования НТТР-заголовка для безопасности и репутации IP-адресов.


Репутация IP-адреса основывается на данных черных списков и списков спамеров в сочетании с данными о владельце общедоступного IP-адреса. Она, в принципе, должна быть чистой, если ваша компания не рассылает спам и в состоянии быстро определить и остановить вредоносное внедрение. Использование заголовка безопасности НТТР вычисляется аналогично тому, как работает Observatory от Mozilla.


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

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

Как CSS Grid меняет представление о структурировании контента

Reading time8 min
Views18K
Каждый, кто хотя бы немного занимался созданием веб-сайтов, знает, что теги <div> — являются важным строительным блоком для контроля над макетом.

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



С приходом CSS Grid, нам больше не нужно полагаться на элементы <div> для создания структуры страницы или даже более сложного компонента. Структура буквально определяется родительским элементом, а не тем, как расположено содержимое внутри него.

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

Total votes 22: ↑21 and ↓1+20
Comments19

8 историй о внутреннем Китае. То, что не показывают иностранцам

Reading time12 min
Views147K

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


Чжунго — самая развивающаяся страна в мире. Во всех сферах: производство, IT, биотехнологии. В прошлом году Китай показал крупнейший в мире валовый продукт, который составил 18% от мирового ВВП.


Китай давно и прочно стал основным экономическим партнёром нашей страны. Россия продаёт Китаю ресурсы: нефть, газ, лес, металлы, продовольствие. Китай продаёт России высокотехнологичную продукцию: станки, электронные приборы, компьютерную и бытовую технику, настоящие швейцарские часы за 50 долларов, спинеры и прочий AliExpress. В прошлом году товарооборот с Китаем превысил 108 миллиардов долларов — за год вырос на четверть.


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



Старинная китайская гравюра. Дядюшка Ляо на прогулке придумывает iPhone 12 c ТВ-приёмником, пятью sim-картами, десятью камерами, термометром, шокером и пылесосом.


Читать дальше →
Total votes 276: ↑249 and ↓27+222
Comments377

Полное руководство по Flexbox

Reading time11 min
Views585K
Полное руководство по CSS flexbox. Это полное руководство объясняет все о flexbox, сосредотачиваясь на всех возможных свойствах для родительского элемента (контейнер flex) и дочерних элементов (элементы flex). Оно также включает в себя историю, демонстрации, шаблоны и таблицу поддержки браузеров.
Читать дальше →
Total votes 23: ↑17 and ↓6+11
Comments5

Продающий + красивый интернет-магазин на WordPress за 269$ «с нуля» — наш опыт

Reading time10 min
Views63K
image

Это longread будет друзья и довольно откровенный, но я чего-то не видел подобных статей. Тут масса опытных ребят в части Интернет-магазинов (разработки и продвижения), но что то никто не написал как сделать классный магазин за условно 250$ (а можно и за 70$) который будет отлично выглядеть и отлично работать (продавать!). И все это можно сделать самому без программиста. Ну вообще неплохо иметь программиста рядышком, который будет нежно дышать вам в затылок и поправлять ваши корявые ручки, но т.к. я сам не будучи программистом сделал инет-магазин, то знаю о чем говорю. Еще раз — программист ни разу мне не помог для этого магазина.
Читать дальше →
Total votes 46: ↑15 and ↓31-16
Comments24

Организуем хаос или как внедрить процессный подход в организации

Reading time5 min
Views3.6K
Однажды я поменяла работу и попала из большой хорошо структурированной организации в бурно растущий стартап. Мне все сразу очень понравилось: и энергия, с которой люди работали, и профессионализм, и душевность внутренних коммуникаций. Но в тот момент, когда мне начали передавать ПМ-ские дела, меня ждал сюрприз:

— В смысле никаких описаний? То есть у вас совсем нигде не написано, по каким правилам у вас команды работают? Совсем-совсем?! Даже SLA? А как ты мне передашь? В смысле по памяти, а если какая-то договоренность забудется и не передастся? Как это пойму по ходу? Ох, мамочки….

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

В итоге я вспомнила одну простую мысль, благо образование у меня техническое:
Система меняется из любой точки системы
И решила, что я пожалуй, и буду той точкой, которая приведет систему из состояния хаоса в состояние четкой структуры.
Читать дальше →
Total votes 10: ↑10 and ↓0+10
Comments4

Создаём библиотеку по последнему слову техники

Reading time3 min
Views10K

Привет, Хабр. Это статья о том как написать Hello world по последнему слову техники.


В конце мы получим hello world библиотеку которая:


  • Использует typescript
  • Заботится о codestyle
  • Генерирует доку
  • Проводит тесты
Читать дальше →
Total votes 18: ↑14 and ↓4+10
Comments8

Правда ли, что GOPATH и GOROOT больше не нужны?

Reading time6 min
Views18K

Так повелось, что разработчики, еще только начинающие знакомиться с Go, часто сталкиваются с проблемой выбора рабочей директории для Go-проектов. Вот и в чате конференции GolangConf тоже задавался этот вопрос. Новые гоферы часто пугают друг друга словами GOPATH и GOROOT. Однако, в руководствах по быстрому старту с текущей версией Go (1.13) упоминания эти двух «страшных» слов вообще нет.

Читать дальше →
Total votes 48: ↑43 and ↓5+38
Comments17

Добавляем Refresh Token

Reading time4 min
Views129K


В прошлой статье я рассказывал про основы JWT. Если на пальцах, то это просто ключ, с помощью которого мы открываем дверь к приватным ресурсам. А что, если этот ключ украдут (точнее, сделают дубликат). Тогда кто-то еще сможет входить на сервер под вашим именем, причём мы об этом можем даже не узнать. Такого сценария мы не хотим допустить. Но что делать?

Читать дальше →
Total votes 21: ↑19 and ↓2+17
Comments26

Видя деньги

Reading time9 min
Views15K
По многочисленным просьбам читателей рассказываю, что входило в состав проекта по увеличению прибыли, упомянутого в «Корпоративном слоне».

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

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

Итак, концепция номер один: видя деньги.
Читать дальше →
Total votes 61: ↑52 and ↓9+43
Comments43

Четыре правила интуитивного UX

Reading time12 min
Views36K
Это советы по улучшению UX ваших проектов БЕЗ многочасовых сессий по изучению пользовательского поведения, бумажного прототипирования или любых других модных словечек.

(Серьёзно, поищите «дизайн-мышление». 100500 результатов!)

Для кого эта статья?

  • Разработчики. Вы создали собственное приложение, но каждый пользователь мучается с ним. И вы знаете: если они говорят вам это в лицо, то дело действительно плохо.
  • Графические дизайнеры. Изучать UX по статьям в интернете — это какой-то… очень болезненный способ умереть.
  • Менеджеры проектов. Вы уже на четверть UX-дизайнер. Было бы неплохо освоить остальные навыки.
  • И остальные проходимцы. Все, кто корпит над своими проектами по вечерам и выходным. Вам тоже пригодится.
Total votes 23: ↑22 and ↓1+21
Comments22

Разбираемся с интерфейсами в Go

Reading time10 min
Views111K

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

  1. Человеческим языком объяснить, что такое интерфейсы.
  2. Объяснить, чем они полезны и как вы можете использовать их в своём коде.
  3. Поговорить о том, что такое interface{} (пустой интерфейс).
  4. И пройтись по нескольким полезным типам интерфейсов, которые вы можете найти в стандартной библиотеке.
Читать дальше →
Total votes 52: ↑46 and ↓6+40
Comments18

Проектирование интернет-магазина для SEO: (теория + чеклист)

Reading time8 min
Views17K
Что стоит учесть при проектировании интернет-магазина, чтобы не пришлось переделывать пол сайта для начала продвижения.

Статья разбита на две части.
Теория: о том, что в принципе можно учесть в SEO интернет-магазина и как это работает.
Чек-лист: 80 пунктов, по которым легко проверить, насколько удобно будет продвигать ваш сайт после разработки

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

Читать дальше →
Total votes 22: ↑18 and ↓4+14
Comments58

Метод создания DRAG and DROP эффекта

Reading time3 min
Views22K
Придя впервые к технологии DRAG and DROP столкнулся с очень тяжелым её описанием (Это мое субъективное мнение. Прошу с ним не соглашаться, а перечитать все что только можно и посмотреть на этот вопрос с многих сторон). И решил написать пару статей, нацеленных на начинающих разработчиков, кто хочет познать дзен.

Статья будет состоять из двух частей:

  • Метод создания DRAG and DROP эффектов.
  • Практическое применение полученных знаний для создание сортировки при помощи DRAG and DROP

Параграф №1 Метод создания DRAG and DROP эффекта


Перед началом глубокого разбора, посмотрим поверхностно. Представьте себя в роли грузчика, вам необходимо перемесить коробку с одного места на другое. Для грузчика это «Ну взял, ну перенес. Готово!», а для программиста “Подошел к коробке, наклонился, взял коробку, поднял коробку, прошел N шагов, наклонился, отпустил коробку.”. Я это к тому, что перед началом работы проиграйте все в голове, по шагам и вы станете гораздо ближе к истине.

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

При создании DRAG and DROP первым шагом необходимо объекту, который мы будем перемещать, присвоить значение draggable='true'.

<html>
  <head>
    <style>
      .ddd {
	display:block;
	float:left;
	padding:10px;
	border:1px solid #000;
      }
    </style>
  </head>
  <body>
    <div id='d1' class='ddd' draggable='true'>Pervii 1</div>
  </body>
</html>

Читать дальше →
Total votes 14: ↑12 and ↓2+10
Comments6

Information

Rating
Does not participate
Location
Коломна, Москва и Московская обл., Россия
Date of birth
Registered
Activity