Search
Write a publication
Pull to refresh
0
0
Send message

Файл .npmrc и оптимизация настройки Node.js-окружения

Reading time5 min
Views60K
Npm — это повседневный рабочий инструмент Node.js-разработчиков. Это, в буквальном смысле, нечто такое, чем мы пользуемся ежедневно и по несколько раз на дню. Это — одна из частей экосистемы Node.js, которая привела эту платформу к успеху.

Одним из самых важных и полезных свойств интерфейса командной строки npm является то, что этот интерфейс поддаётся глубокой настройке. Возможности по его настройке поистине огромны. Это позволяет эффективно работать с npm всем категориям пользователей — от крупных организаций до самостоятельных разработчиков.

Одним их механизмов настройки npm является файл .npmrc. Я уже давно наблюдаю за тем, как вокруг этого файла разворачиваются дискуссии. Особенно памятно мне то время, когда я думал, что с помощью этого файла можно поменять имя директории node_modules. В течение длительного времени я не вполне понимал того, насколько полезным может быть .npmrc, да и того, как им вообще пользоваться.



Поэтому сегодня я хочу рассказать о некоторых возможностях по настройке рабочего окружения Node.js с использованием .npmrc. Мне эти настройки помогают быть эффективнее при подготовке Node.js-модулей и при долгосрочной работе над приложениями.
Читать дальше →

Чего я не знал о CSS

Reading time6 min
Views35K
Рисовать сайты я учился по старинке: глядя на исходный код и пытаясь воспроизвести увиденное. Плюс взял странную книгу для невидимых вещей (типа PHP/MySQL) — и вперёд.

Это ещё в 1999 году, когда мы писали <font size="4" color="#000000"> и т. д., а DHTML был модным.

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

Вот некоторые вещи, которых я не знал, но хотел бы узнать раньше.
Читать дальше →

Создание браузерных 3d-игр с нуля на чистом html, css и js. Часть 2/2

Reading time43 min
Views14K
В данной статье мы продолжим создавать трехмерную браузерную игру лабиринт на чистом html, css и javascript. В предыдущей части мы сделали простой 3-мерный мир, реализовали движение, управление, столкновения игрока со статическими объектами. В этой части мы будем добавлять гравитацию, статическое солнечное освещение (без теней), загружать звуки и делать меню. Увы, как и в первой части, демок здесь не будет.
Читать дальше →

Еще раз о визуализации input типа checkbox и radio. Для тех, кто забыл как

Reading time13 min
Views23K
Тема старая и уже, как выяснилось, подзабытая.

Недавно у меня была короткая работа по разработке ТЗ на модернизацию давно существующего проекта. И, в частности дело касалось стилизации пресловутых <input type="checkbox">. Выяснилось, что исполнитель, программист «на все руки» даже не понял, что я ему на словах объяснял как это сделать. Пришлось делать примеры и, как результат, появился этот текст.

Напомню, что сейчас checkbox и radiobox разные сайты изображают по-разному. Бывает, что не отмеченный input сразу и не разглядишь – такой он «дизайнерский красивый», а у последних версий Chrome выбранные checkbox стали гнусного цвета циан.
Читать дальше →

Что такое XSS-уязвимость и как тестировщику не пропустить ее

Reading time8 min
Views262K
Привет, коллеги. Меня зовут Виталий Котов. По моему наблюдению довольно много тестировщиков когда-либо слышали такое понятие, как XSS-уязвимость. Но мало кто может просто и на пальцах рассказать на собеседовании про нее. Или эффективно проверить веб-сайт на наличие этой уязвимости. Давайте вместе разберемся со всем этим подробнее и попробуем сами найти несложную XSS-уязвимость на демо-странице, которую я специально подготовил к этой статье.

Если вы гуру тестирования безопасности и на раз-два участвуете в баунти-программах крупных IT-компаний, а количество найденных вами XSS исчисляется десятками или даже сотнями — можно смело проходить мимо этой статьи. Если же вы новичок в теме и только начинаете интересоваться поиском уязвимостей — добро пожаловать под кат.


Читать дальше →

Todolist на React Hooks + TypeScript: от сборки до тестирования

Reading time13 min
Views22K
Начиная с версии 16.9, в библиотеке React JS доступен новый функционал — хуки. Они дают возможность использовать состояние и другие функции React, освобождая от необходимости писать класс. Использование функциональных компонентов совместно с хуками позволяет разработать полноценное клиентское приложение.

Предлагаю рассмотреть создание версии Todolist приложения на React Hooks с использованием TypeScript.
Читать дальше →

Создание браузерных 3d-игр с нуля на чистом html, css и js. Часть 1/2

Reading time27 min
Views93K
Современная вычислительная техника позволяет создавать классные компьютерные игры! И сейчас, достаточно популярны игры с 3d-графикой, так как, играя в них, ты окунаешься в вымышленный мир и теряешь всякую связь с реальностью. Развитие интернета и браузерных технологий сделало возможным запускать головоломки и стрелялки в любимом Хроме, Мозилле или еще в чем-то там (про Эксплорер помолчим) в онлайн-режиме, без загрузки. Так вот, здесь я расскажу о том, как создать простую трехмерную браузерную игру.

