Pull to refresh
18
0
Александр @oleks

Front-end

Send message

Next.js: подробное руководство. Итерация вторая

Reading time33 min
Views40K


Привет, друзья!


Хочу поделиться с вами заметками о Next.js (надеюсь, кому-нибудь пригодится).


Next.js — это основанный на React фреймворк, предназначенный для разработки веб-приложений, обладающих функционалом, выходящим за рамки SPA, т.е. так называемых одностраничных приложений.


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


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


Кроме того, существуют специальные инструменты, такие как react-snap, позволяющие превратить React-SPA в многостраничник путем предварительного рендеринга приложения в статическую разметку. Метаинформацию же можно встраивать в head с помощью таких утилит, как react-helmet. Однако Next.js существенно упрощает процесс разработки многостраничных и гибридных приложений (последнего невозможно добиться с помощью того же react-snap). Он также предоставляет множество других интересных возможностей.



Обратите внимание: данная статья предполагает, что вы обладаете некоторым опытом работы с React. Также обратите внимание, что заметки не сделают вас специалистом по Next.js, но позволят получить о нем исчерпывающее представление.


Заметки состоят из 2 частей. Это часть номер два.


Итерация первая

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

Весь мир в кармане или как сделать мобильную карту за пару дней

Reading time8 min
Views22K


В прошлой статье я рассказывал о том, как можно быстро сделать Web-звонилку. А что если поставить более амбициозную задачу — собрать своё собственное приложение с картой, без рекламы и с блэк-джеком? А если всего за пару дней?


Давайте сделаем это! Прошу под кат.

Читать дальше
Total votes 31: ↑30 and ↓1+29
Comments11

Дозвонились! Как собрать свою Web-звонилку за час

Reading time7 min
Views36K


Друзья, сегодня я хочу поговорить с вами про звонки. Для кого-то это совсем новая тема. Для других — чистой воды фан на уровне «а не зафигачить ли мне свой скайп?». Для третьих — внезапно возникшая жизненная необходимость. Последний вариант — наш вариант.


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

Уже хочу
Total votes 43: ↑43 and ↓0+43
Comments15

Быстрая генерализация маркеров на WebGL-карте

Reading time8 min
Views7.6K

image


Маркеры — дело полезное. Полезное в разумных количествах. Когда их становится слишком много, польза улетучивается. Как поступить, если требуется отметить на карте поисковую выдачу, в которой десятки тысяч объектов? В статье я расскажу, как мы решаем эту задачу на WebGL-карте без ущерба для её внешнего вида и производительности.

Генерализируем
Total votes 36: ↑36 and ↓0+36
Comments17

Мигание винтажными светодиодами или как мы предупреждаем о «пожарах» на проекте

Reading time5 min
Views15K


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


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

Поехали
Total votes 63: ↑63 and ↓0+63
Comments21

Frontend DevDay. Запись докладов

Reading time2 min
Views4.5K


7 декабря мы провели Frontend DevDay — смешали техническую презентацию нового 2ГИС с полноценным митапом. Разговаривали про карты на WebGL, трансформацию команды и запросы браузера. По словам участников, получилось празднично и увлекательно.

Сегодня делимся записями всех трёх докладов. Спикеры на связи, если у вас возникнут вопросы — смело задавайте в комментариях к посту.
Посмотреть
Total votes 31: ↑31 and ↓0+31
Comments4

Рассылай и властвуй: вёрстка рассылки тогда и сейчас

Reading time8 min
Views15K
image

Их читают миллионы людей по всему миру. Их добавляют в спам, удаляют навсегда, но без них немыслим современный интернет. Многие фронтендеры пойдут на всё, что угодно, лишь бы отвертеться от работы над ними. Мой рассказ — об электронных письмах, о том, как они изменились за 20 лет и о том, как современному фронтендеру не впасть в депрессию, верстая их. Это первая статья из цикла, в которой я расскажу о том, как всё начиналось. Через пару недель поговорим о инструментах разработки и тестирования рассылки.
Утри слёзы, верстальщик
Total votes 38: ↑37 and ↓1+36
Comments9

