Pull to refresh
7
-0.6
Алексей @morgreek

Продвинутый эникейщик-шнуродёр

Send message

TypeScript: Раскладываем tsconfig по полочкам. Часть 1

Reading time 10 min
Views 82K

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

Читать далее
Total votes 30: ↑29 and ↓1 +28
Comments 4

Canvas шаг за шагом: ПОНГ

Reading time 5 min
Views 53K
Сегодня попробуем написать небольшую игру Понг используя html5 тег canvas. Те кто не хочет читать пост тот может сразу ИГРАТЬ.
Если верить Википедии, то можно узнать что Pong является простейшим симулятором настольного тенниса. Небольшой квадратик, заменяющий пинг-понговый мячик, двигается по экрану по линейной траектории. Если он ударяется о периметр игрового поля или об одну из нарисованных ракеток, то его траектория изменяется в соответствии с углом столкновения.
Геймплей состоит в том, что игроки передвигают свои ракетки вертикально, чтобы защищать свои ворота. Игрок получает одно очко, если ему удаётся отправить мячик за ракетку оппонента…

Мы попытаемся реализовать игру так что бы в неё можно было играть при помощи мыши, а оппонентом управлял компьютер. Итак приступим. Для начала определимся с тем что, для полного понимания происходящего в этой записи желательно ознакомиться с постом описывающим основы.
Читать дальше
Total votes 41: ↑41 and ↓0 +41
Comments 22

CANVAS шаг за шагом: Основы

Reading time 6 min
Views 523K
CANVAS шаг за шагом:
  1. Основы
  2. Изображения
  3. Понг
  4. Пятнашки

Если верить англо-русскому словарю, то можно узнать что canvas переводится как холст, а если верить википедии, то можно узнать что тег canvas, это элемент HTML 5, который предназначен для создания растрового изображения при помощи JavaScript. Тому как создать это растровое изображение и будет посвящен мой небольшой текст. Прежде чем начинать пробовать свои силы в этом не легком деле рекомендуется уже иметь базовые знания о том что такое HTML и с чем едят JavaScript.
Читать дальше →
Total votes 84: ↑82 and ↓2 +80
Comments 48

Кнопка или ссылка?

Reading time 7 min
Views 76K

Кнопка или ссылка?


Я знаю хабр не для жалоб,

но доколе

использовать ты будешь

ссылки вместо кнопок <UserName />

Девушка на картинке как бы спрашивает — Куда жать?


Автор иллюстрации <Marat Hilmanov> gray-monkey@yandex.ru


Если коротко:


Используйте для кнопок — кнопки, а для ссылокссылки.


Для кнопок использовать
ссылки
— не комильфо.

Читать дальше →
Total votes 63: ↑43 and ↓20 +23
Comments 77

CORS, CSP, HTTPS, HSTS: о технологиях веб-безопасности

Reading time 8 min
Views 37K
Автор материала, перевод которого мы публикуем сегодня, говорит, что существует множество причин изучать веб-безопасность. Например, вопросами безопасности интересуются пользователи веб-сайтов, которых беспокоит возможность кражи их персональных данных. Безопасность заботит веб-разработчиков, которые стремятся к повышению уровня защиты создаваемых ими проектов. То же самое можно сказать и о начинающих программистах, которые ищут работу и готовятся к собеседованиям. Цель этой статьи заключается в том, чтобы понятным языком рассказать о некоторых важных технологиях веб-безопасности. Прежде чем приступить к разговору об этих технологиях, при упоминании которых обычно оперируют сокращениями вроде CORS, CSP и HSTS, рассмотрим пару базовых концепций безопасности.

image
Читать дальше →
Total votes 22: ↑21 and ↓1 +20
Comments 2

Ember.js: (снова) время попробовать

Reading time 8 min
Views 17K

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


Вы учите Ember.js один раз, а потом применяете эти знания на всех Ember.js проектах. Этот тезис я попытаюсь раскрыть под катом.

Читать дальше →
Total votes 18: ↑18 and ↓0 +18
Comments 16

Как сверстать письмо, чтобы оно дошло до получателя таким, как задумано

Level of difficulty Easy
Reading time 14 min
Views 6.3K

В статье расскажу и покажу, как сверстать письмо, чтобы оно наверняка правильно отображалось во всех почтовых клиентах — особенно в Outlook, который до сих пор возглавляет подборки по популярности в РФ.

