Pull to refresh
28
Karma
0
Rating
Дмитрий Казаков @DmitryKazakov8

Front-end архитектор

  • Followers 18
  • Following
  • Posts
  • Comments

Рендеринг в веб

Website development *
Translation

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

Читать далее
Total votes 5: ↑5 and ↓0 +5
Views 7.6K
Comments 3

Современный стартовый HTML-шаблон

Website development *CSS *JavaScript *Programming *HTML *


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

Позвольте представить вам мой новый проект — современный стартовый HTML-шаблон.

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

  • Все meta и link-теги (общие, Microsoft, Facebook, Twitter, IOS, Android, структурированные данные — Schema.org и JSON-LD, а также парочка тегов, связанных с безопасностью)
  • Пример использования HTML5-тегов
  • Пример использования CSS3-свойств
  • Пример использования CSS-модулей
  • Пример использования JavaScript-модулей
  • Файл «manifest.json»
  • Сервис-воркер общего назначения (сначала кэш, затем сеть)
  • Файл «robots.txt»
  • Файл «sitemap.xml»
  • Файл «browserconfig.xml»
  • Файл ".gitignore"
  • Пример Express.js-сервера, устанавливающего заголовки, связанные с безопасностью и сжатием, и возвращающего файлы по запросу
  • Пример креативной страницы ошибки 404 (страница не найдена, креатив не мой)
  • и многое другое

Официальный сайт: moderntemplate.site.

Код проекта находится здесь.
Читать дальше →
Total votes 12: ↑12 and ↓0 +12
Views 19K
Comments 20

Производительность TypeScript

VK corporate blog High performance *JavaScript *Programming *TypeScript *
Translation
Tutorial

Есть лёгкие способы конфигурирования TypeScript для ускорения компиляции и редактирования. И чем раньше их внедрить, тем лучше. Также есть ещё некоторые популярные подходы к изучению причин медленной компиляции и редактирования, некоторые исправления и распространенные способы помочь TypeScript-команде в расследовании проблем.
Читать дальше →
Total votes 37: ↑37 and ↓0 +37
Views 12K
Comments 4

Concurrent Mode в React: адаптируем веб-приложения под устройства и скорость интернета

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

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



Конкурентный режим решает перечисленные проблемы. С ним React может приостанавливать, приоритизировать и даже отменять операции, которые раньше были блокирующими, поэтому в конкурентном режиме можно начинать отрисовывать компоненты независимо от того, были ли получены все данные или только часть.
Читать дальше →
Total votes 27: ↑26 and ↓1 +25
Views 9.9K
Comments 3

Профессиональное применение инструментов разработчика Chrome: 13 советов

RUVDS.com corporate blog Website development *JavaScript *Google Chrome Browsers
Translation
Автор статьи, перевод которой мы сегодня публикуем, хочет поделиться советами по профессиональной работе с инструментами разработчика браузера. А именно, эти советы рассчитаны на программистов, которые по какой-то причине решили, что их основным браузером будет Google Chrome.


Читать дальше →
Total votes 58: ↑57 and ↓1 +56
Views 23K
Comments 12

Регрессионная спираль смерти

OTUS corporate blog JavaScript *Web services testing *
Translation

Перевод статьи подготовлен в преддверии старта курса «Автоматизация тестирования на JavaScript»





История, которая может показаться вам до боли знакомой:


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

Читать дальше →
Total votes 13: ↑11 and ↓2 +9
Views 4.5K
Comments 3

Что происходит, когда JS-модуль импортируют дважды?

RUVDS.com corporate blog Website development *JavaScript *
Translation
Начнём этот материал с вопроса. ES2015-модуль increment содержит следующий код:

// increment.js
let counter = 0;
counter++;

export default counter;

В другом модуле, который мы назовём consumer, вышеприведённый модуль импортируется 2 раза:

// consumer.js
import counter1 from './increment';
import counter2 from './increment';