Bash-скрипты, часть 10: практические примеры

Reading time9 min
Views179K
Bash-скрипты: начало
Bash-скрипты, часть 2: циклы
Bash-скрипты, часть 3: параметры и ключи командной строки
Bash-скрипты, часть 4: ввод и вывод
Bash-скрипты, часть 5: сигналы, фоновые задачи, управление сценариями
Bash-скрипты, часть 6: функции и разработка библиотек
Bash-скрипты, часть 7: sed и обработка текстов
Bash-скрипты, часть 8: язык обработки данных awk
Bash-скрипты, часть 9: регулярные выражения
Bash-скрипты, часть 10: практические примеры
Bash-скрипты, часть 11: expect и автоматизация интерактивных утилит

В предыдущих материалах мы обсуждали различные аспекты разработки bash-скриптов, говорили о полезных инструментах, но до сих пор рассматривали лишь небольшие фрагменты кода. Пришло время более масштабных проектов. А именно, здесь вы найдёте два примера. Первый — скрипт для отправки сообщений, второй пример — скрипт, выводящий сведения об использовании дискового пространства.



Главная ценность этих примеров для тех, кто изучает bash, заключается в методике разработки. Когда перед программистом встаёт задача по автоматизации чего бы то ни было, его путь редко бывает прямым и быстрым. Задачу надо разбить на части, найти средства решения каждой из подзадач, а потом собрать из частей готовое решение.
Читать дальше →
Total votes 31: ↑28 and ↓3+25
Comments5

Как получить оффер в день собеседования и не ждать сто лет

Reading time3 min
Views37K

enter image description here


UPD: По итогам мероприятия мы сделали 8 предложений о работе: 5 – iOS-разработчикам, 3 – Android-разработчикам.


Привет, Хабр! Я Богдан, разработчик в iOS-команде Badoo в Лондоне. Прочитав заголовок, вы можете подумать, что в Badoo совсем с ума сошли публиковать посты на такие темы. Но пост вполне для Хабра. Мы сейчас очень активно расширяем iOS- и Android-команды и ищем разработчиков по всему миру. Естественно, Москву обойти стороной просто не можем (наш второй офис здесь). Мы хотим провести достаточно необычное мероприятие, чтобы после него обзавестись новыми коллегами.


Мы (мобильные команды Badoo) решили приехать на несколько дней в Москву и провести небольшую встречу, после которой несколько разработчиков (iOS и Android) получат предложения о работе у нас (в Лондоне). Чтобы не затягивать эту самую встречу, мы сделали онлайн-тест (он не суперсложный, а скорее чтобы понять ваш уровень и упростить и ускорить личные встречи).

Читать дальше →
Total votes 89: ↑63 and ↓26+37
Comments51

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

Reading time5 min
Views24K
Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.

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

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

Reading time4 min
Views21K
Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.

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

Трудные уроки: пять лет с Node.js

Reading time11 min
Views35K
После пяти лет работы с Node.js я многое понял. Я уже делился некоторыми историями, но в этот раз хочу рассказать о том, какие знания дались труднее всего. Баги, проблемы, сюрпризы и уроки, которые вы можете использовать в собственных проектах!

Базовые концепции


В каждой новой платформе есть свои хитрости, но в данный момент эти концепции для меня вторичны. Разобраться в своём баге — хороший способ гарантированного обучения. Даже если это немного болезненно!

Классы


Когда я только начал работать с Node.js, то написал скрапер. Очень быстро я понял, что если ничего не предпринять, то он будет осуществлять много запросов параллельно. Одно это стало важным открытием. Но поскольку я ещё не полностью усвоил мощь экосистемы, то сел и написал собственный ограничитель параллелизма. Он работал и проверял, что в каждый момент времени активны не более N запросов одновременно.
Читать дальше →
Total votes 33: ↑27 and ↓6+21
Comments8

