Оффтоп Digital Skynet
523

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

В закладки

Существует множество инструментов, которые вам могут порекомендовать более опытные разработчики. Но что пригодится начинающему разработчику?

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

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

Я разделю эту статью на 2 части. В первой расскажу про расширения Chrome , во второй про расширения VS Code. Я знаю, что есть другие браузеры и другие текстовые редакторы, но я уверен, что большинство из перечисленных инструментов также доступны для вашей платформы, поэтому давайте не спорить из-за наших личных предпочтений.

Chrome Extensions

Теперь, когда я провозгласил себя веб-разработчиком, я практически живу на своей консоли Chrome. Ниже приведены некоторые инструменты, которые позволяют мне тратить меньше времени на работу:

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

Pesticide - Полезно для просмотра контуров вашего <div>S и изменения CSS.

Colorzilla - Удобно для точного копирования цветов с веб-сайтов. Программа копирует цвет прямо в ваш буфер обмена, поэтому вы не проведете всё время в попытках получить правильную комбинацию RGBA.

CSS Peeper - С его помощью можно просматривать цвета и другие ресурсы, используемые на веб-сайте. Клонирует веб-сайты, которые вам нравятся. Это дает возможность «подсмотреть» их цветовую гамму и позволяет вам видеть, какие другие активы существуют на странице.

Wappalyzer - Позволяет просматривать технологии, используемые на веб-сайте. Вы когда-нибудь задумывались, какую структуру использует веб-сайт или на каком сервере он размещен? Больше задумываться об этом не придется.

React Dev Tools - Полезно для отладки ваших приложений, написанных на React.

Redux Dev Tools - Полезно для отладки приложений с использованием Redux.

JSON Formatter - Использую для того, чтобы JSON выглядел более чистым в браузере. С помощью этого инструмента вы потратите не больше двух часов.

Vimeo Repeat and Speed - С помощью этого инструмента я ускоряю видео Vimeo. Если вы смотрите видео-уроки, как и большинство веб-разработчиков, теперь вы знаете, как это сделать быстрее. Есть также версии для YouTube.

VS Code Extensions

У каждого программиста есть свой любимый текстовый редактор, и я не исключение. Мой выбор - Visual Studio Code.

Большинство из расширений, представленных ниже, работают для любого редактора, который вы используете. Мои фавориты:

Auto Rename Tag - Автоматическое переименование парных тегов HTML. Вы создали тег <p>. Теперь вы хотите изменить его, а также его вложить тег </p> во что-то другое. Просто измените что-то одно, и другое поменяется автоматически. Теоретически повышает производительность в 2 раза.

HTML CSS Support - Это полезно для получения некоторого аккуратного выделения синтаксиса и предложений кода.

HTML Snippets - еще один полезный ресурс для экономии времени. Соедините с Emmet , и вам едва когда-либо придется вводить HTML снова.

Babel ES6/ES7 – Подсвечивает синтаксис JavaScript Babel. Если Вы используете Babel, это значительно упростит работу над кодом. Если вы любите использовать все современные функции JS, это то, что вам нужно.

Bracket Pair Colorizer - Добавляет цвета в скобки для более легкой визуализации блока. Очень удобно для обнаружения самых распространенных ошибок, если вы, например, не закрыли скобки.

ESLint - Интегрирует ESLint в Visual Studio Code. Дает подсказки об ошибках при написании кода, и, в зависимости от вашей конфигурации, поможет обеспечить хороший стиль кодирования.

Guides - Добавляет дополнительные направляющие линии в код. Еще одна подсказка для вас, чтобы вы правильно закрывали все скобки.

JavaScript Console Utils - Облегчает ведение журнала консоли. Если Вы похожи на большинство разработчиков, вы обнаружите, что входите в консоль в своем отладочном потоке (я знаю, что мы должны использовать отладчик). Эта утилита позволяет легко создать полезную консоль.журнал() отчетности.

Code Spell Checker - Проверка орфографии, которая отвечает за camelCase. Еще один распространенный источник ошибок – жирность? ввода имени переменной или функции. Эта проверка орфографии будет искать необычные слова.

Git Lens - Позволяет увидеть, когда и кем были внесены изменения в код. Если код будет нарушен не по вашей вине, у вас будут неопровержимые доказательства.

Path Intellisense - Автозаполнение файла. С его помощью удобно импортировать данные из других файлов. Это упрощает навигацию по файловому дереву.

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

