Узнайте, как использовать вебпак для сборки JavaScript, изображений, шрифтов и стилей, а также как запускать сервер для разработки

Если вы раньше использовали вебпак 4, вот некоторые отличия от 5 версии:

• команда «webpack-dev-server» теперь выглядит как «webpack-serve»
• отдельная установка file-loader, raw-loader и url-loader больше не требуется, вы можете использовать встроенные загрузчики ресурсов (asset modules)
• полифилы для Node.js больше не поддерживаются, поэтому если, например, вы получили ошибку для stream, необходимо добавить пакет «stream-browserify» в качестве зависимости и { stream: «stream-browserify» } в качестве алиаса в настройки вебпака

Что такое вебпак?

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

Вебпак — это сборщик модулей. Он служит для упаковки кода для использования браузером. Он позволяет использовать последние возможности JavaScript с помощью Babel или использовать TypeScript и компилировать его в кроссбраузерный минифицированный код. Он также позволяет импортировать статические ресурсы в JavaScript.

Для разработчиков вебпак также предоставляет сервер для разработки, который умеет обновлять модули и стили на лету при сохранении файла. Инструменты командной строки, такие как «vue create» и «react-create-app» используют вебпак за сценой, но вы легко можете создать собственную настройку вебпака для указанных фреймворков.

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

Надоело заморачиваться с доверенностями, банками, судами, госорганами и решили прописать в Устав второго директора. Плюс заодно избавиться от дурацкого большого устава давно было желание, чтобы не копировать толстый устав на тендеры и крупным заказчикам. Но коллеги говорили, что будет не солидно, возникнут вопросы при рассмотрении устава юристами контрагентов, которые должны оправдывать свою зарплату. И всё как-то не решались. Но год назад решились. Сделали одностраничный устав. Кстати, в поиске в Яндекс.Картинках не нахожу одностраничного устава в электронном виде. Наш первый значит будет. Год прошёл — полёт нормальный, проблем нет. Солидность не пострадала. Банк устав принял, второго директора признал. Хотя тупил страшно. Дальше о том, что должно быть в одностраничном Уставе, какие трудности были с регистрацией в налоговой и с банком. Мы всё хотели сделать принципиально в электронном виде и удалённо.

TL;DR это пост для вопросов/ответов про Data Science и о том, как войти в профессию и развиваться в ней. В статьей я разберу основные принципы и FAQ и готов отвечать на ваши конкретные вопросы — пишите в комментариях (или в личке), я постараюсь на все ответить в течение нескольких дней.

С появлением цикла заметок «дата сатаниста» пришло немало сообщений и комментариев с вопросами о том, как начать и куда копать и сегодня мы разберем основные скиллы и вопросы возникшие после публикаций.

Все указанное тут не претендует ни какую истину в последней инстанции и является субъективным мнением автора. Мы разберем основные вещи, которые кажутся самыми важными в процессе.

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

Итак, у нас есть экскурсии по Золотому кольцу России. Для пенсионеров это желанное приключение, для молодёжи — особый подвид предельно скучного и бессмысленного занятия. «20 храмов за 3 дня», «Самые нудные экскурсоводы, сыпящие датами», «Очереди в банальных местах вроде заселения в отель» — это из отзывов. Думаю, вы и сами можете себе всё это представить.


^{Вот так должно выглядеть заселение в отель: без людей и анкет, чёрт побери!}

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

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

Это моя первая статья на Хабре.

Глава 1. Введение

1.1 Позвольте представиться и почему я это пишу

Я — научный сотрудник, физик. Недавно выпустил книгу по спектроскопии объемом 880 страниц и весом 1560 грамм. Эту книгу я писал 9 лет, параллельно читая лекции по ее содержимому. Она отняла у меня очень много времени, что естественно. Что не естественно — это то, что громадная часть потраченного времени ушла на оформление, то есть на изучение языка Латех. И это при том, что я на Латехе пишу всю жизнь, лично написал и опубликовал около 50 статей в разных издательствах.

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

После публикации книги (пока, увы, только на русском языке) у меня возникло громадное желание написать ещё книгу "Как написать книгу по физике в Латехе"

Привет, Хабр! Меня зовут Александр, много лет я ставил системы видеонаблюдения на коммерческих объектах и не доверял облачным сервисам по модели VSaaS (video surveillance as a service). Я был уверен, что серьезные бизнесы не экономят на проектах и выбирают традиционную систему видеонаблюдения по модели on-premise. А вот VSaaS нужен, если приходится втискиваться в бюджет здесь и сейчас. 

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

Дисклеймер: все цены взял из проектов двухлетней давности. Если стоимость поменялась сильно, постарался обновить данные. 

Удалёнка в хорошей зарубежной компании — крутая штука. Сидя даже где-то далеко в провинции, можно зарабатывать большие деньги: от $3,000 в месяц на средненькой позиции в неизвестной компании до $186,000 в год на позиции senior programmer в Basecamp.

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

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

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

Механизм Source Maps используется для отображения исходных текстов программы на сгенерированные на их основе скрипты. Несмотря на то, что тема не нова и по ней уже написан ряд статей (например эта, эта и эта) некоторые аспекты все же нуждаются в прояснении. Представляемая статья представляет собой попытку упорядочить и систематизировать все, что известно по данной теме в краткой и доступной форме.

Доброго времени суток, друзья!

Представляю Вашему вниманию перевод небольшой заметки «How to Get the Screen, Window, and Web Page Sizes in JavaScript» автора Dmitri Pavlutin.

Для определения ориентации окна браузера (ландшафтной или портретной) можно сравнить его ширину и высоту.

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