Что же такое этот GraphQL?

Reading time9 min
Views684K

Вашему вниманию предлагаю перевод статьи Sacha Greif "Что же такое этот GraphQL?"


Если вы такой же, как и я, вы обычно проходите через три этапа, когда узнаёте о новой технологии:


  • Отрицание: Ещё одна JavaScript библиотека?! Зачем? У меня уже есть jQuery!
  • Интерес: Хм, наверное мне следует взглянуть на эту библиотеку...
  • Паника: Помогите! Мне нужно изучить эту библиотеку прямо сейчас, иначе мои знания устареют!

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


Именно поэтому сейчас самое время узнать, что же такое этот GraphQL, о котором вы повсюду слышите.

Читать дальше →
Total votes 23: ↑22 and ↓1+21
Comments55

Все, что вам нужно знать об обнаружении изменений в Angular

Reading time8 min
Views84K
Наткнулся на хорошую статью об устройстве Angular'овского механизма обнаружения изменений (change detection). Т.к. тема достаточна важна, но при этом недостаточно глубоко раскрыта даже на англоязычных ресурсах, а найти русскоязычные материалы на эту тему, вообще, не представляется возможным, решил перевести данную статью.
Перевод под катом
Total votes 21: ↑20 and ↓1+19
Comments8

Bash-скрипты, часть 5: сигналы, фоновые задачи, управление сценариями

Reading time9 min
Views184K
Bash-скрипты: начало
Bash-скрипты, часть 2: циклы
Bash-скрипты, часть 3: параметры и ключи командной строки
Bash-скрипты, часть 4: ввод и вывод
Bash-скрипты, часть 5: сигналы, фоновые задачи, управление сценариями
Bash-скрипты, часть 6: функции и разработка библиотек
Bash-скрипты, часть 7: sed и обработка текстов
Bash-скрипты, часть 8: язык обработки данных awk
Bash-скрипты, часть 9: регулярные выражения
Bash-скрипты, часть 10: практические примеры
Bash-скрипты, часть 11: expect и автоматизация интерактивных утилит

image

В прошлый раз мы говорили о работе с потоками ввода, вывода и ошибок в bash-скриптах, о дескрипторах файлов и о перенаправлении потоков. Сейчас вы знаете уже достаточно много для того, чтобы писать что-то своё. На данном этапе освоения bash у вас вполне могут возникнуть вопросы о том, как управлять работающими скриптами, как автоматизировать их запуск.
Читать дальше →
Total votes 31: ↑27 and ↓4+23
Comments8

Десять главных причин, которые делают программиста несчастным

Reading time4 min
Views30K

Счастье разработчиков (сбалансированный индекс по шкале положительного и отрицательного опыта)

Некоторые компании Кремниевой долины и начинающие стартапы тратят немалые средства на то, чтобы их сотрудники были счастливы, в последнее время это стало общим местом и своеобразным трендом: бесплатная еда, спортзал, массаж на рабочем месте. Разумеется, компании делают это не ради заботы о людях, а для повышения собственной прибыли. Предыдущие исследования показали, что продуктивность сотрудника повышается, если он более счастлив. Особенно актуально это для работников интеллектуального труда, таких как инженеры ПО. В связи с этим для компаний важно узнать — какие причины влияют на уровень счастья, а что, наоборот, вызывает неудовольствие у программистов.

В соответствии с результатами опроса, опубликованными в марте 2017 года, разработчики программного обеспечения, в среднем, «слегка счастливы». Положительный индекс — хорошая новость для работодателей. Значит, усилия компаний не пропали зря. Но им ещё есть куда стремиться. Исследователи составили список основных причин недовольства программистов — эти факторы желательно свести к минимуму.
Читать дальше →
Total votes 34: ↑26 and ↓8+18
Comments48

К чёрту мотивацию, вам нужна дисциплина

Reading time4 min
Views121K
Если вы желаете что-то сделать, то есть два способа этого достичь.

