front-end - Jem Space

Tagged

front-end

A collection of 38 posts

Popit для бедных или жонглируем событиями

Popit для бедных или жонглируем событиями

Hello friend! Не так давно стала популярной новая релакс игрушка и я решил попробовать запилить ее аналог для веба. Хотелось бы, чтобы она была более менее реалистичной внешне и по фичам тоже не отставала. В этой статье я немного расскажу о том, как я работал с событиями,о некоторых ограничениях

Пишем сайт/PWA и выкатываем в прод с Github Actions

Пишем сайт/PWA и выкатываем в прод с Github Actions

Привет! Хочу сохранить для себя некоторые аспекты разработки простенького одностраничного web приложения с функционалом PWA, а также нюансы его деплоя. Опишу некоторые проблемы с которыми я столкнулся, и их решения. Речь пойдет о сервисе nosins.ru. Сервис позволяет получить индульгенцию - сертификат об отпущении грехов (не имеет юридической силы, если

Типографика для web

Типографика для web

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

Что каждый разработчик должен знать о https

Что каждый разработчик должен знать о https

Дабы не забыть то, что прошел на pluralsight, зафиксирую основные моменты в статье (сразу извиняюсь за орфографию, пишу наскоро). HyperText Transfer Protocol Secure — расширение протокола HTTP для поддержки шифрования в целях повышения безопасности. Данные в протоколе HTTPS передаются поверх криптографических протоколов TLS или устаревшего в 2015 году SSL. В отличие

Продвинутые Git команды из курса (часть 2)

Продвинутые Git команды из курса (часть 2)

Поиск по истории Доступность комитов Dot Dot notation показывает комиты которые доступны из одой ветки, но не доступны из другой git log feature..master Dot Dot Dot notation показывает комиты которые доступны для каждой из веток, но не для обоих сразу (зачем это может быть нужно узнаете позже) git log

Кодер.
Стандартный CSS3

Кодер. Стандартный CSS3

Что вообще за CSS3? Чем он отличается от CSS2. То, чем мы давно привыкли пользоваться для стилизации приложений было не всегда. Что нового принёсла 3 версия CSS? Пробежимся по фичам. Отметим, что стандарт CSS3 предполагает разделение СSS на модули. Новые фичи - это отдельные модули. Селекторы Селекторы аттрибутов: element[foo^

Кодер. Владеет современной версткой и наиболее распространенными API

Кодер. Владеет современной версткой и наиболее распространенными API

Верстка Что можно понимать под современной версткой? В 2к19 я бы отнес flexbox и grid. Большинство браузеров уже умеет в flexbox, и кодеры постепенно начинают его юзать все больше и больше. Но это скорее верхушка айсберга. Не будем забывать про базовые вещи: знание тегов и аттрибутов HTML, блочная верстка, семантический

12 хитростей JavaScript, которых вы не найдете в большинстве уроков

12 хитростей JavaScript, которых вы не найдете в большинстве уроков

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

Асинхронный Redux без Middlewares - используем ES2017

Асинхронный Redux без Middlewares - используем ES2017

Перевод статьи Asynchronous Redux Without Middlewares — Using ES2017 Можно ли обрабатывать асинхронные redux actions без middlewares, а с ES2017 async/await? Мы можем сделать это более понятным способом. Должен ли я это делать? Я здесь не для того, чтобы говорить, что вы не должны использовать thunk или saga. Если вы

Вещи в CSS, о которых мне никто никогда не говорил.

Вещи в CSS, о которых мне никто никогда не говорил.

Перевод статьи Things nobody ever taught me about CSS Этот пост ни в коем случае не является критикой кого-либо, с кем я когда-либо работал, это лишь краткий список важных вещей, которые я узнал о CSS недавно, проводя собственные исследования. Тот факт, что многим разработчикам кажется, что разработчики не особо заботятся

Front-end ремесло

Front-end ремесло

Перевод статьи Craft the Front-end Как мне это реализовать? Это нормальная практика? Если вы когда-нибудь задавали себе такие вопросы, эта статья (и следующие 🤗), наполненная примерами из реальной жизни, наверняка даст вам ответы на некоторые из них! Статья состоит из трех разделов: Адаптивный дизайн (CSS, TypeScript и Jest), Объектно-ориентированная SCSS, Расширенное

Реализация быстрой сортировки на JavaScript

Реализация быстрой сортировки на JavaScript

Перевод статьи Implementing Quicksort in JavaScript Быстрая сортировка является одним из наиболее эффективных методов сортировки массива. Полное описания есть в статье на Вики. В этой статье расскажем о реализации быстрой сортировки на JavaScript, т.к она не входит в JavaScript core. Из-за того, что на Array.prototype реализован метод sort,

Введение в TensorFlow.js: Машинное обучение в Javascript

Введение в TensorFlow.js: Машинное обучение в Javascript

Мы рады представить TensorFlow.js, библиотеку с открытым исходным кодом, которую можно использовать для определения, обучения и запуска моделей машинного обучения полностью в браузере, используя Javascript и высокоуровневый API. Если вы разработчик Javascript и новичок в ML (Machine Learning) - TensorFlow.js - отличный способ начать обучение. Если же вы

Как работает JavaScript: обзор движка, среды выполнения и стека вызовов

Как работает JavaScript: обзор движка, среды выполнения и стека вызовов

JavaScript становится все более популярным, и команды используют его на разных уровнях своего стека - интерфейсные, серверные, гибридные приложения, встроенные устройства и многое другое. Этот пост предназначен для того, чтобы глубже изучить JavaScript и его работу: зная строительные блоки JavaScript и их взаимодействие друг с другом, вы сможете писать код

Практическое ES6 руководство, о том, как сделать HTTP запрос с помощью Fetch API

Практическое ES6 руководство, о том, как сделать HTTP запрос с помощью Fetch API

В этом руководстве я покажу вам, как использовать API-интерфейс Fetch (ES6 +) для выполнения HTTP-запросов к REST API с некоторыми практическими кейсами, с которыми вы, скорее всего, столкнетесь. Хотите быстро просмотреть HTTP примеры? Перейдите к разделу 5. Первая часть описывает асинхронность в JavaScript. Примечание. Все примеры приведены в ES6 со стрелочными

Начните работу с Angular Grid за 5 минут

Начните работу с Angular Grid за 5 минут

Парадигма гридов данных должна быть знакома большинству разработчиков. Это компонент, используемый для отображения табличных данных в серии строк и столбцов. Возможно, наиболее распространенным примером сетки данных на десктопе является Excel. Гриды давно уже существуют на нативных платформах и недавно пробились в UI веб-приложений. Современные гриды сложны. Затраты на разработку собственных

Практический React: управляем рендерингом - производительность

Практический React: управляем рендерингом - производительность

Реальные проблемы и как их решить, за пять минут или быстрее. Проблема Вы используете Redux и решили добавить некоторые UI фичи или анимацию, но ваша производительность рендеринга оставляет желать лучшего. Все тормозит, и вы не знаете где фиксить. Предостережения: Независимо от Redux, это будет происходить по мере роста вашего приложения.

3 важных чек листа для веб-разработчиков

3 важных чек листа для веб-разработчиков

Возможно, вы слышали о «Front-End Checklist» - проекте, который я начал в октябре 2017 года на GitHub. Это началось как простой проект, который помог моей команде на Маврикии, но превратился в огромный проект с международной поддержкой, получив более 28 000 звезд на GitHub и переведенный на более чем 10 языков.

Вот почему создание массива через map не работает в JS

Вот почему создание массива через map не работает в JS

Кейс Для демонстрации предположим, что вам нужно создать массив чисел от 0 до 99. Как вы можете это сделать? Вот один из вариантов: const arr = []; for (let i = 0; i < 100; i++) { arr[i] = i; } Если вы схожи со мной, то при виде традиционного цикла for в JavaScript вас

CSS Style Guides

CSS Style Guides

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

Уровень развития CSS: пристальный взгляд на CSS архитектуры

Уровень развития CSS: пристальный взгляд на CSS архитектуры

Мы все знаем, что организация, порядок и модульность - это ключ к успеху при работе с CSS, и поэтому CSS архитектуры становятся все более популярными. Я хотел попробовать их все, чтобы проверить плюсы и минусы, и это то, с чем я пришел. OOCSS от Nicole Sullivan означает Объектно Ориентированный CSS

CI и развертывание React приложений

CI и развертывание React приложений

Настройка среды разработки React может показаться запутанной и сложной для новичков. Вы, наверное, слышали, что разработчики говорят о необходимости различных пакетов, таких как babel, webpack и так далее (но это спорно). C ростом популярности React, есть несколько проектов с шаблонами, которые помогают разработчикам настроить подходящий энвайромент для React. create-react-app -

Повышаем скилы с помощью методов JavaScript за пару минут

Повышаем скилы с помощью методов JavaScript за пару минут

Большинство приложений, которые мы создаем сегодня, требуют преобразования колекций данных. Обработка элементов в коллекции - это частая операция, с которой вы, скорее всего, столкнетесь. Забудьте обычный способ реализации цикла for через (const i; i < value.length; i++ ). Прим. Как верно подметили читатели, код с const вообще работать не будет.

Многоликий this в JS

Многоликий this в JS

В этом посте я сделаю все возможное, чтобы объяснить одну из самых фундаментальных частей JavaScript: контекст выполнения. Если вы много используете JS-фреймворки, понимание «this» может сначала показаться приятным дополнением. Однако, если вы собираетесь серьезно относиться к программированию, понимание контекста абсолютно важно для того, чтобы быть JavaScript программистом. Мы используем this

Гибридные нейронные сети с GPU ускорением в JavaScript

Гибридные нейронные сети с GPU ускорением в JavaScript

Согласно отчету Octoverse 2017, JavaScript является самым популярным языком на Github. Измеренный по количеству пул реквестов и уровеню активности JavaScript сопоставим с Python, Java и Go. JavaScript завоевал Интернет и вторгся на сервер, мобильные телефоны, настольные и другие платформы. Между тем, использование GPU ускорения значительно расширилось за рамки компьютерной графики