Выбор жанра, сюжета и стилистики игры является достаточно интересной задачей, и от решения этих вопросов может зависеть успех игры. Кроме этого, свои нюансы вносит и выбор технологии, на основе которой будет создаваться продукт. Моя цель – показать элементарные основы этого увлекательного процесса, поэтому я буду делать 3-мерный лабиринт с незамысловатым оформлением. Более того, я это сделаю на чистом коде без использования библиотек и движков, типа three.js (хотя большие проекты лучше делать все-таки на нем), чтобы показать, как можно создать движок для своих нужд. Полностью самописная игра может быть оригинальной, а потому интересной. В общем, оба подхода имеют свои плюсы и минусы.
Читать дальше →

Типичные ошибки джунов, использующих React

Reading time4 min
Views6.5K
Об основных ошибках junior-разработчиков, использующих React. На чем сыпятся джуны, и как с этим жить. Перевод статьи «Mistakes Junior React Developers Make» от специалиста Frontend практики «Рексофт».

Читать дальше →

Повышаем квалификацию с лучшими инструментами для web-разработки на React

Reading time6 min
Views19K
Вы можете стать более ценным специалистом, изучив лучшие инструменты для разработки веб-приложений на React.



Большинство резюме работодатель отклоняет, просто пробежав их по диагонали. Это немного обескураживает, правда? Так что очень важно, чтобы он сразу увидел нужные ему знания и навыки у вас. Сейчас подходящее время прокачаться, особенно если вам нечем похвастаться в своём резюме. Не нужно посещать университет, чтобы получить новые навыки: нужно просто идти в нужном направлении и не отклоняться от него.
Читать дальше →

React-разработка: 6 путей к профессиональному росту

Reading time7 min
Views22K
Последние полгода я наблюдал за развитием начинающих React-программистов. За это время они прошли просто невероятный путь. Скорость их обучения, их жажда знаний, их стремление к совершенству — всё это произвело на меня сильнейшее впечатление.

Как им это удалось? Как они превратились из тех, кто не может без посторонней помощи открыть PR, в тех, к кому обращаются за помощью другие? Что сделало людей, просящих советов, людьми, охотно дающих советы другим? Как ученики превратились в учителей?



Я задал им эти вопросы. Вот что они на них ответили.
Читать дальше →

Выравнивание логотипов средствами CSS

Reading time7 min
Views26K
Если вы занимаетесь фронтенд-разработкой, то вам, возможно, приходится создавать разделы сайтов, содержащие логотипы каких-то компаний. На первый взгляд эта задача может показаться очень простой. Но, когда дело доходит до выравнивания и центровки логотипов, выясняется, что всё сложнее, чем кажется. Кроме того, тут стоит сказать о том, что изображения логотипов могут иметь разные размеры, и о том, что некоторые логотипы имеют вертикальную ориентацию, а некоторые — горизонтальную.



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

6 лучших практик для безопасного управления Git-репозиториями

Reading time4 min
Views14K
Избегайте захламления репозиториев и других действий, которые усложняют управление кодовой базой. Вместо этого используйте лучшие практики, которые помогут упростить работу.



Изучение исходников в репозитории позволяет оценить уровень безопасности приложений. Но если никто не смотрит на код, проблемы будут только расти. К счастью, у GitHub есть свои специалисты по безопасности, которые недавно обнаружили трояна в нескольких репозиториях Git. Его почему-то не заметили сами владельцы этих репозиториев. Хотя мы не можем диктовать другим людям, как управлять своими собственными хранилищами, мы можем учиться на их ошибках. В этой статье мы рассмотрим полезные приёмы работы с репозиториями.
Читать дальше →

Обзор технологий скроллинга

Reading time7 min
Views22K
Анимации, имеющие отношение к скроллингу веб-страниц, существуют уже многие годы. В последнее время подобные анимации стали распространённее. Возможно, дело тут отчасти в том, что устройства, используемые для работы в интернете, стали мощнее. Эти устройства способны нормально обрабатывать и выводить больше визуальных эффектов, чем раньше.



Существует множество технологий, связанных со скроллингом. Цель этой статьи заключается в том, чтобы дать обзор таких технологий и инструментов, которые помогут подобрать и создать то, что нужно в каждой конкретной ситуации. Я разделил бы технологии скроллинга на две широкие категории. В первую входят технологии для реализации специфических механизмов скроллинга, во вторую — технологии скроллинга общего назначения.
Читать дальше →

На замену TCP: обсуждение протокола QUIC

Reading time3 min
Views10K
QUIC — новый транспортный протокол, работающий поверх UDP. Некоторые в шутку называют его TCP/2. Расскажем, что сейчас обсуждают, как принять участие и кто внедряет поддержку QUIC.

Читать дальше →

Двоичное‌ ‌кодирование‌ ‌вместо‌ ‌JSON

Reading time6 min
Views15K
Кодируйте‌ ‌одни‌ ‌и‌ ‌те‌ ‌же‌ ‌данные‌ ‌гораздо‌ ‌меньшим‌ ‌количеством‌ ‌байт.‌ ‌

image