Первый, более распространённый и в значительной мере неправильный вариант — попытаться мотивировать себя.

Второй, весьма непопулярный, но абсолютно правильный выбор — воспитание дисциплины.

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

В чём же разница?
Читать дальше →
Total votes 62: ↑53 and ↓9+44
Comments63

Почему конструкторы сайтов выдают плохой код?

Reading time4 min
Views27K
Пишу эту статью, потому что верстальщикам и программистам приходится все чаще и чаще сталкиваться с результатом работы подобных сервисов. Также приходится испытывать конкуренцию с их стороны – как минимум в сегменте недорогих сайтов. И нет более-менее фундаментальной статьи, в которой конструкторы сайтов рассматриваются под этим ракурсом. Будет полезно знать, что является причиной плохого кода и есть ли перспективы у конструкторов заменить массовую ручную верстку, или все это игрушки, не имеющие никаких перспектив.

image
Читать дальше →
Total votes 30: ↑22 and ↓8+14
Comments49

Bash-скрипты, часть 4: ввод и вывод

Reading time9 min
Views378K
Bash-скрипты: начало
Bash-скрипты, часть 2: циклы
Bash-скрипты, часть 3: параметры и ключи командной строки
Bash-скрипты, часть 4: ввод и вывод
Bash-скрипты, часть 5: сигналы, фоновые задачи, управление сценариями
Bash-скрипты, часть 6: функции и разработка библиотек
Bash-скрипты, часть 7: sed и обработка текстов
Bash-скрипты, часть 8: язык обработки данных awk
Bash-скрипты, часть 9: регулярные выражения
Bash-скрипты, часть 10: практические примеры
Bash-скрипты, часть 11: expect и автоматизация интерактивных утилит

В прошлый раз, в третьей части этой серии материалов по bash-скриптам, мы говорили о параметрах командной строки и ключах. Наша сегодняшняя тема — ввод, вывод, и всё, что с этим связано.

image
Читать дальше →
Total votes 34: ↑28 and ↓6+22
Comments16

Введение в машинное обучение с tensorflow

Reading time12 min
Views193K
Если мы в ближайшие пять лет построим машину с интеллектуальными возможностями одного человека, то ее преемник уже будет разумнее всего человечества вместе взятого. Через одно-два поколения они попросту перестанут обращать на нас внимание. Точно так же, как вы не обращаете внимания на муравьев у себя во дворе. Вы не уничтожаете их, но и не приручаете, они практически никак не влияют на вашу повседневную жизнь, но они там есть.
Сет Шостак

Введение.


Серия моих статей является расширенной версией того, что я хотел увидеть когда только решил познакомиться с нейронными сетями. Он рассчитан в первую очередь на программистов, желающих познакомится с tensorflow и нейронными сетями. Уж не знаю к счастью или к сожалению, но эта тема настолько обширна, что даже мало-мальски информативное описание требует большого объёма текста. Поэтому, я решил разделить повествование на 4 части:

  1. Введение, знакомство с tensorflow и базовыми алгоритмами (эта статья)
  2. Первые нейронные сети
  3. Свёрточные нейронные сети
  4. Рекуррентные нейронные сети

Изложенная ниже первая часть нацелена на то, чтобы объяснить азы работы с tensorflow и попутно рассказать, как машинное обучение работает впринципе, на примере tensorfolw. Во второй части мы наконец начнём проектировать и обучать нейронные сети, в т.ч. многослойные и обратим внимание на некоторые нюансы подготовки обучающих данных и выбора гиперпараметров. Поскольку свёрточные сети сейчас пользуются очень большой популярность, то третья часть выделена для подробного объяснения их работы. Ну, и в заключительной части планируется рассказ о рекуррентных моделях, на мой взгляд, — это самая сложная и интересная тема.
Читать дальше →
Total votes 54: ↑49 and ↓5+44
Comments9
1
23 ...

Information

Rating
Does not participate
Location
Новосибирск, Новосибирская обл., Россия
Works in
Date of birth
Registered
Activity