Digitable: Channel

#medium #development #web #css #javascript #devtools #chromium #browsers

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



Лет 6 назад в DevTools можно было увидеть интересную утилиту - Layers (Слои)

1. Открываем DevTools в Chrome, и включаем классический хоткей Ctrl + Shift + P или Command + Shift + P
2. Далее мы видим что-то вроде dmenu/rofi/spotlight и так далее
3. В ней нам интересно вбить "Слои" или "Layers"

На скриншоте пример - слои YouTube

Как это может быть полезно?

Вы понимаете лучше практики по организации масштабов, позиционирования, а также верного направления Ваших компонентов

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

Также Google хочет убрать эту feature в deprecated, поэтому вовремя извлеките её например здесь (https://stackoverflow.com/questions/47558844/is-it-possible-to-see-layers-in-firefox), где чел написал кусок кода для отображения страницы сллоями в Webkit (в комментариях будет код, вставьте в консоль любой вкладки и вертите страницу как хотите)

Подробный гайд по Chrome Layers ещё можно найти тут (на англ.) https://youtu.be/6je49J67TQk

Более подробная статья по коду из комментария тут (на англ.) - https://blog.scottlogic.com/2012/03/09/explodz-a-webkit-dom-visualizer.html

Ставьте Ваши реакции и задавайте вопросы в комментариях, они помогают стать нам лучше! 🙂

#all #development #brew #osx #macos #environment #tty #terminal

Продолжаем публиковать полезные development-инструменты,
На этот раз список утилит для вашего терминала в паре с brew (https://brew.sh/),

Все команды в списке можно установить, используя brew install

- alacritty - gui под ваш терминал, самый кастомизируемый и быстрый в принципе

- mcfly - утилита по навигации в истории шела (Ctrl + R), написана на Rust

- dust - утилита показывает как много пыли в ваших директориях

- duf - расширение классического du (disk usage)

- bpytop - лучший диспетчер задач и процессов, слегка тормозит, написан на Python

- bat - красивый вывод вашего cat

- exa - красивый вывод с иконками для ls, просто используйте его вместо него либо через alias, либо просто exa -ls, шустрый и написан на Rust

- fzf - быстрый поиск по файлам

- ripgrep - будет хоткеем rg, ищет файлы по содержимому контенту

- gping - заменяет классический ping, показывая график просадки трафика

- ncdu - расширенный du (disk usage), позволяет удалять файлы и перемещаться как в классических файловых менеджерах

- podman - внутри еще будет podman-compose, ваш путь (жаль, что от RedHat) в замену Docker и Docker Compose, отличий вы практически не замените, внутри хостит qemu + fedoraos, имеет gui в виде podman-desktop-companion

- procs - ещё один менеджер процессов, только пошустрее, удобная надстройка по отношению к top

- lf - ваш файловый менеджер в терминале с предосмотром файлов, в том числе показывает скрытые файлы и имеет гибкую конфигурационную систему

- sl - паровозик в терминале, куда ж без него

- tabby - карманная LLM внутри вашей системы, можно подключить в vs code, vim и прочие IDE в качестве альтернативы GitHub Copilot, работает шустро, ставится через

brew install tabbyml/tabby/tabby
tabby serve --device metal --model StarCoder-1B

- tree - вывод директорий и их содержимого в древовидной структуре

- lynx - терминальный браузер, получше w3m

- carbonyl - терминальный браузер с рендером в svg, ставится правда через npm - npm i -g carbonyl

- tmux - менеджер окон, можно настроить тайлинг

- git-delta - позволяет перенастроить вывод git diff в удобночитаемый вывод а-ля книжка или cat

- qutebrowser - vim-оподобный браузер

#all #qa #development #environment #applications #chromeextensions

Есть ряд приложений подлежащих установке на Ваш десктоп

- Insomnia - это своего рода postman, только бесплатный; своего рода curl только с gui; своего рода тула для написания автоматических тестов; также имеет встроенную поддержку git-а, умеет генерировать код запросов;

Одна важная деталь - версия, в которой всё хорошо
Ссылка на скачивание: https://github.com/Kong/insomnia/releases/tag/core%402023.5.8

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

- (OS X only) Meeting bar:

Утилита что говорит Вам о ваших митах из всех ваших календарей, можно добавлять множество аккаунтов, просить заранее уведомлять и так далее

Репозиторий: https://github.com/leits/MeetingBar
brew: brew install meetingbar

- (OS X only) UTM:

Поднимаем виртуалки на макбуке или айфоне из любых iso-образов, под капотом qemu, что позволяет выбирать практически любую архитектуру процессоров, запускает и Windows 95, и NetBSD и Windows 11, и Ubuntu и всё что захотите, в том числе кастомные образы

Вебсайт: https://mac.getutm.app
Репозиторий: https://github.com/utmapp/UTM

- Obsidian:

Ваш персональный Notion, который умеет строить mindmap-ы, синкуется с календарем и создаёт мини-википедию на основе ваших заметок

Вебсайт: https://obsidian.md

- Bpytop:

Сколько раз вам приходится вызывать всякого рода диспетчеры задач? Ради этой тулзы не страшно поставить Python.

Она позволяет в достаточно информативном выводе из терминала узнать что реально творится с вашей системой и что она жрёт

Репозиторий: https://github.com/aristocratos/bpytop

- Хром расширения:

1) Stylus, позволит поменять тему на любом вебсайте, к примеру сделать YouTube чёрным или ту же википедию, https://chromewebstore.google.com/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?pli=1

2) Allow CORS, позволит не сталкиваться с траблами CORS при разработке и взаимодействием поверх CORS-ов, так как когда-то году в 21-ом Chrome выпилила флаги позволяющие это всё дело настроить, остаётся только страдать так, https://chromewebstore.google.com/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf

3) JSON viewer, предосмотр json-результатов сразу в браузере, https://chromewebstore.google.com/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh

4) Web Highlights, позволяет выделять текст на любых веб-страницах и сохранять их в едином месте, после вы можете через расширение вернуться к этому куску в любое время без необходимости сохранять страницу в избранное целиком и так далее, удобная штука для заметок https://chromewebstore.google.com/detail/web-highlights-pdf-web-hi/hldjnlbobkdkghfidgoecgmklcemanhm

Что понравилось больше всего из списка и что поставил?
Напиши в комментарий 👇🏻
Что-то хочешь порекомендовать? В комментарии! 👇🏻

#updates

Данное сообщение запрос на интересующие Вас темы, пишите комментарием к данному посту, что бы Вы хотели узнать из мира о разработке ПО

Например:

- Интересует стек - javascript, backend
- Хочу узнать больше про SOLID, GRASP, Patterns GoF
- Как строить архитектуру
- Лучшие практики по CI/CD

Channel name was changed to «Digitable: Channel»

Привет, %username%, здесь ты научишься полному циклу IT / программирования / информатике в циклах разработке ПО (SDLC).

Команда работающая над этим каналом - это ex/workers из Microsoft, Xsolla, Roadmunk, Иннотех, Контур, Akvelon, Авито, НЛМК и прочих

Что тебя ждет:
- Постоянные ссылки на полезные ресурсы, проверенные временем
- Статьи
- Полезные заметки и гайды
- Полный карьерный путь
- Лайфхаки по собеседованиям
- Записи с конференций
- Стримы и видео

Цикл полный, а значит это:
- Аналитика
- Дизайн
- Разработка
- Тестирование
- DevOps/SecOps
- System administration

Подписывайся, задавай вопросы, цифровизация уже здесь)

VK Video: https://vkvideo.ru/@club239193777
VK Group: https://vk.com/digitable_team
Telegram: https://t.me/@digitable_blog
Twitch: https://www.twitch.tv/marat_zimnurov
YouTube: https://www.youtube.com/@the_homeless_god
Max: https://max.ru/id370403695975_biz
TikTok: tiktok.com/@the_homeless_god

Портал, где можно найти наши услуги: https://digitable.ru

Channel photo updated

Channel created