Pull to refresh
3
Karma
0
Rating
webspilka @webspilka

User

Улучшение Visual Studio Code для новичков

Website development *JavaScript *Visual Studio *
Tutorial

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

Читать далее
Total votes 25: ↑18 and ↓7 +11
Views 38K
Comments 29

7 многообещающих расширений VS Code 2021 года

SkillFactory corporate blog Website development *Programming *Software
Translation

К старту курса по Fullstack-разработке на Python делимся подборкой расширений Visual Studio Code, среди которых вы найдёте генератор документации для кода JavaScript на базе ИИ и лёгкий, простой клиент REST API. За подробностями приглашаем под кат.

Читать далее
Total votes 22: ↑18 and ↓4 +14
Views 13K
Comments 5

Как мы уменьшаем размер изображений на веб-страницах в 10 раз с помощью нашего оптимизатора

МТС corporate blog Website development *

Привет, Хабр! Меня зовут Евгений Лабутин, я из команды разработки продукта МТС Твой бизнес. Мы разработали свой рецепт приготовления картинок для нашего портала. Благодаря ему удалось сократить их вес на странице до 10 раз относительно уже оптимизированного jpg/png, сохранив при этом простоту разработки – как будто это стандартный img элемент. Разработанный микросервис называется ImageOptimize, из этой статьи вы узнаете, как он работает и что у него под капотом. Мы уже выложили код микросервиса в OpenSource (чему очень рады), поэтому вы тоже можете использовать такую компрессию, настроив ее в несколько простых шагов.

Читать далее
Total votes 37: ↑35 and ↓2 +33
Views 16K
Comments 28

Безопасный CSS, или как писать универсальные стили

CSS *HTML *
Sandbox
Translation

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

Читать статью
Total votes 30: ↑28 and ↓2 +26
Views 28K
Comments 12

Fast Reverse Proxy как альтернатива Ngrok

Website development *
Tutorial
✏️ Technotext 2021

Создание общедоступного URL в сети интернет к вашему локальному проекту

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

Немного предыстории...

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

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

Думаю все, кто более менее освоил работу в докере, уже не мыслят как можно разрабатывать без него. Причин на это много. Конечно, как и везде у докера есть своя цена и это тоже уже много раз обсуждалось.

Итак, новый проект не похож на предыдущие. Он имеет много зависимостей с другими сервисами, как внутренними так и внешними.

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

Интеграции платежных систем всегда подразумевает, что будут callback (notification).

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

Т.к. Ngrok не подходил, первое что пришло в голову, создать виртуалку, на нее завести домен, и создавать ssh туннель с ним.

Читать далее
Total votes 8: ↑8 and ↓0 +8
Views 7.5K
Comments 28

Карманная книга по TypeScript. Часть 2. Типы на каждый день

Маклауд corporate blog Website development *TypeScript *Lifehacks for geeks
Translation

image


Мы продолжаем серию публикаций адаптированного и дополненного перевода "Карманной книги по TypeScript".

Другие части:



Обратите внимание: для большого удобства в изучении книга была оформлена в виде прогрессивного веб-приложения.


Примитивы: string, number и boolean


В JS часто используется 3 примитива: string, number и boolean. Каждый из них имеет соответствующий тип в TS:


  • string представляет строковые значения, например, 'Hello World'
  • number предназначен для чисел, например, 42. JS не различает целые числа и числа с плавающей точкой (или запятой), поэтому не существует таких типов, как int или float — только number
  • boolean — предназначен для двух значений: true и false

Обратите внимание: типы String, Number и Boolean (начинающиеся с большой буквы) являются легальными и ссылаются на специальные встроенные типы, которые, однако, редко используются в коде. Для типов всегда следует использовать string, number или boolean.

Читать дальше →
Total votes 35: ↑30 and ↓5 +25
Views 24K
Comments 1

Полное визуальное руководство-шпаргалка по Flexbox и Grid + туториал

Website development *CSS *JavaScript *Programming *HTML *


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

Представляю вашему вниманию полное визуальное руководство-шпаргалку по всем свойствам CSS-модулей Flexbox и Grid.

Основные источники: A Complete Guide to Flexbox, A Complete Guide to Grid.

В конце статьи вас ждет небольшой туториал по созданию тренажера по Flexbox.

Без дальнейших предисловий.


Total votes 14: ↑10 and ↓4 +6
Views 115K
Comments 7

Готовим console.log() правильно