counter1; // => ???
counter2; // => ???

А теперь, собственно, вопрос. Что попадёт в переменные counter1 и counter2 после выполнения модуля consumer?



Для того чтобы ответить на этот вопрос, нужно понимать то, как JavaScript выполняет модули, и то, как они импортируются.
Читать дальше →
Total votes 57: ↑55 and ↓2 +53
Views 13K
Comments 13

Экосистема Low-Code решений

CMS *Website development *JavaScript *Programming *Interfaces *
Translation
image

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

Я бы хотел рассмотреть, что это за инструменты, как именно они помогают, и какие выглядят наиболее многообещающе.
Читать дальше →
Total votes 4: ↑4 and ↓0 +4
Views 11K
Comments 0

Формы должны быть простыми и декларативными

JavaScript *ReactJS *TypeScript *
Sandbox


Многие вставали перед выбором той или иной библиотеки для работы с формами в ReactJS. Когда я выбирал подходящую мне, разные библиотеки казались идеальными НО: форма на конфигах или колбеки в onSubmit эвенте, или асинхронный submit. Почему формы для реакта не соответствуют принципам реакта, почему они выглядят как что-то особенное? Если эти вопросы приходили вам в голову, или вы любите формы, приглашаю к прочтению статьи.
Читать дальше →
Total votes 14: ↑12 and ↓2 +10
Views 8.8K
Comments 15

Работа с формами в React.js, используя базовый инструментарий

JavaScript *ReactJS *
Sandbox

Введение


За время работы на React.js мне часто приходилось сталкиваться с обработкой форм. Через мои руки прошли Redux-Form, React-Redux-Form, но ни одна из библиотек не удовлетворила меня в полной мере. Мне не нравилось, что состояние формы хранится в reducer, а каждое событие проходит через action creator. Также, согласно мнению Дана Абрамова, «состояние формы по своей сути является эфемерным и локальным, поэтому отслеживать его в Redux (или любой библиотеке Flux) не нужно».


Замечу, что в React-Redux-Form есть компонент LocalForm, который позволяет работать без redux, но на мой взгляд, пропадает смысл устанавливать библиотеку размером 21,9kB и использовать её менее чем на половину.


Я не против названных библиотек, в конкретных случаях они незаменимы. Например, когда от введённых данных зависит сторонний компонент, не связанный с формой. Но в своей статье я хочу рассмотреть формы, которые не нуждаются в redux.


Я начал использовать локальный state компонента, при этом возникли новые трудности: увеличилось количество кода, компоненты потеряли читаемость, появилось много дублирования.

Читать дальше →
Total votes 10: ↑8 and ↓2 +6
Views 31K
Comments 12

mgr-forms-react: Простой компонент для простейших форм

ReactJS *

Вы когда нибудь считали, сколько форм вы делаете во время разработки веб-приложения? И я не говорю о сложных формах вроде кастомного date-picker'а или же чего-то сложнее, а простых форм с тремя input, двумя select и одним textarea?


Я не считал. Но когда я начал писать очередное приложение на React и мне за один вечер пришлось создать 5 разных форм — мне поплохело. Ну, а когда разработчику плохеет — разработчик пишет велосипед!


Из таких вот соображений на свет появилась пока еще сырая, но уже используемая мной в двух разных проектах, библиотека для создания простейших форм на React. И я даже выделю слово простейших, потому как моя поделка даже близко не стоит рядом с такими проектами как React Forms или же Formsy-React.


Вместо картинки для привлечения внимания — количество однотипного кода, который нам всем приходится писать ради создания простейшей формы с одним полем.

Читать дальше →
Total votes 13: ↑12 and ↓1 +11
Views 5.1K
Comments 6

Валидация форм в React

