В последнее время случилась (и продолжает случаться) тьма публикаций про кадровый голод в айти, про переоценённость синьоров, недооценённость всех остальных, про золотые горы, скандалы, интриги и конский перекос баланса фракции "программисты". Ну, короче, вы сами всё читали и вполне себе в теме. Так вот, в сим опусе хочется вспомнить, а ктож такой синьор и что ему крайне желательно знать, чтобы синдром самозванца не накрывал и чтобы окружающие уважали и на поклон за советом приходили.
Владислав Сысоев @Bayern-fan
Junior Web Developer
5 JavaScript-библиотек для работы со строками
6 мин
11KПеревод
Работа со строками может оказаться непростым делом из-за того, что она подразумевает решение множества разноплановых задач. Например, для простого приведения строки к «верблюжьему» стилю понадобится несколько строк кода:
Этот фрагмент кода, кстати, в роли ответа на вопрос о приведении строк к «верблюжьему» стилю, собрал больше всего голосов на Stack Overflow. Но даже он не в состоянии правильно обработать, например, такую строку:
Результат обработки строки ---Foo---bAr---
А как быть, если такие строки, всё же, нужно обрабатывать? Можно подправить этот пример, а можно прибегнуть к помощи специализированных библиотек. Они упрощают реализацию сложных алгоритмов и, кроме того, дают программисту инструменты, обладающие куда большей гибкостью и универсальностью, чем, скажем, вышеприведённый пример. Это вполне может означать, что для решения некоей непростой задачи понадобится вызвать всего один метод.
Поговорим о нескольких JavaScript-библиотеках, предназначенных для работы со строками.
function camelize(str) {
return str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function(match, index) {
if (+match === 0) re
turn ""; // или if (/\s+/.test(match)) для пробелов
return index === 0 ? match.toLowerCase() : match.toUpperCase();
});
}
Этот фрагмент кода, кстати, в роли ответа на вопрос о приведении строк к «верблюжьему» стилю, собрал больше всего голосов на Stack Overflow. Но даже он не в состоянии правильно обработать, например, такую строку:
---Foo---bAr---
Результат обработки строки ---Foo---bAr---
А как быть, если такие строки, всё же, нужно обрабатывать? Можно подправить этот пример, а можно прибегнуть к помощи специализированных библиотек. Они упрощают реализацию сложных алгоритмов и, кроме того, дают программисту инструменты, обладающие куда большей гибкостью и универсальностью, чем, скажем, вышеприведённый пример. Это вполне может означать, что для решения некоей непростой задачи понадобится вызвать всего один метод.
Поговорим о нескольких JavaScript-библиотеках, предназначенных для работы со строками.
+39
О главнейшей причине существования современных JS-фреймворков
7 мин
32KПеревод
Автор материала, перевод которого мы публикуем сегодня, говорит, что ему очень и очень часто приходилось видеть, как веб-разработчики бездумно пользуются современными фреймворками вроде React, Angular или Vue.js. Эти фреймворки предлагают много интересного, но, как правило, программисты, применяя их, не учитывают главнейшей причины их существования. Обычно на вопрос: «Почему вы используете фреймворк X», можно услышать следующие ответы, среди которых, однако, нет самого главного:
- Этот фреймворк основан на компонентах.
- У него имеется мощное сообщество.
- Для него разработано множество сторонних библиотек, которые помогают решать различные задачи.
- Существуют полезные дополнительные компоненты для этого фреймворка.
- Имеются расширения для браузеров, которые помогают отлаживать приложения, созданные с помощью данного фреймворка.
- Этот фреймворк хорошо подходит для создания одностраничных приложений.
На самом же деле самая главная, фундаментальная причина использования фреймворков заключается в том, что они помогают решать задачу синхронизации пользовательского интерфейса и внутреннего состояния приложения. Это — чрезвычайно сложная и важная задача, и именно о ней мы сегодня и поговорим.
+18
Классические алгоритмы и структуры данных на JavaScript
2 мин
93KПривет Всем! Я недавно запустил на GitHub проект JavaScript Algorithms and Data Structures, который содержит примеры классических алгоритмов и структур данных написанных на JavaScript с объяснениями, примерами и ссылками для дальнейшего изучения (в частности на соответствующие YouTube видео).
Основная задача проекта — помочь программистам в изучении и применении алгоритмов и сделать это на JavaScript-е.
Основная задача проекта — помочь программистам в изучении и применении алгоритмов и сделать это на JavaScript-е.
+66
Как фронтенд-разработчику настроить базу данных
6 мин
17KПеревод
Недавно меня спросили, как фронтенд-разработчику проще всего сохранить пользовательские данные? Под катом — моя краткая инструкция для тех, кто с базами данных «на вы».
+15
Правила английского, которые нарушают ваши иностранные коллеги
4 мин
61KТуториал
Если вы общаетесь с коллегами на английском, вы наверняка не хотите ударить перед ними в грязь лицом и стараетесь говорить максимально правильно, по всем правилам грамматики, фонетики и еще какой-нибудь -тики. А что, если бы мы сказали вам, что можно спокойно нарушать эти самые правила и оставаться пОнятыми? В этой статье мы постараемся описать случаи, когда можно допускать ошибки и почему это можно делать.
Двойное отрицание
Вы же помните, что в предложении на английском достаточно одного отрицания? А потом вдруг слушаем песню Rolling Stones и слышим “I can’t get no satisfaction”. Все дело в том, что это песня, тут можно, скажите вы. И это верно. Но еще стоит упомянуть, что двойное отрицание делает фразу эмоциональнее. Поэтому такие фразы и стали популярны. Но это неформальный способ, так что не увлекайтесь с двойными отрицаниями.
+67
Как выбрать фреймворк для frontend-разработки
6 мин
116KПредлагаю вашему вниманию перевод статьи How To Pick a Frontend Web Framework c сайта top.fse.guru.
Привет, приятель!
Ниже ты найдешь большой список компоновки инструментов и фреймворков. Не волнуйся! Ты можешь выбрать один, в котором точно уверен, или проигнорировать все и придумать свой вариант.
Данная статья предназначена для того, что бы помочь тебе узнать и упорядочить список инструментов которые используются в сфере frontend-разработки. А так же, это неплохой список, из которого ты можешь выбрать то, что тебе придется по душе.
Привет, приятель!
Ниже ты найдешь большой список компоновки инструментов и фреймворков. Не волнуйся! Ты можешь выбрать один, в котором точно уверен, или проигнорировать все и придумать свой вариант.
Данная статья предназначена для того, что бы помочь тебе узнать и упорядочить список инструментов которые используются в сфере frontend-разработки. А так же, это неплохой список, из которого ты можешь выбрать то, что тебе придется по душе.
+20
Разбираемся с Flux, реактивной архитектурой от facebook
7 мин
115KТуториал
Перевод
Введение
Добро пожаловать в третью часть серии статей «Изучаем React». Сегодня мы будем изучать, как устроена архитектура Facebook Flux, и как использовать ее в своих проектах.
+25
Каково это — быть разработчиком в России, когда тебе сорок
37 мин
161KПривет всем, я — сорокалетний программист-самоучка, а это моя история.
Пару недель назад я наткнулся на график распределения людей, интересующихся технологиями, ИТ и программированием. И он заставил меня задуматься о моей карьере.
Через каких-то 20 лет мне стукнет 60. И вероятность того, что я еще смогу заниматься тем, для чего был создан, составляет очень крошечную величину. Эти размышления привели меня туда, откуда все начиналось.
Я дебютировал в роли разработчика программного обеспечения в 1990 году, через год после того, как мне на 14-тилетие родители подарили ПЭВМ «Микроша».
Пару недель назад я наткнулся на график распределения людей, интересующихся технологиями, ИТ и программированием. И он заставил меня задуматься о моей карьере.
Через каких-то 20 лет мне стукнет 60. И вероятность того, что я еще смогу заниматься тем, для чего был создан, составляет очень крошечную величину. Эти размышления привели меня туда, откуда все начиналось.
Я дебютировал в роли разработчика программного обеспечения в 1990 году, через год после того, как мне на 14-тилетие родители подарили ПЭВМ «Микроша».
+323
Мир недокументированного React.js. Context
6 мин
35KПредлагаю читателям «Хабрахабра» перевод статьи «The land of undocumented react.js: The Context».
Если мы взглянем на React компонент то мы можем увидеть некоторые свойства.
Да, каждый React компонент имеет state. Это что-то внутри компонента. Только сам компонент может читать и писать в свой собственный state и как видно из названия — state используется для хранения состояния компонента (Привет, Кэп). Не интересно, давайте дальше.
Или, скажем, properties. Props — это данные, которые оказывают влияние на отображение и поведение компонента. Props могут быть как опциональны так и обязательны и они обеспечиваются через родительский компонент. В идеале, если Вы передаете своему компоненту одинаковые Props — он отрендерит одно и тоже. Не интересно, давайте двигаться дальше.
Встречайте context, причину, по которой я написал этот пост. Context — это недокументированная особенность React и похожа на props, но разница в том, что props передается исключительно от родительского компонента к дочернему и они не распространяются вниз по иерархии, в то время как context просто может быть запрошен в дочернем элементе.
Если мы взглянем на React компонент то мы можем увидеть некоторые свойства.
State
Да, каждый React компонент имеет state. Это что-то внутри компонента. Только сам компонент может читать и писать в свой собственный state и как видно из названия — state используется для хранения состояния компонента (Привет, Кэп). Не интересно, давайте дальше.
Props
Или, скажем, properties. Props — это данные, которые оказывают влияние на отображение и поведение компонента. Props могут быть как опциональны так и обязательны и они обеспечиваются через родительский компонент. В идеале, если Вы передаете своему компоненту одинаковые Props — он отрендерит одно и тоже. Не интересно, давайте двигаться дальше.
Context
Встречайте context, причину, по которой я написал этот пост. Context — это недокументированная особенность React и похожа на props, но разница в том, что props передается исключительно от родительского компонента к дочернему и они не распространяются вниз по иерархии, в то время как context просто может быть запрошен в дочернем элементе.
+22
React на ES6+
5 мин
72KПеревод
Это перевод поста Steven Luscher опубликованного в блоге Babel. Steven работает в Facebook над Relay – JavaScript фрэймворком для создания приложений с использованием React и GraphQL.
За этот год, в процессе реорганизации Instagram Web, мы насладились использованием ряда особенностей ES6+, при написании нашх React компонентов. Позвольте мне остановиться на тех моментах, когда новые возможности языка могут повлиять на то как вы пишите React приложения, и сделают этот процесс легче и веселее, чем когда-либо.
+17
Sublime Text для фронтэнд-разработчика
5 мин
214KПеревод
Sublime Text на данный момент является одним из самых популярных текстовых редакторов, используемых для веб-разработки, поэтому надо знать его преимущества и недостатки. Вместо того, чтобы шаг за шагом описать все фичи Sublime Text, эта статья познакомит вас с самыми популярными приёмами и полезными плагинами, позволяющими ускорить разработку.
+22
Использование putty и ssh ключей в Windows
2 мин
294KТак как приходиться уже не первый раз объяснять как это делается, решил оформить в виде How-To в картинках
Скачиваем архив putty отсюда putty.zip
1. Распаковываем и запускаем ssh-keygen
Выбираем ключ ssh-rsa и длину 2048 бит. Жмем «Generate».
Скачиваем архив putty отсюда putty.zip
1. Распаковываем и запускаем ssh-keygen
Выбираем ключ ssh-rsa и длину 2048 бит. Жмем «Generate».
+5
Обзор способов и протоколов аутентификации в веб-приложениях
18 мин
620KЯ расскажу о применении различных способов аутентификации для веб-приложений, включая аутентификацию по паролю, по сертификатам, по одноразовым паролям, по ключам доступа и по токенам. Коснусь технологии единого входа (Single Sign-On), рассмотрю различные стандарты и протоколы аутентификации.
Перед тем, как перейти к техническим деталям, давайте немного освежим терминологию.
- Идентификация — это заявление о том, кем вы являетесь. В зависимости от ситуации, это может быть имя, адрес электронной почты, номер учетной записи, итд.
- Аутентификация — предоставление доказательств, что вы на самом деле есть тот, кем идентифицировались (от слова “authentic” — истинный, подлинный).
- Авторизация — проверка, что вам разрешен доступ к запрашиваемому ресурсу.
Например, при попытке попасть в закрытый клуб вас идентифицируют (спросят ваше имя и фамилию), аутентифицируют (попросят показать паспорт и сверят фотографию) и авторизуют (проверят, что фамилия находится в списке гостей), прежде чем пустят внутрь.
Аналогично эти термины применяются в компьютерных системах, где традиционно под идентификацией понимают получение вашей учетной записи (identity) по username или email; под аутентификацией — проверку, что вы знаете пароль от этой учетной записи, а под авторизацией — проверку вашей роли в системе и решение о предоставлении доступа к запрошенной странице или ресурсу.
Однако в современных системах существуют и более сложные схемы аутентификации и авторизации, о которых я расскажу далее. Но начнем с простого и понятного.
+48
OAuth 2.0 простым и понятным языком
7 мин
789KНа хабре уже писали про OAuth 1.0, но понятного объяснения того, что такое OAuth 2.0 не было. Ниже я расскажу, в чем отличия и преимущества OAuth 2.0 и, как его лучше использовать на сайтах, в мобильных и desktop-приложениях.
Что такое OAuth 2.0
OAuth 2.0 — протокол авторизации, позволяющий выдать одному сервису (приложению) права на доступ к ресурсам пользователя на другом сервисе. Протокол избавляет от необходимости доверять приложению логин и пароль, а также позволяет выдавать ограниченный набор прав, а не все сразу.
+138
Экзамен для будущих «русских хакеров» в Московском Политехе
8 мин
32KИ снова здравствуйте. Обычно я пишу статьи в качестве разработчика, но сегодня хочется поделиться опытом проведения экзамена по информационной безопасности в Московском Политехе. По-моему получилось довольно интересно. Задание даже может быть полезным начинающим тестировщикам и пентестерам. Но вначале я немного расскажу про то, как проходили занятия в течении семестра — чтобы было понятно, как мы дошли до жизни такой.
+26
AngularJS + UI Router: проверка авторизации и прав доступа
3 мин
74KТуториал
Если ваше приложение предполагает авторизацию пользователей и/или проверку прав доступа, то вам придется либо изобретать велосипед, либо гуглить в поисках подходящего решения. В принципе, я тоже это делал. В итоге я принял приемлемым для себя описанный ниже вариант.
Информацию об авторизованном пользователе я решил хранить в sessionStorage, копируя её при запуске приложения в
Предпосылки
Информацию об авторизованном пользователе я решил хранить в sessionStorage, копируя её при запуске приложения в
$rootScope
. Также по рекомендации авторов UI Router я храню в $rootScope значения объекты $state
и $stateParam
, для удобного доступа. Информацию же о доступе к тому или иному состоянию можно передавать через блок data
при описании самого состояния. Поскольку в моем приложении везде закрыт доступ, я решил идти от обратного и добавлять значение noLogin = true
для состояний, которые не требуют авторизации, например страницы ввода логина, восстановления пароля или регистрации.+23
А ваша служба является RESTful? Все что необходимо/обязательно знать про веб службы и REST
18 мин
145KВведение
Вот не люблю я изобретать велосипед и статью я бы эту не написал, но пришлось. Про REST сказано уже довольно много. Многие поставщики веб служб готовы клясться, что их службы являются RESTful. Во время собеседования вы точно услышите хотя бы несколько вопросов про REST, независимо от того это собеседования для бэкенд, мобайл или фронтенд разработчика. Я вот помню как-то во время одного собеседования меня задали такой вопрос: «Вот вы написали в своем резюме, что знайте REST․ Ответьте пожалуйста, какой HTTP код вы получите, если при запросе к RESTful сервису ресурс не найден?». Ответ 404 был принят единогласно. Если честно, я так и не понял, как этот вопрос помог понять знаю ли я REST или нет, но одно могу уверенно сказать: REST понимают далеко не все. Вот некоторые вопросы, которые мучали меня долгое время:
- Зачем REST стал таким трендовым? Это архитектура была же предложена еще в 2000 году?
- Что я получу если моя служба будет RESTful?
- Как определить является ли служба RESTful или нет?
- Как правильно должны создаваться URL REST служб?
- Какие http методы и коды должны быть использованы в RESTful службе?
Если вы не можете дать исчерпывающего ответа хотя бы на один из этих вопросов, то продолжайте чтение. Если вы можете однозначно ответить на все эти вопросы, можете привести формат правильного URL, считайте, что GET, POST, PUT, DELETE обязательно должны соответствовать CRUD операциям с ресурсами, то вам обязательно надо продолжать чтение.
+31
Как работает Passport.js
4 мин
117KТуториал
PassportJS — это middleware для авторизации под node.js. Passport поддерживает авторизацию с помощью огромного количества сервисов, включая «ВКонтакте» и прочие твиттеры. Список сервисов можно просмотреть здесь. Я хочу немного рассказать о том, как работает этот middleware на примере самой обычной авторизации с помощью логина и пароля.
Для самых нетерпеливых — готовый проект можно посмотреть здесь.
+14
Пишем микросервис на KoaJS 2 в стиле ES2017. Часть II: Минималистичный REST
5 мин
32KЭто продожение статьи Пишем микросервис на KoaJS 2 в стиле ES2017. Часть I: Такая разная ассинхронность. Постараюсь угодить начинающему разработчику, который хочет расстаться с express, но не знает как. Кода будет много, текста мало — я ленивый но отзывчивый.
+11
Информация
- В рейтинге
- Не участвует
- Откуда
- Минск, Минская обл., Беларусь
- Дата рождения
- Зарегистрирован
- Активность