В конце — пример целого письма в HTML.

Читать далее
Total votes 44: ↑42 and ↓2 +40
Comments 17

Настройка CI/CD для самых маленьких разработчиков

Level of difficulty Easy
Reading time 8 min
Views 28K

Считается, что построение CI/CD - задача для DevOps. Глобально это действительно так, особенно если речь идет о первоначальной настройке. Но часто с докручиванием отдельных этапов процесса сталкиваются и разработчики. Умение поправить что-то незначительное своими силами позволяет не тратить время на поход к коллегам (и ожидание их реакции), т.е. в целом повышает комфорт работы и дает понимание, почему все происходит именно так.

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

Читать далее
Total votes 23: ↑21 and ↓2 +19
Comments 39

7 трюков с Rest и Spread операторами при работе c JS объектами

Reading time 4 min
Views 28K
Если вдруг кому интересно то я веду телеграм канал по фронтенду где выкладываю интересные статьи на разные темы а так же сам периодически пишу шорт-риды которые могут быть вам полезны. А теперь поехали!



Привет, Хабр! Представляю вашему вниманию перевод статьи «7 Tricks with Resting and Spreading JavaScript Objects» автора Joel Thoms.

Всем привет, на днях коллега по работе скинул мне ссылку на статью на английском языке в которой перечисляются разные методы работы с rest и spread операторами. Она оказалась мне полезна и я решил её перевести. Итак, начнем.

image
В этой статье вы найдете 7 наименее известных трюков использования rest и spread операторов
Total votes 24: ↑22 and ↓2 +20
Comments 11

Каррирование функций в JavaScript

Reading time 8 min
Views 82K
Функциональное программирование — это такой стиль разработки программ, в котором широко используются некоторые специфические возможности по работе с функциями. Речь идёт, в частности, о передаче функций другим функциям в качестве аргументов и о возврате функций из других функций. К функциональному стилю программирования относится и понятие «чистые функции». Выходные данные чистых функций зависят только от входных, они, при выполнении, не влияют на состояние программы.

Принципы функционального программирования поддерживает множество языков. Среди них можно отметить JavaScript, Haskell, Clojure, Erlang. Использование механизмов функционального программирование подразумевает знание, кроме прочих, таких концепций, как чистые функции, каррирование функций, функции высшего порядка.



Материал, перевод которого мы сегодня публикуем, посвящён каррированию. Мы поговорим о том, как работает каррирование, и о том, как знание этого механизма может пригодиться JS-разработчику.
Читать дальше →
Total votes 29: ↑27 and ↓2 +25
Comments 26

Английский для айтишника? Легко!

Reading time 2 min
Views 180K
Эта тема не относится к IT напрямую, но все знают, что без нее никуда. К сожалению, далеко не у всех есть возможность изучать английский с преподавателями. Ну что ж, попробуем заняться этим дома и с максимальной отдачей!
Читать дальше →
Total votes 165: ↑137 and ↓28 +109
Comments 187

Базовое понимание принципа Eventloop

Reading time 4 min
Views 38K

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

Читать далее
Total votes 23: ↑21 and ↓2 +19
Comments 9

Задачи на собеседованиях. Event loop. JS

Reading time 10 min
Views 85K

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

Читать далее
Total votes 20: ↑19 and ↓1 +18
Comments 24

Обзор синтаксиса Tailwind CSS

Level of difficulty Easy
Reading time 7 min
Views 5.4K

Салют, Хабр!

Tailwind CSS – это utility-first CSS фреймворк, который отличается от традиционных CSS фреймворков вроде Bootstrap или Foundation тем, что вместо предопределенных компонентов предлагает набор utility-классов, позволяющих стилизовать элементы прямо в HTML.

Utility-first подход заключается в использовании множества функциональных классов, каждый из которых отвечает за одно CSS свойство, к примеру паддинги, маржини и т.п.

В этой статье рассмотрим синтаксис Tailwind CSS, в целом, он похож на дефолт CSS.

Читать далее
Total votes 19: ↑15 and ↓4 +11
Comments 15

Flux для глупых людей

