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

«Летом между 2 и 3 курсом я пошла искать работу — а в Новосибе того времени почти все вакансии для ребят без опыта были про PHP. Начинала с очень простых вещей — WordPress, Drupal… Потом писала бэкенды на Yii и много еще разного. Go впервые попробовала в 2014-м, вдохновившись докладом, и затем часто находила работу, связанную с разработкой на нем, через сообщество.

Считается, что Go гораздо проще поддерживать, чем PHP. Я не согласна. Видела очень много чистого, легко читаемого и поддерживаемого кода на PHP, а сейчас время от времени встречаю много плохо написанного кода на Go. Проблемы начинаются тогда, когда мы не следуем лучшим практикам языков и систем, которые разрабатываем… Или когда выбираем для своих задач не тот инструмент», — Елена Граховац, руководитель ПК GolangConf 2019 и соведущая подкаста GolangShow.


В эту субботу днем обсудим типичные ошибки выбора в стриме с Леной, Сашей Макаровым и другими замечательными людьми. Подключайтесь.

Если вы — программист, то я полагаю, что вы, наверняка, знаете о существовании чрезвычайно компактной и нетребовательной к ресурсам СУБД SQLite, или даже пользовались ей. Эта система обладает практически всеми возможностями, которых можно ожидать от реляционной СУБД, но при этом всё хранится в единственном файле. Вот некоторые сценарии использования SQLite, упомянутые на официальном сайте этой системы:

• Встраиваемые устройства и IoT.
• Анализ данных.
• Перенос данных из одной системы в другую.
• Архивирование данных и (или) упаковка данных в контейнеры.
• Хранение данных во внешней или временной БД.
• Заменитель корпоративной БД, используемый в демонстрационных или испытательных целях.
• Обучение, освоение начинающими практических приёмов работы с БД.
• Прототипирование и исследование экспериментальных расширений языка SQL.

В документации к SQLite можно найти и другие причины использования этой СУБД.



Данный материал посвящён использованию SQLite в Python-разработке. Поэтому для нас особенно важно то, что эта СУБД, представленная модулем sqlite3, входит в стандартную библиотеку языка. То есть оказывается, что для работы с SQLite из Python-кода не нужно устанавливать некое клиент-серверное ПО, не нужно поддерживать работу какого-то сервиса, отвечающего за работу с СУБД. Достаточно лишь импортировать модуль sqlite3 и приступить к его использованию в программе, получив в своё распоряжение систему управления реляционными базами данных.

Мы часто читаем о бэст практикс в программировании, о новых функциях фреймворков или о том, что нового в очередной версии PHP. Читаем, как поменять «то на это», почему какая-то техника хороша или плоха, или какой новый пакет вы можете использовать в своём проекте. Но всё это — рассуждения только о прошлом или настоящем.

Сейчас я заканчиваю чтение книги «The Inevitable», написанной основателем журнала Wired, речь в которой исключительно про будущее. Вдохновившись этой книгой, предлагаю посмотреть на будущее программирования.

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

Подборка новых статей по фреймворку Laravel. Новая версия с исправлением двух уязвимостей. Книга по оптимизации приложений. Рилтайм чат на сокетах. Соблюдение SRP в Laravel.

Замыкания вызывают у программистов сложности из-за того, что это — «невидимая» конструкция.

Когда вы используете объект, переменную или функцию, вы делаете это намеренно. Вы думаете: «Тут мне понадобится переменная» — и добавляете её в свой код.



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

Если в двух словах, то замыкание — это когда функция обращается к переменным, объявленным за её пределами. Например, замыкание содержится в этом фрагменте кода:

let users = ['Alice', 'Dan', 'Jessica'];
let query = 'A';
let user = users.filter(user => user.startsWith(query));

Обратите внимание на то, что user => user.startsWith(query) — это функция. Она использует переменную query. А эта переменная объявлена за пределами функции. Это и есть замыкание.

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

