Как стать автором
Обновить
0
0
manbrk @manbrk

Пользователь

Отправить сообщение

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

Время на прочтение4 мин
Количество просмотров183K


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

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

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

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

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

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

image
Читать дальше →
Всего голосов 28: ↑27 и ↓1+26
Комментарии11

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

Время на прочтение3 мин
Количество просмотров18K

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

Читать дальше →
Всего голосов 24: ↑21 и ↓3+18
Комментарии28

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

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

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

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

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

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

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

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

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


Читать дальше →
Всего голосов 27: ↑19 и ↓8+11
Комментарии28

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

Время на прочтение3 мин
Количество просмотров107K


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

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

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

Время на прочтение5 мин
Количество просмотров21K
Светлана Шаповалова, редактор «Нетологии», перевела статью Тайлера МакГинниса, в которой он перечислил основные моменты озарения, которые возникают при изучении React.

image

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

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

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

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

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

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

Время на прочтение10 мин
Количество просмотров30K

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


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

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


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

Читать дальше →
Всего голосов 33: ↑31 и ↓2+29
Комментарии84

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

Время на прочтение40 мин
Количество просмотров156K


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

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

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

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

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

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

Время на прочтение17 мин
Количество просмотров190K
Часть 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. Ссылки по теме.
Изучаем детали, иллюстрации и примеры
Всего голосов 22: ↑21 и ↓1+20
Комментарии45

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

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

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

Время на прочтение8 мин
Количество просмотров38K
Читать дальше →
Всего голосов 33: ↑28 и ↓5+23
Комментарии7

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

Время на прочтение30 мин
Количество просмотров48K
Всем привет из 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. Бот при этом выполняет эхо ваших сообщений (мы тут не рассматриваем серверную часть вообще).

Читать дальше →
Всего голосов 37: ↑33 и ↓4+29
Комментарии32

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

Время на прочтение6 мин
Количество просмотров329K
Настал новый год, а значит – пришло время посмотреть в будущее, найти самые лучшие, самые перспективные дистрибутивы Linux.



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

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

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

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

image

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

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

Время на прочтение7 мин
Количество просмотров171K

Автор: Анатолий Соловей, 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 и сейчас постараюсь объяснить, почему выбрал именно его, и расскажу, как его настроить, чтобы получить максимальный результат. Заинтересовались? Добро пожаловать под кат.
Читать дальше →
Всего голосов 28: ↑26 и ↓2+24
Комментарии16

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

Время на прочтение3 мин
Количество просмотров73K
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" 


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

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

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

image

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

Информация

В рейтинге
Не участвует
Зарегистрирован
Активность