Reading time 6 min
Views 253K
Пытаясь разобраться с библиотекой от Facebook ReactJS и продвигаемой той же компанией архитектурой «Flux», наткнулся на просторах интернета на две занимательные статьи: «ReactJS For Stupid People» и «Flux For Stupid People». Чуть раньше я поделился с хабравчанами переводом первой статьи, настала очередь второй. Итак, поехали.

Flux для глупых людей


TL;DR Мне, как глупому человеку, как раз не хватало этой статьи, когда я пытался разобраться с Flux. Это было не просто: хорошей документации нет и многие ее части перемещаются.

Это продолжение статьи «ReactJS For Stupid People».
Читать дальше →
Total votes 38: ↑35 and ↓3 +32
Comments 35

Как разработчику организовать личную базу знаний: систематизация информации из книг, статей, видео и курсов

Level of difficulty Easy
Reading time 6 min
Views 42K

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

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

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

Читать далее
Total votes 84: ↑82 and ↓2 +80
Comments 93

[в закладки] PDF- и ePUB-версия руководства по React

Reading time 3 min
Views 43K
Привет Хабр! В этом году мы делали перевод огрооомного обучающего курса по React — в нашем блоге он был аж в 27 постах. В каждой части, от простого к сложному, выдавался концентрат знаний, которые тепло оценили читатели нашего блога. А сегодня мы поймали себя на мысли, что не выпустили все части одним большим куском — исправляемся!



Для новых читателей нашего блога — два бонуса внутри.
Читать дальше →
Total votes 58: ↑55 and ↓3 +52
Comments 9

Как стать джуном, которого берут на работу (frontend-разработка)

Level of difficulty Easy
Reading time 8 min
Views 97K

Привет, Хабр! Я - начальник отдела разработки небольшой IT-компании, и мы - те самые люди, которые не ищут на работу сеньоров, и мы готовы брать не только мидлов, но даже и джуниоров, и готовы растить их до уровня крепких мидлов. Однако 80% приходящих на вакансию frontend-разработчика соискателей, даже называющих себя мидлами, с опытом работы, по сути оказываются не то что джуниорами - вообще не программистами. Что же на самом деле должен знать джун, чтобы попасть в компанию, подобную нашей, и как к этому прийти, если за плечами нет высшего программистского образования или богатого опыта программирования в школе? Я расскажу об этом и о том, как устроен процесс найма в нашей компании.

Базовый уровень программирования

Итак, к нам приходит среднестатистический кандидат, который прошел курсы по JavaScript, сделал там пару проектов. Потом узнал, что во многих местах хотят React, сходил на курсы по нему, тоже сделал пару проектов, выложил их на Github. Приходит к нам, уверенный в себе. И мы его просим написать функцию, которая выбирает из строки все большие буквы, или реализовать "вручную" какой-нибудь метод из array. И половина кандидатов в этом месте выбывают из строя. Кто-то вообще не может это сделать, у кого-то на двухминутную функцию уходит больше получаса. Зачем мы вообще это спрашиваем и почему с этого начинаем?

Читать далее
Total votes 42: ↑36 and ↓6 +30
Comments 157

Руководство по Node.js, часть 4: npm, файлы package.json и package-lock.json

Reading time 17 min
Views 175K
Сегодня мы публикуем четвёртую часть перевода руководства по Node.js. В этом материале мы начнём разговор об npm а также рассмотрим особенности файлов package.json и package-lock.json.



Читать дальше →
Total votes 28: ↑28 and ↓0 +28
Comments 8

Лаборатория-мастерская в деревне. Малыми средствами, своими руками, с самого начала

Level of difficulty Medium
Reading time 7 min
Views 22K

Квартирный вопрос, испортивший, как всем известно, людей нашего времени, тем не менее решается. И решается куда как проще на некотором удалении от столиц и крупных городов, а в глуши и вовсе зачастую приходится только набраться решимости и закатать рукава… Речь пойдёт о строительстве небольшого приусадебного всепогодного и всесезонного помещения в основном для некрупного настольного технического творчества. Строительство при этом велось весьма невеликими средствами, в одиночку, без применения строительной техники и почти без использования наёмной рабочей силы. С другой стороны, и публика мы непривередливая и некапризная.
Читать дальше →
Total votes 195: ↑194 and ↓1 +193
Comments 144

Information

Rating
Does not participate
Location
Россия
Registered
Activity