В последнее время часто сравнивают CSS и JavaScript, споря о применении этих технологий для решения определённых задач. Споры становятся жарче по мере появления новых замечательных возможностей CSS, которые позволяют упростить решение множества задач и отказаться при этом от JS.

«Хочешь жить — умей вертеться». Это — про работу фронтенд-программиста. Для того чтобы успешно справляться со своими обязанностями, такому специалисту приходится решать массу задач и необходимо обладать множеством способностей. Очень важно, кроме того, не забывать о главной цели, ради которой разрабатывают сайты. А именно, о том, что сайты должны помогать людям упрощать решение их повседневных задач.

В этом материале я собираюсь рассказать о различных аспектах веб-разработки, о которых стоит знать любому программисту соответствующего профиля. Я, если это возможно, буду приводить ссылки на материалы, демонстрирующие примеры применения соответствующих возможностей и рекомендации по их правильному использованию. Здесь я буду ориентироваться на реализацию тех или иных механизмов в Angular, React и Vue.

Здравствуйте, меня зовут Дмитрий Карловский и я… тот ещё токсичный перец. Недавно я источал свои альфа-флюиды на Альфа-банк. Ребята в ответ поступили достойно, и не стали атаковать меня в личку объяснениями, как сильно я не прав, а завели задачу на гитхабе. И даже что-то пофиксили, сделав часть моих претензий несостоятельными. Но не ту часть, где SSR портит всё.

Время утекло, пыль улеглась, и тут история получает продолжение: недавно ко мне обратился продюсер контент-студии Хабра с предложением пропесочить их Торт. Что ж, расчехляем вентилятор!

Прошли те дни, когда не надо было беспокоиться об оптимизации производительности баз данных. Время не стоит на месте. Каждый новый бизнесмен из сферы высоких технологий хочет создать очередной Facebook, стремясь при этом собирать все данные, до которых может дотянуться. Эти данные нужны бизнесу для более качественного обучения моделей, которые помогают зарабатывать. В таких условиях программистам необходимо создавать такие API, которые позволяют быстро и надёжно работать с огромными объёмами информации.

В этой статье я расскажу о конкурентном режиме в React. Разберёмся, что это: какие есть особенности, какие новые инструменты появились и как с их помощью оптимизировать работу веб-приложений, чтобы у пользователей всё летало. Конкурентный режим — новая фишка в React. Его задача — адаптировать приложение к разным устройствам и скорости сети. Пока что Concurrent Mode — эксперимент, который может быть изменён разработчиками библиотеки, а значит, новых инструментов нет в стейбле. Я вас предупредил, а теперь — поехали.

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



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

Приветствую. Представляю вашему вниманию перевод статьи «My Favorite JavaScript Tips and Tricks», опубликованной 28 июля 2020 года автором Tapas Adhikary

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

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

Введение

Когда я пытался продвигать свой последний проект (веб-чат), я столкнулся с тем, что о нем фактически негде написать. Ситуация касается не только wiki-проектов, а вообще всего рунета. Крупные сайты ведут такую политику, что Вы не можете написать о своем проекте — Вы должны либо купить рекламу, либо о Вас должен написать кто-то еще. Если рассматривать конкретно wiki-сайты, то даже на Лурк или Викиреальность попасть проблематично, не говоря уже о таком гиганте как Википедия. Хотя потом я нашел пару небольших wiki-порталов без цензуры, для которых написал два уникальных обзора на свой чат. Они меня и вдохновили на создание свободного wiki-ресурса для IT-разработок.

Зачем писать свой wiki-движок когда есть готовые?

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

Подробнее о wikiclick.ru