SkillFactory corporate blog Website development *CSS *JavaScript *
Translation
Специально к старту нового потока курса «Frontend-разработчик» делимся с вами полезным переводом. Автор рассказывает, как использует методы логирования в производственной среде собственного проекта и в чём именно они помогают. Кроме того, нас знакомят с платформой AppSignal, созданной, чтобы напрямую уведомлять разработчика о возникающих у пользователя исключениях в приложении. Подробности под катом.

Приятного чтения!
Total votes 29: ↑24 and ↓5 +19
Views 15K
Comments 6

Использование Nginx FastCGI Cache

PHP *Nginx *

FastCGI Cache — это система кэширования данных реализованая на уровне HTTP-сервера Nginx.

Преимущество FastCGI Cache заключается в том, что Nginx вернёт закешированный ответ пользователю сразу, как только получит запрос, при этом слой приложения не будет вовсе обрабатывать поступивший HTTP-запрос, если он имеется в кэше Nginx. 

Использование FastCGI Cache — отличный способ снизить нагрузку на вашу систему.

Если на вашем сайте есть страницы, которые изменяются редко или задержка обновления информации на некоторое время не критична, то FastCGI Cache именно то, что нужно.

Читать далее
Total votes 13: ↑12 and ↓1 +11
Views 20K
Comments 16

Среда разработки PHP на базе Docker

Website development *PHP *MySQL *PostgreSQL *DevOps *

Решение на базе Docker, которое позволит создать на локальном компьютере универсальную среду разработки на PHP за 30 - 40 минут. Несколько версий PHP — 7.3 и 7.1 с набором наиболее востребованных расширений. Готовый к работе монитор процессов Supervisor. Предварительно сконфигурированный веб-сервер Nginx. Базы данных: MySQL 5.7MySQL 8PostgreSQLMongoDB 4.2Redis. Настройка основных параметров окружения через файл .env. Возможность модификации сервисов через docker-compose.yml.

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

Некоторые аспекты управления VDS-сервером под Linux

VDSina.ru corporate blog Hosting Configuring Linux *Nginx *Server Administration *
VDS (Virtual Dedicated Server) — услуга, в рамках которой пользователь получает виртуальный выделенный сервер с максимальными привилегиями. Это эмуляция реального физического сервера, у него есть рутовый доступ, возможность установки произвольных операционных систем и любого софта. При этом он обходится значительно дешевле аренды сопоставимого по мощности физического сервера.

На сервер можно поставить ОС со своего образа или воспользоваться готовым образом в панели управления.



Предположим, мы поставили Debian 10 и веб-сервер Nginx, который идёт в стандартном репозитории (apt install nginx). Давайте посмотрим, какие полезные утилиты и команды помогут в управлении сервером под Linux. Рассмотрим и отдельно Nginx, и сам VDS-сервер в целом.
Читать дальше →
Total votes 42: ↑39 and ↓3 +36
Views 11K
Comments 8

JavaScript: область видимости простыми словами

Website development *JavaScript *Programming *
Translation
Доброго времени суток, друзья!

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

В этой статье я постараюсь простыми словами объяснить, что такое область видимости в JavaScript.
Читать дальше →
Total votes 8: ↑8 and ↓0 +8
Views 69K
Comments 5

4 года игры в танчики

Robotics development *Developing for Arduino *Robotics DIY Electronics for beginners
🔥 Technotext 2020

Доброго времени суток, дорогой читатель!

Сегодня я хочу поведать тебе забавную, ещё не закончившуюся историю странных совпадений, побед и поражений, радости и смуты. Если интересно как создавался, возможно, один из самых маленьких в мире "умных" (а не просто р/у) танков как на КДПВ, а так же при чём тут IoT, PHP и Angular - прошу под кат!

Узнать всё об этом
Total votes 175: ↑173 and ↓2 +171
Views 46K
Comments 76

Дэн Абрамов о замыканиях в JavaScript

RUVDS.com corporate blog Website development *JavaScript *
Translation
Замыкания вызывают у программистов сложности из-за того, что это — «невидимая» конструкция.

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



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

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

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

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

Вы, если хотите, можете дальше не читать. Оставшаяся часть этого материала рассматривает замыкания в другом свете. Вместо того чтобы говорить о том, что такое замыкания, эта часть статьи посвятит вас в подробности методики обнаружения замыканий. Это похоже на то, как, в 1960-х, работали первые программисты.
Читать дальше →
Total votes 41: ↑33 and ↓8 +25
Views 21K
Comments 64