ReactJS *
Sandbox
Если вы когда-нибудь пользовались фреймворком AngularJS, то вы знаете, как легко в нем валидируются формы. Однако в React ситуация несколько хуже. Оно и понятно, ведь это всего лишь библиотека. Но благодаря сообществу из этой библиотеки можно сделать мощное средство для создания полноценных SPA-приложений. На данный момент создано огромное множество компонентов, которые способны удовлетворить большинство нужд разработчиков на React. В данной статье я бы хотел описать подход, который использовал для валидации форм с помощью компонента Formsy-react.
Читать дальше →
Total votes 21: ↑19 and ↓2 +17
Views 33K
Comments 17

5 полезных плагинов для webpack

Constanta corporate blog Website development *JavaScript *Programming *Build automation *
Привет, Хабр!

У webpack'а есть много полезных плагинов, о которых многие не знают и не используют в своих проектах. Под катом я собрал 5 таких, они могут здорово упростить вам жизнь!


Читать дальше →
Total votes 31: ↑31 and ↓0 +31
Views 17K
Comments 5

Повышаем продуктивность на GitHub: советы для новичков и не только

Skillbox corporate blog Programming *Git *GitHub Studying in IT


От переводчика: публикуем для вас статью Даррена Барнса, который делится своим опытом работы с GitHub. Его советы будут полезны, в первую очередь, новичкам. Возможно, и опытный кодер найдет что-то для себя.

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

Сервис разрабатывался программистами для программистов. Его создатели добавили большое количество очень удобных инструментов, которые повышают производительность. Но, к сожалению, не все разработчики об этих инструментах знают. А кто знает — не всегда использует.
Читать дальше →
Total votes 66: ↑62 and ↓4 +58
Views 24K
Comments 5

Один в поле не воин. Путь до эффективной командной работы

Конференции Олега Бунина (Онтико) corporate blog Development Management *Agile *Product Management *Personnel Management *
Команда — это группа людей, которые вместе двигаются к общей цели, распределяют между собой задачи и ответственность за конкретный результат. Команды создаются, чтобы решать задачи, которые один человек выполнить не сможет. Эффективная команда достигает цели за минимальный срок с минимальными затратами.

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



Как раз об этом расшифровка доклада Евгения Федореева на TeamLead Conf. В докладе Евгений поэтапно описал процесс организации эффективной команды разработки в Banki.ru: про найм, общение, обмен знаниями и развитие разработчиков и тестировщиков внутри коллектива и отдела.


О спикере: Евгений Федореев (hardj) занимается веб-разработкой 15 лет, их них 6 — в позиции тимлида, а сейчас руководит направлением разработки новых проектов Banki.ru.
Total votes 32: ↑31 and ↓1 +30
Views 16K
Comments 6

Качество кода

Конференции Олега Бунина (Онтико) corporate blog Website development *JavaScript *Programming *Perfect code *
Качество кода — тема, которая родилась вместе с программированием. Для оценки и контроля качества менеджмента предприятий применяется ISO 9000, для продуктов — ГОСТ и тот же ISO, а вот для оценки качества кода ГОСТа нет. Точного определения и стандарта для качества кода тоже нет.



Каждый разработчик понимает качество по-своему, исходя из опыта. Представления джунов и лидов различаются, и это приводит к разногласиям. Каждая команда для отдельных проектов оценивает код по-своему. Команда обновляется, разработчики уходят, тимлиды сменяются — определение качества меняется. Эту проблему попробует помочь решить Иван Ботанов (StressoID) из Tinkoff.ru — Frontend-developer, преподаватель онлайн-курса по Angular, спикер на митапах и конференциях, ведущий уроков на YouTube и, иногда, тренер команд в компаниях.

В расшифровке доклада Ивана на Frontend Conf поговорим о читаемости, нейминге, декларативности, Code style, и косвенно коснемся отношений джунов и лидов: ошибки, грабли и «сгорание» тимлидов.

Disclaimer: Подготовьтесь морально, в тексте будет много плохого кода, взятого с «особенного» сайта.

Total votes 54: ↑48 and ↓6 +42
Views 29K
Comments 40

Information

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