В повседневной продуктовой разработке, запертой в корпоративных технологических ограничениях, редко выпадает случай шагнуть за грань добра и зла в самое пекло хипстерских технологий. Но, когда ты сам несешь все риски и каждый день разработки вынимает деньги из твоего собственного кармана очень хочется срезать путь. В один из таких моментов я решил шагнуть в такой темный серверлес, о котором раньше думать было как-то стыдно. Под впечатлением от того, что получилось, я даже хотел написать статью «Конец гегемонии программистов», но спустя полгода эксплуатации и развития проекта понял, что ну не совсем еще конец и остались еще места в этом самом serverless-бэкенде, где надо использовать знания и опыт.

Сегодня, в 10 уроке курса по Vue, мы поговорим о том, как работать с формами. Формы позволяют собирать данные, вводимые пользователем. Кроме того, здесь мы обсудим валидацию форм, то есть — проверку того, что в них вводят.

Здравствуйте. Меня зовут Ник, я фронтенд разработчик (жидкие аплодисменты). Кроме того, что я пишу код, я преподаю в Школе программистов hh.ru.

Записи наших лекций от 2018-2019 учебного года можно посмотреть на youtube

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

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

Лонгридом можно пользоваться как справочником, чтобы не читать за один присест. Вот список тем, которые мы затронем:

1. Зачем думать о производительности
2. FMP, TTI + подробнее в докладе
3. Critical render path, DOM, CSSOM, RenderTree
4. Шаги по улучшению производительности первой загрузки + подробнее в докладе

Что такое Grid?

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

Поддержка браузерами

В 2020 году поддержка браузерами достигает 94 %

Grid контейнер

Мы создаем grid контейнер, объявляя display: grid или display: inline-grid на элементе. Как только мы это сделаем, все прямые дети этого элемента станут элементами сетки.

<body>
 <div class="row">
  <div class="row__item header">
   <h1>Header</h1>
  </div>
  <div class="row__item nav">
   <h1>Navbar</h1>
  </div>
  <div class="row__item article">
   <h1>Article</h1>
  </div>
  <div class="row__item ads">
   <h1>Ads</h1>
  </div>
 </div>
</body>

.row {
 display: grid;
 margin: auto;
 grid-template-rows: 60px 1fr ;
 grid-template-columns: 20% 1fr 15%;
 grid-gap: 10px;
 width: 1000px;
 height: 1000px;
 justify-items: center;
 justify-content: space-between;
 grid-template-areas:
 "header header header"
 "nav article ads"; 
}

grid-template-rows — это CSS свойство, которое определяет названия линий и путь размера функции grid rows.

CSS свойство grid-row определяет с какой строки в макете сетки будет начинаться элемент, сколько строк будет занимать элемент, или на какой строке завершится элемент в макете сетки. Является сокращенным свойством для свойств grid-row-start и grid-row-end.

Свойство CSS grid-gap является сокращенным свойством для grid-row-gap и grid-column-gap, определяющего желоба между строками и столбцами сетки.

Свойство grid-template-areas определяет шаблон сетки ссылаясь на имена областей, которые заданы с помощью свойства grid-area.

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

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

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

Мы решили поэкспериментировать с форматом наших «пижамных разговоров» и сделать живой утренний выпуск. У нас в гостях Lucas F. Costa, бразильский software engineer, живущий сейчас в Лондоне.

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

Стандартная капча — бесполезная, ботами она проходится «на раз», а пользователям создает проблемы.

Оптимальное решение это использовать Google reCAPTCHA v2 или v3. Обе версии Google reCAPTCHA — отличный вариант. Это лучшее, что сейчас доступно на рынке из понятных и надежных решений к тому же бесплатных.

Основная проблема у обеих версий — при подключении значительно снижаются баллы по PageSpeed Insight на 20-30.

На предыдущем уроке нашего курса по Vue вы узнали о том, как создавать компоненты, и о том, как передавать данные от родительских сущностей дочерним с использованием механизма входных параметров (props). А что если данные нужно передавать в обратном направлении? Сегодня, в девятом уроке, вы узнаете о том, как наладить двустороннюю связь между компонентами разного уровня.