Почему‌ ‌меня‌ ‌это‌ ‌должно‌ ‌волновать ‌


Данные‌ ‌хранятся‌ ‌в‌ ‌памяти‌ ‌в‌ ‌виде‌ ‌структур‌ ‌данных,‌ ‌таких‌ ‌как‌ ‌объекты,‌ ‌списки,‌ ‌массивы‌ ‌и‌ ‌т.д.‌ ‌Но‌ ‌если‌ ‌вы‌ ‌хотите‌ ‌отправить‌ ‌данные‌ ‌по‌ ‌сети‌ ‌или‌ ‌в‌ ‌файле,‌ ‌вам‌ ‌нужно‌ ‌закодировать‌ ‌их‌ ‌в‌ ‌виде‌ ‌последовательности‌ ‌байтов.‌ ‌Перевод‌ ‌из‌ ‌представления‌ ‌в‌ ‌памяти‌ ‌в‌ ‌последовательность‌ ‌байтов‌ ‌называется‌ ‌кодированием,‌ ‌а‌ ‌обратное‌ ‌преобразование‌ ‌–‌ ‌декодированием.‌ ‌Со‌ ‌временем‌ ‌схема‌ ‌данных,‌ ‌обрабатываемых‌ ‌приложением‌ ‌или‌ ‌хранящихся‌ ‌в‌ ‌памяти,‌ ‌может‌ ‌эволюционировать,‌ ‌туда‌ ‌могут‌ ‌добавляться‌ ‌новые‌ ‌поля‌ ‌или‌ ‌удаляться‌ ‌старые.‌ ‌Следовательно,‌ ‌используемая‌ ‌ кодировка‌ ‌должна‌ ‌иметь‌ ‌как‌ ‌обратную‌ ‌(новый‌ ‌код‌ ‌должен‌ ‌быть‌ ‌способен‌ ‌читать‌ ‌данные,‌ ‌написанные‌ ‌старым‌ ‌кодом),‌ ‌так‌ ‌и‌ ‌прямую‌ ‌(старый‌ ‌код‌ ‌должен‌ ‌быть‌ ‌способен‌ ‌читать‌ ‌данные,‌ ‌написанные‌ ‌новым‌ ‌кодом)‌ ‌совместимость.‌ ‌

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

Типы‌ ‌форматов‌ ‌кодирования‌


Существует‌ ‌два‌ ‌типа‌ ‌форматов‌ ‌кодирования:‌ ‌

  • Текстовые‌ ‌форматы‌ ‌
  • Двоичные‌ ‌форматы‌
‌ ‌
Читать дальше →

Малоизвестные CSS-свойства

Reading time5 min
Views28K
Существует много CSS-свойств, о которых некоторые дизайнеры просто не знают. Или — знают, но забывают использовать эти свойства там, где они способны принести большую пользу. Некоторые из этих свойств могут помочь отказаться от использования JavaScript ради достижения некоего результата, некоторые позволяют экономить время за счёт написания меньших объёмов CSS-кода. Я, занимаясь фронтенд-разработкой, постоянно натыкаюсь на подобные свойства. Однажды я подумал о том, чтобы взять и составить список CSS-свойств, интересных, но используемых редко. Так и родилась эта статья.

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


Читать дальше →

Numl – Альтернативный язык разметки и стилизации для веб

Reading time20 min
Views21K

Всем привет! Меня зовут Андрей, я профессионально разрабатываю веб-интерфейсы уже больше 11 лет и последний год развиваю проект Numl, который можно назвать языком разметки и стилизации для веб. В этой статье я расскажу, как в попытке перебороть ряд особенностей CSS и упростить вёрстку веб-проектов получился целый язык, который не только удовлетворил все наши потребности в стилизации, но также позволил уменьшить кол-во JS-кода и улучшить доступность.


Читать дальше →

5 типичных ошибок при создании React компонентов (с хуками) в 2020 году

Reading time8 min
Views18K
image

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


Оригинальный материал был написан немецким разработчиком Лоренцом Вайсом для личного блога, а позже собрал много позитивных отзывов на dev.to. Переведено командой Quarkly специально для комьюнити на Хабре.


Читать дальше →

Как получить размеры экрана, окна и веб-страницы в JavaScript?

Reading time2 min
Views186K


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

Представляю Вашему вниманию перевод небольшой заметки «How to Get the Screen, Window, and Web Page Sizes in JavaScript» автора Dmitri Pavlutin.

Для определения ориентации окна браузера (ландшафтной или портретной) можно сравнить его ширину и высоту.

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

Что означают эти размеры и, главное, как их получить? Именно об этом я и собираюсь рассказать.
Читать дальше →

Упрощаем фоновые рисунки c помощью конических градиентов

Reading time8 min
Views4.4K


Один из известных способов создания повторяющихся фоновых узоров — это применение
линейных градиентов. Но если использовать с этой же целью conic-gradient(), требуется значительно меньшее количество CSS-кода. Данное преимущество конических градиентов проиллюстрировано в статье несколькими примерами, взятыми из галереи Лии Веру.


Нам предстоит рассмотреть


Information

Rating
Does not participate
Registered
Activity