Pull to refresh
0
0
manbrk @manbrk

User

Send message

Организация отступов в верстке (margin/padding)

Reading time4 min
Views183K


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

Ниже перечисленные принципы выполняются в среде позиционирования элементов на странице. В элементах декора тоже выполняются. Но не так категорично.
Читать дальше →
Total votes 16: ↑16 and ↓0+16
Comments44

Окружение для разработки веб-приложений на TypeScript и React: от 'hello world' до современного SPA. Часть 1

Reading time14 min
Views37K
Цель данной статьи — вместе с читателем написать окружение для разработки современных веб-приложений, последовательно добавляя и настраивая необходимые инструменты и библиотеки. По аналогии с многочисленными starter-kit / boilerplate репозиториями, но наш, собственный.

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

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

image
Читать дальше →
Total votes 28: ↑27 and ↓1+26
Comments11

Использование преимуществ TypeScript в JavaScript разработке

Reading time3 min
Views18K

Язык программирования TypeScript от Microsoft привносит многие преимущества статической типизации в JavaScript. Несмотря на то, что он не проверяет типы во время исполнения, он позволяет производить более точный статический анализ, повышает безопасность и открывает возможности для лучшей интеграции с IDE. Код на TypeScript обычно транспилируется в стандартный JavaScript, который выполняется в браузерах или Node.js. Учитывая привлекательность TypeScript, не удивительно, что его популярность быстро растёт.

Читать дальше →
Total votes 24: ↑21 and ↓3+18
Comments28

Как держать 20 тысяч VPN клиентов на серверах за $5

Reading time24 min
Views85K
Месяц назад мы с друзьями сделали бесплатный сервис для обхода блокировок сайтов в Украине Zaborona.Help. За это время сервис стал довольно популярным, аудитория выросла до 20 000 пользователей. Число одновременных подключений в пиковые часы — ≈6 000 клиентов.

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

В статье описываются тонкости настройки OpenVPN для большого числа клиентов, на дешевых VPS.

  • Как выбрать подходящий хостинг. Отличительные черты плохого хостинга. История о том, как мы долго искали и нашли хостинг в России.
  • Почему IPv6 — хорошо. Правильная настройка IPv6-адресов для VPN-клиентов.
  • Изменение конфигурации OpenVPN на лету, без перезапуска сервера и отключения клиентов.
  • Балансировка нагрузки между серверами и процессами OpenVPN
  • Тонкая настройка Linux для большого числа подключений
  • Особенности кривых операционных систем и роутеров пользователей

Наш опыт будет полезен для тех, кто собирается развернуть VPN для личных нужд, и тех, кто хочет создать сервис с большим числом клиентов.
Читать дальше →
Total votes 79: ↑71 and ↓8+63
Comments139

Своя CRM система за 3 часа в Гугл-таблицах

Reading time2 min
Views84K
В этом посте хочу поделиться опытом, как с помощью гуглдока можно создать CRM-систему, которая полностью будет закрывать потребности небольшой или средней студии ИТ-разработки.

Я сразу отказался от всех полуготовых решений, типа amoCRM (удобная, но нам рановато пока), ShugarCRM (кривая и медленная, вызывает невроз) и др., потому что я люблю, чтобы софт подстраивался под мой бизнес, а не бизнес-процессы подстраивались под софт (да и на первых порах нужно что-то по проще с низкой стоимостью внедрения). Так что — только гугл-док, только хардкор!


Читать дальше →
Total votes 27: ↑19 and ↓8+11
Comments28

Для ИТ-ишников. Если у вас устают глаза, покраснения, раздражение. Возможно эта статья для вас

Reading time3 min
Views107K


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

Недавно меня спросил один знакомый, как это все выдерживают мои глаза и зрение остается хорошим?! Я всегда отвечаю, что годы тренировок помогают. Думаете это сарказм? Только отчасти:) На самом деле это тренировки.
Читать дальше →
Total votes 42: ↑37 and ↓5+32
Comments98

Эврика! Моменты озарения при изучении React

Reading time5 min
Views21K
Светлана Шаповалова, редактор «Нетологии», перевела статью Тайлера МакГинниса, в которой он перечислил основные моменты озарения, которые возникают при изучении React.

image

Одна из моих главных преподавательских задач — сделать так, чтобы у людей чаще случались моменты озарения. «Эврика!» — это момент внезапного прояснения, когда ранее непонятные факты вдруг обретают смысл. Такое случалось с каждым. Я знаком со многими преподавателями и лучшие из них умеют так преподносить урок, чтобы озарение у учеников возникало намного чаще.
Читать дальше →
Total votes 40: ↑35 and ↓5+30
Comments9

9 интересных сервисов для веб-дизайнера. Специальная подборка

Reading time3 min
Views34K
В современном веб-дизайне существует достаточно много инструментов для web-дизайна. Это и классика — графические редакторы Photoshop и Sketch, и программы, совмещающие одновременно дизайн и верстку, такие как Macaw и Adobe Muse. И, как мы считаем, будущее web-дизайна — платформы для визуального дизайна сайтов в браузере, одним из примеров которых является Pixli.

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

