Веб-разработка *

Итак, вы решили быть последовательными и начать разработку сайта с самого важного и фундаментального этапа — со структуры (visual sitemap) и контента. Ок, значит, вы попали в правильное место, где мы собрали для вас инструкции и эффективные советы как это лучше всего сделать и с чего начать. Да пребудет с вами сила, так как такой фундаментальный гид за один присед вряд ли удастся осилить.



Пример структуры веб-сайта (Блоки кликабельны)

Какие разделы включить? Что по поводу контента? Мы серьезно все продумали, потратили более месяца на исследования и собрали в этом гиде весь наш 18-летний опыт по созданию сайтов. Дочитав эту статью, вы обретете исчерпывающее представление о том, почему именно так должен быть структурирован сайт компании или продукта, мы также немного коснемся фундаментальных принципов SEO и планирования контента.

Перевод статьи подготовлен в преддверии старта курса «Web-разработчик на Python».

---

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

Примечание: Если вы думаете «Почему бы просто не использовать переменные среды?», которые используются для секретов в рантайме при создании образа. Эта статья посвящена секретам сборки, которые используются при создании образа с помощью Docker-файла.

Более новые версии Docker поддерживают секреты с помощью экспериментального сервиса BuildKit, а в Docker Compose 1.25 и более поздних версиях уже можно создавать образы с помощью BuildKit. К сожалению, по состоянию на март 2020 года, возможность безопасной работы с секретами из Compose все еще находится в процессе разработки.

Обсуждение каждого доклада на каждой нашей конференции начинается с простого вопроса: «Какую пользу получат слушатели от этого выступления?» Чему научатся, где сэкономят время, где деньги, что на следующий день они сделают по другому?

Какую же задачу решают доклады и мастер-классы профессионального фестиваля Российские интернет-технологии? Отвечу вам вопросом на вопрос — а чем отличается специалист мидл-уровня от сеньора?

Несколько лет назад, для закрытия одного их предметов мне довелось перевести данный букварь. Де-факто этот вариант стал официальным переводом. Но развитию этого перевода мешает, тот факт, что он был написан в Google Drive и закрыт на редактирования. Сегодня я уделил время на переформатирования всего этого текста в MD формат с помощью редактора Хабра, с радостью публикую здесь и вскоре отдам текущим контрибьюторам.

Словарь

Node — нода — узел с каким либо ресурсом
Content — контент — данныe
Traffic — трафик — запрос/ответ, данные которые передаются от сервера клиенту и наоборот
Hardware — железо — аппаратная часть
Instance — инстанс — созданный объект какой либо сущности. Например инстанс сервера API
Headers — хедеры — заголовки (как правило TCP пакета, но может быть и HTTP запроса)

---

Недавно на Hacker News опубликовали манифест программистов из Тель-Авива. Они предложили сделать UTF-8 решением по умолчанию для хранения текстовых строк в памяти и коммуникации.

Материал породил активную дискуссию, и мы решили разобраться в ситуации, рассмотреть аргументы ИТ-экспертов — в том числе инженеров IBM и специалистов консорциума W3C.

Недавно мне надо было решить задачу по смене старого механизма для вывода всплывающих подсказок, реализованного средствами нашей библиотеки компонентов, на новый. Я, как всегда, решил не заниматься изобретением велосипеда. Для того чтобы приступить к решению этой задачи, я занялся поисками опенсорсной библиотеки, написанной на чистом JavaScript, которую можно было бы поместить в директиву Angular и в таком виде использовать.



В моём случае, так как я много работаю с popper.js, я нашёл библиотеку tippy.js, написанную тем же разработчиком. Для меня такая библиотека выглядела как идеальное решение задачи. Библиотека tippy.js обладает обширным набором возможностей. С её помощью можно создавать и всплывающие подсказки (элементы tooltip), и многие другие элементы. Эти элементы можно настраивать с помощью тем, они быстры, строго типизированы, обеспечивают доступность контента и отличаются многими другими полезными возможностями.

Адаптивный или отзывчивый шрифт — это мечта любого веб-разработчика. Я пересмотрел множество вариантов реализации, посидел вечерок и вывел для себя надежный работающий вариант. Им и хочу с тобой поделиться. Бонус SCSS миксин!

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

Многие разработчики полюбили лаконичный синтаксис и мощь директив Vue.js настолько, что даже пытаются использовать этот фреймворк не только в одностраничных приложениях. Сложно отказаться от использования реактивности, только потому, что вдруг понадобилось написать небольшой проект. Не возвращаться же к старому доброму jQuery или к чистому JS?!

Надо сказать, что во Vue.js (да и во многих других фреймворках) предусмотрен такой вариант его использования. Но все же он кажется слишком громоздким для такой простой работы, а функционал избыточным. И тут на помощь приходит Alpine.js.

Отметим некоторые особенности данного фреймворка:

1. Он весит очень мало! 7.2kB в сжатом виде.
2. Знакомый и простой синтаксис основанный на директивах.
3. Не использует виртуальный DOM
4. Подключения возможно как через CDN (по задумке авторов должно быть основным использованием), так и через npm.

Во времена повсеместной одержимости библиотеками и веб-фреймворками мы стали забывать радость от решения задач минимальными средствами. В этой статье, мы запилим веб-сервис на актуальную тему, используя ванильные Python и JavaScript, а также, задеплоим его в GitLab Pages. Быстро, минималистично, без лишних зависимостей, и максимально элегантно.

Вдохновившись видосом How To Tell If We're Beating COVID-19 от minutephysics, я набросал в свободное (от удаленной работы и домашних дел) время сервис, который на основе данных с Карты распространения коронавируса в России и мире от Яндекса строит графики, аналогичные тем, что на странице Covid Trends. Вот, что из этого вышло:

Интересно? Погнали!

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

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

Данная статья представляет собой небольшую подборку примеров работы с Canvas API, к которой удобно обращаться при необходимости вспомнить изученный материал.

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

Для меня это также своего рода промежуточный итог в изучении холста.

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

Парочка важных моментов.

Ширину и высоту холста лучше определять с помощью атрибутов:

<canvas width="300" height="300"></canvas>

Если мы хотим, чтобы холстом была вся область просмотра, то делаем следующее:

const width = canvas.width = innerWidth
const height = canvas.height = innerHeight

Холст и двумерный контекст рисования я обычно определяю следующим образом:

const canvas = document.querySelector('canvas')
// не путать с объектом jQuery
const $ = canvas.getContext('2d')

Довольно слов.

Библиотека pandas — это один из лучших инструментов для разведочного анализа данных. Но это не означает, что pandas — это универсальное средство, подходящее для решения любых задач. В частности, речь идёт об обработке больших объемов данных. Мне довелось провести очень и очень много времени, ожидая, пока pandas прочтёт множество файлов, или обработает их, вычислив на основе находящихся в них сведений какие-то интересующие меня показатели. Дело в том, что pandas не поддерживает механизмы параллельной обработки данных. В результате этому пакету не удаётся на полную мощность воспользоваться возможностями современных многоядерных процессоров. Большие наборы данных в pandas обрабатываются медленно.



Недавно я задался целью найти что-то такое, что позволит помочь мне в деле обработки больших данных. Мне удалось найти то, что я искал, я встроил найденный инструмент в свой конвейер обработки данных. Я использую его для работы с большими объёмами данных. Например — для чтения файлов, содержащих 10 гигабайт данных, для их фильтрации и агрегирования. Когда я справляюсь с решением подобных задач, я сохраняю то, что у меня получилось, в CSV-файле меньшего размера, который подходит для pandas, после чего приступаю к работе с полученными данными с помощью pandas.

Вот блокнот Jupyter, содержащий примеры к этому материалу, с которыми можно поэкспериментировать.

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

Представляю вашему вниманию перевод статьи «Understanding (all) JavaScript module formats and tools» автора Dixin.

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

• IIFE модуль: шаблон JS модуля
• Открытый модуль: шаблон открытого JS модуля
• CJS модуль: CommonJS модуль или Node.js модуль
• AMD модуль: асинхронное определение модуля или RequireJS модуль
• UMD модуль: универсальное определение модуля или UmdJS модуль
• ES модуль: ECMAScript2015 или ES6 модуль
• ES динамический модуль: ECMAScript2020 или ES11 динамический модуль
• Системный модуль: SystemJS модуль
• Webpack модуль: транспиляция и сборка CJS, AMD и ES модулей
• Babel модуль: транспиляция ES модуля
• TypeScript модуль: транспиляция CJS, AMD, ES и SystemJS модулей

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

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



Поэтому Skyeng нашли пару ребят, которые уже синхронно переводили на русский ИТ-конференции (один даже начинал как разработчик), а команда Онтико быстро придумала технически рабочий вариант с двумя языковыми потоками на выбор в онлайн-трансляции. Осталось не облажаться)

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

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

Быть хорошим программистом — это не значит помнить все встроенные функции некоего языка. Но это не означает и того, что их запоминание — бесполезное дело. Особенно — если речь идёт о подготовке к собеседованию.

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

Однажды, в одной продуктовой команде захотели разработать мобильное приложение, чтобы проверить гипотезу востребованности продукта и его удобства для пользователей. И то, что в команде не было мобильных разработчиков, не помешало. Два фронтенд-разработчика взяли React Native и за три месяца написали приложение. Тестирование гипотезы прошло успешно, приложение продолжает развивается и вызывает интерес других команд в компании.


Изображение из описания инструмента: www.semrush.com/news/position-tracking-on-the-go.

Это краткое описание истории команды Артёма Лашевского, который на три месяца из фронтенд-разработчика стал мобильным. Подробнее, как это произошло, читайте в расшифровке доклада Артёма на FrontendConf 2019: что такое React Native, почему именно он, пошаговая инструкция создания приложения и выбор нужных библиотек и компонентов.

Привет, Хабр!

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

• DOM — это стейт. Поскольку у нас нет фреймворка, сразу забываем про функциональщину, и возвращаемся к императивному ООП. Веб-компоненты — это долгоживущие узлы DOM, инкапсулирующие свой стейт и имеющие публичное API. Они не пересоздаются, а изменяются. Значит DOM мы должны рассматривать не только как представление, но как хранилище бизнес-объектов, а значит и строить иерерхию компонентов нужно с учетом удобства их взаимодействия.
• Взаимодействие компонентов. Компоненты могут взаимодействовать посредством прямых вызовов, обмена колбэками, или посредством восходящих / нисходящих пользовательских событий DOM. Последний способ наиболее предпочтителен, так как снижает взаимную зацепленность (coupling), и упорядочивает граф связей (см. пример ниже).

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

Представляю вашему вниманию перевод статьи «Storage for the Web» автора Pete LePage.

Существует несколько технологий для хранения данных в браузере. Какая из них лучше?

Интернет-соединение может быть плохим или вовсе отсутствовать в определенных местах. Поэтому поддержка оффлайн-режима является одной из ключевых особенностей прогрессивных веб-приложений. Даже при наличии высокоскоростного подключения разумно применять кэширование и другие техники для улучшения пользовательского опыта. Существует несколько способов сохранения файлов (HTML, JavaScript, CSS, изображения и т.д.) и данных (пользовательские данные, новостные статьи и др.). Но какое решение лучше выбрать? И как обеспечить его долговечность?