VSCode-Icons - добавляет иконки в файловое дерево. Если просмотр вашей файловой структуры причиняет боль, это может помочь J Иконки практически для любого типа файлов облегчат вам поиск нужного файла.

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

Перевод статьи Tools I wish I had known about when I started coding от Digital Skynet :)

А какими инструментами пользуетесь вы? :)

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Digital Skynet", "author_type": "self", "tags": [], "comments": 9, "likes": 0, "favorites": 1, "is_advertisement": false, "subsite_label": "flood", "id": 43737, "is_wide": false }
00
дни
00
часы
00
мин
00
сек
(function(){ var banner = document.querySelector('.teaserSberbank'); var isAdsDisabled = document.querySelector('noad'); if (!isAdsDisabled){ var countdownTimer = null; var timerItem = document.querySelectorAll('[data-sber-timer]'); var seconds = parseInt('15388' + '59599') - now(); function now(){ return Math.round(new Date().getTime()/1000.0); } function timer() { var days = Math.floor(seconds / 24 / 60 / 60); var hoursLeft = Math.floor((seconds) - (days * 86400)); var hours = Math.floor(hoursLeft / 3600); var minutesLeft = Math.floor((hoursLeft) - (hours * 3600)); var minutes = Math.floor(minutesLeft / 60); var remainingSeconds = seconds % 60; if (days < 10) days = '0' + days; if (hours < 10) hours = '0' + hours; if (minutes < 10) minutes = '0' + minutes; if (remainingSeconds < 10) remainingSeconds = '0' + remainingSeconds; if (seconds <= 0) { clearInterval(countdownTimer); } else { timerItem[0].textContent = days; timerItem[1].textContent = hours; timerItem[2].textContent = minutes; timerItem[3].textContent = remainingSeconds; seconds -= 1; } } timer(); countdownTimer = setInterval(timer, 1000); } else { banner.style.display = 'none'; } })();
{ "id": 43737, "author_id": 187179, "diff_limit": 1000, "urls": {"diff":"\/comments\/43737\/get","add":"\/comments\/43737\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/43737"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199791 }

9 комментариев 9 комм.

Популярные

По порядку

Написать комментарий...
3

создать полезную консоль.журнал() отчетности

Это машинный перевод?

А по сути, vim - наше всё.

Ответить
2

to create useful console.log() statements

Ну, собственно, что и требовалось доказать.

Ответить
0

Гугл и Эппл убегают роняя калл. Как им жить после таких заявлений.
Так, на всякий случай: https://stackoverflow.com/a/11828573

Ответить
0

Я уже прошел этот, а так же уровни с буферами и копипастой.

Ответить
0

vim использую для быстрых правок и ковыряния конфигов на серверах.
Полностью не смог перейти из-за отсутствия качественных автокомплитов и анализаторов кода (пробовал все, включая и для nvim). В итоге для разработки использую IDE от jetbrains.

Редакторы на электроне тоже пробовал, ИМХО это ужас.

Ответить
3

"С помощью этого инструмента вы потратите не больше двух часов."

Гуглтранслейт с хреном тебе в задницу.

Ответить
2

Для просмотра шрифтов есть Fontface Ninja (https://chrome.google.com/webstore/category/extensions?hl=en). Показывает сразу все шрифты со страницы плюс размер, цвет и прочее.

Для просмотра цветов есть InstantEyedropper, по нажатию Alt + ~ позволяет выбрать цвет в любом окне, не только в браузере.

Для удобного регулирования скорости YoTube есть Video Speed Controller (https://chrome.google.com/webstore/detail/video-speed-controller/nffaoalbilbmmfgbnbgppjihopabppdk?hl=en).

Ответить
0

Для просмотра шрифтов есть Fontface Ninja

Ещё для своих целей очень хорош Font Finder (https://chrome.google.com/webstore/detail/font-finder/bhiichidigehdgphoambhjbekalahgha). Название сбивает с толку, правда.
Расширение выводит для выбранного элемента страницы все настройки стиля, касающиеся начертания текста, а заодно и при возможности даёт живую ссылку на шрифт. В общем, помогает найти ответ на вопрос "А как эти ребята добились именно такого отображения текста?"

Ответить
0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Нейронная сеть научилась читать стихи
голосом Пастернака и смотреть в окно на осень
Подписаться на push-уведомления