Политика общего происхождения и CORS: визуальное руководство

Website development *JavaScript *Programming *
Translation


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

Представляю вашему вниманию перевод статьи «CS Visualized: CORS» автора Lydia Hallie.

Каждому разработчику приходилось сталкиваться с ошибкой Access to fetched has been blocked by CORS policy. Существует несколько способов быстрого решения данной проблемы. Однако, давайте не будем спешить и подробно рассмотрим, что из себя представляет политика CORS.

У нас часто возникает необходимость отобразить данные, находящиеся в другом месте. Прежде чем мы сможем это сделать, браузер должен отправить запрос на сервер, чтобы получить эти данные.
Читать дальше →
Total votes 8: ↑7 and ↓1 +6
Views 13K
Comments 4

Как разобрать URL в JavaScript?

Website development *JavaScript *Programming *
Translation


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

Представляю Вашему вниманию перевод заметки «How to Parse URL in JavaScript: hostname, pathname, query, hash» автора Dmitri Pavlutin.

Унифицированный указатель ресурса или, сокращенно, URL — это ссылка на веб-ресурс (веб-страницу, изображение, файл). URL определяет местонахождения ресурса и способ его получения — протокол (http, ftp, mailto).

Например, вот URL данной статьи:

https://dmitripavlutin.com/parse-url-javascript

Часто возникает необходимость получить определенные элементы URL. Это может быть название хоста (hostname, dmitripavlutin.com) или путь (pathname, /parse-url-javascript).

Удобным способом получить отдельные компоненты URL является конструктор URL().

В этой статье мы поговорим о структуре и основных компонентах URL.
Читать дальше →
Total votes 22: ↑13 and ↓9 +4
Views 32K
Comments 11

Управление зависимостями JavaScript

Домклик corporate blog Website development *JavaScript *Node.JS *

Управление зависимостями JavaScript


Всем привет! Меня зовут Слава Фомин, я ведущий разработчик в компании DomClick. За свою 16-ти летнюю практику я в первых рядах наблюдал за становлением и развитием JavaScript как стандарта и экосистемы. В нашей компании мы используем JavaScript, в первую очередь, для продвинутой front-end разработки и успели перепробовать достаточно большое количество различных технологий, инструментов и подходов, набить много шишек. Результатом этого кропотливого труда стал ценнейший опыт, которым я и хочу поделиться с вами.

Читать дальше →
Total votes 31: ↑28 and ↓3 +25
Views 27K
Comments 19

Расширенная настройка web сервера (Apache2 + Nginx)

Website development *Nginx *Server Administration *Apache *DevOps *
Sandbox

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


В этой статье будет идти речь о настройке сервера с использованием: Apache2, Nginx, ngx_pagespeed, PHP, PHP-FPM, MariaDB и MemCached.

Читать дальше →
Total votes 21: ↑15 and ↓6 +9
Views 26K
Comments 10

Визуализация промисов и Async/Await

Website development *JavaScript *Programming *


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

Представляю вашему вниманию перевод статьи «JavaScript Visualized: Promises & Async/Await» автора Lydia Hallie.

Приходилось ли вам сталкиваться с JavaScript кодом, который… работает не так, как ожидается? Когда функции выполняются в произвольном, непредсказуемом порядке, или выполняются с задержкой. Одна из главных задач промисов — упорядочение выполнения функций.

Мое ненасытное любопытство и бессонные ночи окупились сполна — благодаря им я создала несколько анимаций. Пришло время поговорить о промисах: как они работают, почему их следует использовать и как это делается.
Читать дальше →
Total votes 17: ↑17 and ↓0 +17
Views 28K
Comments 5

23 непростых вопроса для JavaScript-собеседования

RUVDS.com corporate blog Website development *Entertaining tasks JavaScript *
Translation
Хотите подготовиться к собеседованию по JavaScript и ищете вопросы, на которых можно попрактиковаться? Если так — считайте, что ваши поиски окончены. Автор материала, перевод которого мы сегодня публикуем, говорит, что собрал более двух десятков вопросов по JavaScript, предназначенных для тех, кто хочет превратиться из джуниора в сеньора, для тех, кто стремится успешно пройти собеседование в сфере фронтенд-разработки и получить интересное предложение от работодателя.


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

Information

Rating
Does not participate
Location
Киевская обл., Украина
Date of birth
Registered
Activity