Что означают эти размеры и, главное, как их получить? Именно об этом я и собираюсь рассказать.

Привет всем любителям IoT и железок!

В этой статье я расскажу про, пожалуй, самый популярный протокол передачи данных, используемый в сфере Интернета вещей, — MQTT. А если конкретнее, то про MQTT Version 5.0 (версия, опубликованная 7 марта 2019 года). А если еще конкретнее, — про приятные нововведения версии 5.0 по сравнению с версией 3.1.1.

Кстати, а почему v5.0? Куда делась версия v4.0?

Коренная причина лежит в заголовке пакета CONNECT. Версия протокола или, если быть более точным, уровень версии протокола устанавливается в байте 7.

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


Работа скрипта по поиску облигаций на Московской бирже

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

Сделал это на Node.js с выводом полученных результатов в локальный html файл с интерактивной таблицей от Google Charts (а в случае, если JavaScript отключен в браузере, что например происходит при открытии этого html файла из мессенджера на iPhone, то отображается статическая версия таблицы, также сгенерированная скриптом).

Я несколько раз начинал читать статьи из серии «Введение в функциональное программирование», «Введение в Теорию Категорий» и даже «Введение в Лямбда Исчисление». Причем и на русском, и на английском. Каждый раз впечатление было очень сходным: во-первых, много новых непонятных слов; во-вторых, много новых определений, которые возникают из ниоткуда; в-третьих, совершенно непонятно, как это использовать.

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

Попытки использовать как-то в работе изученные концепции разбивались о полное непонимание, как применить полученное глубокое знание. Ведь, напомню, что парадигму ФП (где-то удобнее, где-то не очень, но) можно использовать практически в любом ЯП, совсем необязательно для этого изучать условный Хаскель.

Многие любят Python… Новички восщищаются отсутствием точек с запятой, а продвинутые радуются действительной простотой. Сегодня речь и пойдет о том, как в JavaScript реализовать подобие той самой простоты Python, а конкретно функцию range.

В Python по функции range можно итерировать или, например, преобразовать в массив — list(range(begin, end)).

Но вопрос в том, можно ли мощностями JavaScript создать что-то подобное и при этом, чтобы решение выглядело нативным и простым?

Первое, что приходит в голову — написать подобный класс:

function range(from, to, step = 1){
    this.current = from
    this.to = to
    this.step = step

    this.next = () => (this.current += step) % to
}

Привет друзья. Вот вам простенькая задачка. Как бы вы перевели арабские числа в римские используя Python? Правда с одним условием — числа не могут быть больше чем 4000.

Я думаю это должно быть просто, но позвольте я вам покажу вам серию интересных решений и не тривиальных подходов:

Nginx — великолепный веб-сервер. Все мы привыкли использовать его в связке с бекендами на разных языках программирования. Но оказывается можно писать простые программы прямо внутри конфигурационного файла Nginx. Это можно использовать для балансировки, написания простых API и даже отдавать динамические страницы прямо из конфига.

В статье мы разберем примеры написания простых программ в конфиге nginx.

Tree of Dragons II by surrealistguitarist

Для тех, кто каждый день использует Git, но чувствует себя неуверенно, команда Mail.ru Cloud Solutions перевела статью фронтенд-разработчика Шейна Хадсона. Здесь вы найдете несколько трюков и советов, которые могут немного облегчить работу с Git, а также подборку статей и мануалов более продвинутого уровня.

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

Когда новичок во Flutter спрашивает, почему какой-то виджет с width: 100 не ширины 100 пикселей, обычно ему отвечают, что надо обернуть этот виджет в Center, верно?

Не надо так делать

Если так отвечать, то к вам будут возвращаться снова и снова, спрашивая, почему какой-то FittedBox не работает, почему этот Column переполнен или как работает IntrinsicWidth.

Сначала объясните, что Flutter компоновка очень отличается от HTML компоновки (особенно, если говорите с веб-разработчиком), а затем скажите, что необходимо запомнить следующее правило:

Ограничения для виджетов объявляются в родителях. Размеры (желаемые) задаются в самом виджете. Позиция виджета на экране устанавливается родителем

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

В этой статье описан личный опыт двух человек: меня и моей коллеги Марии. Опыт людей, у которых совершенно не было знаний в SEO. Во второй половине 2019 года на нас легла ноша в виде продвижения 2-х сайтов проекта Ratatype. Сайтов молодых (рождены в 2019) и на иностранный рынок, языков которого мы не знаем (Франция и Испания), да еще и с очень ограниченным бюджетом.

Что вы найдете в этой статье:

1. Реальный кейс, который работал, работает и будет работать.
2. Пошаговую инструкцию «Что? Зачем? Как?» на простом языке.
3. Описание провалов, куда ж без них.
4. Что-то интересное на рынке SEO, но это не точно.

Чего вы здесь не найдете:

1. Трендов 2020, 2021 или любого другого года.
2. Мнений экспертов.
3. Предложения услуг продвижения.

Если все устраивает — прошу, следуйте ниже по тексту.

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

• Некий элемент совершенно невидим и, более того, удалён из потока документа.
• Глазами элемент не увидеть, но он присутствует в документе и доступен для ассистивных технологий наподобие средств для чтения с экрана.
• Элемент видим, но скрыт от средств для чтения с экрана.

Статья, перевод которой мы сегодня публикуем, посвящена разбору методов скрытия элементов веб-страниц с использованием HTML и CSS. Здесь будут рассмотрены такие вопросы, как доступность контента, анимация, сценарии использования технологий скрытия данных на страницах.