Ниже, мы отобрали перечень из 9 весьма интересных и полезных ресурсов, к которым веб-дизайнеры обращаются и используют довольно часто:
Читать дальше →
Total votes 13: ↑9 and ↓4+5
Comments8

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

Reading time10 min
Views30K

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


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

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


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

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

+500 бесплатных инструментов для запуска вашего стартапа в 2017 году

Reading time40 min
Views156K


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

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

Итак, мы нашли в интернете бесплатные и условно-бесплатные инструменты для роста вашего бизнеса. Когда они дадут вам желаемый результат, вы можете оформить платную подписку.
Читать дальше →
Total votes 74: ↑60 and ↓14+46
Comments26

Telegram-бот, webhook и 50 строк кода

Reading time5 min
Views176K
Как, опять? Ещё один туториал, пережёвывающий официальную документацию от Telegram, подумали вы? Да, но нет! Это скорее рассуждения на тему того, как построить функциональный бот-сервис используя Python3.5+, asyncio и aiohttp. Тем интереснее, что заголовок на самом деле лукавит…
Читать дальше →
Total votes 31: ↑21 and ↓10+11
Comments19

Python: коллекции, часть 4/4: Все о выражениях-генераторах, генераторах списков, множеств и словарей

Reading time17 min
Views190K
Часть 1 Часть 2 Часть 3 Часть 4
imageЗаключительная часть моего цикла, посещенного работе с коллекциями. Данная статья самостоятельная, может изучаться и без предварительного изучения предыдущих.

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

imageБудут рассмотрены: выражения-генераторы, генераторы списка, словаря и множества, вложенные генераторы (5 вариантов), работа с enumerate(), range().
А также: классификация и терминология, синтаксис, аналоги в виде циклов и примеры применения.

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

Оглавление:


1. Определения и классификация.
2. Синтаксис.
3. Аналоги в виде цикла for и в виде функций.
4. Выражения-генераторы.
5. Генерация стандартных коллекций.
6. Периодичность и частичный перебор.
7. Вложенные циклы и генераторы.
8. Использование range().
9. Приложение 1. Дополнительные примеры.
10. Приложение 2. Ссылки по теме.
Изучаем детали, иллюстрации и примеры
Total votes 22: ↑21 and ↓1+20
Comments45

JavaScript. Вопросы на собеседовании

Reading time3 min
Views137K
Не так давно озадачился поиском работы, в связи с чем посетил n-нное количество собеседований и услышал много интересных вопросов. По сети гуляет много статей с вопросами по JS, поэтому постараюсь выбрать вопросы, которые ещё не видел. Здесь нет вопросов типа Что такое замыкание?, Наследование в JavaScript или Сделайте ajax запрос на VanillaJS. Кстати советую поискать ответы на эти вопросы, прежде чем читать статью :) Под катом вопросы типа «с подвохом». Вряд ли какой-то из них попадётся вам, но, надеюсь, статья настроит вас на «подвоховое» мышление, и напомнит некоторые скользкие места и подводные камушки javascript.
Читать дальше →
Total votes 93: ↑60 and ↓33+27
Comments158

Чистый javascript.Классы

Reading time8 min
Views38K
Читать дальше →
Total votes 33: ↑28 and ↓5+23
Comments7

Быстрый курс Redux + websockets для бэкендера

Reading time30 min
Views48K
Всем привет из 2018! Оригинальный react-redux-universal-hot-example прекратил развитие в 2017 году, но его можно собрать на версии 6.14.2, на 8 и выше версии будут ошибки. Но есть его форк
https://github.com/bertho-zero/react-redux-universal-hot-example, где продолжается разработка и поддерживаются более свежие версии Nodejs.

Это краткое руководство и обучение по фронтэнеду для бэкендера. В данном руководстве я решаю проблему быстрого построения пользовательского интерфейса к серверному приложению в виде одностраничного веб-приложения (single page app).


Основной целью моего исследования является возможность за разумное время (для одного нормального человека) получить удобный и простой в использовании интерфейс-черновик к серверному приложению. Мы (как разработчики серверной части) понимаем, что наш приоритет — серверная часть. Когда (в гипотетическом проекте) появятся во фронте профи своего дела, они все сделают красиво и "правильно".


В роли учебной задачи представлена страничка чата с каким-то умозрительным "ботом", который работает на стороне сервера и принимает сообщение только через WebSocket. Бот при этом выполняет эхо ваших сообщений (мы тут не рассматриваем серверную часть вообще).

Читать дальше →
Total votes 37: ↑33 and ↓4+29
Comments32

Linux-2017: самые перспективные дистрибутивы

Reading time6 min
Views329K
Настал новый год, а значит – пришло время посмотреть в будущее, найти самые лучшие, самые перспективные дистрибутивы Linux.



Дистрибутивы Linux часто бывают ориентированы на конкретные задачи. Поэтому не получится просто составить список операционных систем и сказать: «они – самые лучшие». Здесь выделены несколько областей использования Linux и выбраны те дистрибутивы, у которых есть все шансы стать первыми в своей нише в 2017-м.
Читать дальше →
Total votes 63: ↑46 and ↓17+29
Comments184

19 неожиданных находок в документации Node.js

Reading time11 min
Views45K
Мне хотелось бы думать, что я вполне прилично знаю Node. Вот уже три года, как ни один из сайтов, над которыми я работал, не обходится без него. Но документацию до сих пор я как следует не читал.

Мне нравится записывать полезные вещи об интерфейсах, свойствах, методах, функциях, типах данных, и обо всём прочем, что относится к веб-разработке. Так я заполняю пробелы в знаниях. Сейчас я занят документацией к Node.js, а до этого проработал материалы по HTML, DOM, по Web API, CSS, SVG и EcmaScript.

image

Чтение документации Node.js открыло мне немало замечательных вещей, о которых я раньше не знал. Ими я хочу поделиться в этом небольшом материале. Начну с самого интересного. Так же я обычно делаю, когда показываю новому знакомому свои гаджеты.
Читать дальше →
Total votes 82: ↑75 and ↓7+68
Comments72

Стильный код на Python, или учимся использовать Flake8

Reading time7 min
Views171K

Автор: Анатолий Соловей, developer

Язык программирования Python очень востребован на современном рынке, он развивается изо дня в день, и вокруг него сложилось активное сообщество. Во избежание конфликтов между разработчиками-питонистами, создатели языка написали соглашение PEP 8, описывающее правила оформления кода, однако даже там отмечено, что:
Many projects have their own coding style guidelines. In the event of any conflicts, such project-specific guides take precedence for that project.

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

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

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

На помощь в этом случае приходят линтеры — инструменты, контролирующие оформление кода в проекте. Именно они помогают поддерживать его чистоту и, в нашем случае, предотвращать создание коммитов, которые могут содержать ошибки. Я для контроля качества использую Flake8 и сейчас постараюсь объяснить, почему выбрал именно его, и расскажу, как его настроить, чтобы получить максимальный результат. Заинтересовались? Добро пожаловать под кат.
Читать дальше →
Total votes 28: ↑26 and ↓2+24
Comments16

Поиграл == покодил

Reading time3 min
Views73K
image

Мой рекорд скорости написания кода «на C» был в консоли Quake II. Причем абсолютно без ошибок. В темноте, не глядя, трясущимися руками надо было набрать примерно такое:

bind SHIFT "+snipe"
alias +snipe "sensitivity 2.5; fov 30"
alias -snipe "fov 90; sensitivity 4"

Боги умели прописывать RocketJump.

RocketJump
bind t "superrjr"

bind a "superrjn"

alias superrjr "echo SuperRocketJump enabled; bind a +srj; bind t superrjc"

alias superrjn "echo SuperRocketJump disabled"

alias superrjc "echo SuperRocketJump disabled; bind a superrjn; bind t superrjr"

alias +srj "lookdown1;hand 2;rjump"

alias -srj "lookdown2"

alias lookdown1 "cl_pitchspeed 999999;+lookdown"

alias lookdown2 "-lookdown;cl_pitchspeed 200;-attack;-moveup;wait;wait;wait;centerview;hand 2;cl_maxfps 80"

alias rjump "+moveup;+attack;wait;wait;wait;wait;cl_maxfps 0"

alias +QLD "+lookdown;cl_pitchspeed 999"

alias -QLD "-lookdown;cl_pitchspeed 200"

alias +RocketJump "hand 2;+QLD;wait;wait;+attack;+moveup"

alias -RocketJump "hand 2;-QLD;-attack;-moveup"

alias SuperRocketJump "hand 2;+QLD;wait;wait;wait;wait;+attack;+moveup;wait;cl_maxfps 0;LWX3;cl_maxfps 90;-QLD;-attack;-moveup;hand 2" 


Под катом — подборка дюжины проектов, которые заточены на то, чтобы играючи повысить кодерское мастерство.
Total votes 57: ↑51 and ↓6+45
Comments41

Консоль разработчика Google Chrome: десять неочевидных полезностей

Reading time6 min
Views231K
Как с помощью консоли разработчика превратить Google Chrome в подобие текстового редактора? Какой смысл в ней приобретает знакомый многим по jQuery значок $? Как вывести в консоль набор значений, оформленный в виде вполне приличной таблицы? Если сходу ответы на эти вопросы в голову не приходят, значит вкладка Console из инструментов разработчика Chrome ещё не раскрылась перед вами во всей красе.

image

На первый взгляд, перед нами – вполне обычная JavaScript-консоль, которая годится только на то, чтобы выводить в неё логи ответов серверов или значения переменных. Я, кстати, так ей и пользовался, когда только начал программировать. Однако, со временем набрался опыта, подучился, и неожиданно для себя обнаружил, что консоль Chrome умеет много такого, о чём я и не догадывался. Хочу об этом сегодня рассказать. Да, если вы читаете сейчас не на мобильнике, можете тут же всё это и попробовать.
Читать дальше →
Total votes 88: ↑83 and ↓5+78
Comments62
1
23 ...

Information

Rating
Does not participate
Registered
Activity