Webdev w 2020 roku

Na początku marca kupiłem nowy sprzęt do codziennej pracy przy Webdev, który należało skonfigurować. Postanowiłem przygotować małą ściągawkę dla siebie i udostępnić ją światu. Kto wie, może akurat komuś pomoże.

Nowy sprzęt do Webdev

Nowy nabytek to biznesowy HP ProBook 455R G6 z 32GB RAM ↗ oraz Ryzenem 7 na pokładzie. Jest to pierwszy mój sprzęt od kilkudziesięciu lat z AMD na pokładzie - dotąd dominował Intel ze swoimi układami iX-YYY.

Obawiałem się powrotu do AMD, ale po ponad miesiącu pracy na nowym sprzęcie okazało się, że niepotrzebnie. Działa dużo szybciej niż wysłużony już ASUS PRO ↗ (również biznesowa linia), ekran rewelacyjny, bardzo dobra kultura pracy no i wreszcie - nie ma problemów z WiFi.

Windows 10 jako głowny system Webdev

Dlaczego Windows 10? Bo go lubię i nawet działa bardzo stabilnie (przez ostatnie 5 lat miałem raptem 4, a może 5 BSOD), co zresztą opisałem w 2016 roku ↗. Dalej uważam, że przy dzisiejszym webdevelopmencie, nie ma znaczenia, na jakim systemie operacyjnym pracujesz, bo i tak do dyspozycji masz praktycznie wszystkie narzędzie.

Dodatkowo od kilku lat MS rozwija ciekawy projekt - WSL - co zdecydowanie ułatwia pracę. Odpada konieczność posiadania drogiego MacOS, środowisko można oprzeć na kontenerach (docker), a NodeJS, Python czy PHP z powodzeniem mają windowsowe instalki.

WSL 2.0

Szerzej o WSL wspomniałem już w 2018 roku ↗ w kontekście ZSH i dzięki temu miałem okazję obserwować, jak się rozwija ten projekt.

Na ten moment na produkcję wjechała wersja WSL 2, która przez dłuższy czas była dostępna w ramach programu Windows Insider (kanał Slow Ring). W połowie marca była już w normalnej dystrybucji.

Oprócz wbudowanego i zoptymalizowanego dla Windowsa kernela, szybszych operacji na plikach, przynosi jeszcze większe integracje z systemem (procesy, aplikacje odpalane z unix’owej konsoli), z VS Code, a nawet z Dockerem ↗.

A co takiego pod WSL mam zainstalowane?

Przede wszystkim

• NodeJS (via NVM ↗),
• PHP + NGNIX.
• SlimZSH ↗ - lżejsza wersja OhhMyZSH ↗, stworzona przez Polaka oraz rekomendowana przez Hello Roman ↗

Chocolatey

Jedynej rzeczy ze świata linuksowego brakowało - porządnego menadżera paczek - który pozwoliłby na instalacje aplikacji za pomocą jednego polecenia.

Od lat rozwija się windowsowy odpowiednik: Chocolatey, ale od początku sprawiał problemy - głównie ze względu na uprawnienia administratorskie. Na służbowym sprzęcie musiałem zapomnieć o tym, ale mając do dyspozycji już własny sprzęt, mogłem na nowo zaprzyjaźnić się z tym menadżerem. O kilka lat za późno.

Użycie poniższej komendy

choco install git vscode nodejs spotify wox chrome microsoft-windows-terminal cascadiacode 7zip vlc /y

pozwoliło mi zaoszczędzić mnóstwo czasu na ściągnięciu i instalacji potrzebnych programów. Warto przejrzeć repozytorium paczek ↗.

Na marginesie, MS pracuje nad własnym managerem ↗ paczek WinGet (Windows Package Manager) i wtedy pozostaje pytanie: co z chocolatey, które jako pierwsze zaistniało na tej platformie?

Aplikacje

Poniżej wyróżniam kilka aplikacji, z których korzystam:

• VS Code ↗ - domyślny IDE dla mojego środowiska programistycznego (głównie NodeJS/HTML/CSS, ale też i PHP)
• MultiCommander ↗ - darmowy odpowiednik TotalCommandera
• Toggl - do mierzenia czasu
• Trello ↗ / Todoist ↗ - Zarządzanie zadaniami w stylu listy oraz tablicy kanbanowej
• Notion - następca Evernote, co już opisałem
• Wox ↗ - launcher, taki windowsowy odpowiednik Alfreda - dotąd używałem Listary, ale niestety mocno niestabilny
• KeepassXC ↗ - z końcem zeszłego roku wróciłem do sprawdzonego managera haseł
• GOW ↗ - zestaw 130 uniksowych poleceń w wersji dla Windows (tu Was zaskoczę, bo dużo szybciej pracuje mi się z tymi komendami niż stricte PowerShellowymi)
• Typora ↗ - edytor markdown (świetna alternatywa)
• HeidiSQL ↗ - prosty klient do MySQL (przydatne, jeśli mamy dockerowego MySQL bez PMA)
• MS Terminal ↗ - w końcu porządny terminal, który można odpowiednio odpicować
• Fluent ↗ - ciekawa alternatywa wobec klasycznego PowerShella oraz CMD

Na liście są tzw. reflinki, dzięki którym zarówno Ty jak i Ja możemy skorzystać.

Przykładowe konfiguracje

MS Terminal Preview (gist ↗)

VS code

• motyw: Night Owl ↗
• ikonki: VSCode Icons ↗

Konfiguracja:

code --list-extensions | % { "code --install-extension $_" }
code --install-extension alefragnani.Bookmarks
code --install-extension alefragnani.project-manager
code --install-extension alexdima.copy-relative-path
code --install-extension anseki.vscode-color
code --install-extension bceskavich.theme-dracula-at-night
code --install-extension bmewburn.vscode-intelephense-client
code --install-extension christian-kohler.npm-intellisense
code --install-extension christian-kohler.path-intellisense
code --install-extension chrmarti.regex
code --install-extension CoenraadS.bracket-pair-colorizer
code --install-extension cssho.vscode-svgviewer
code --install-extension DavidAnson.vscode-markdownlint
code --install-extension deerawan.vscode-faker
code --install-extension donjayamanne.githistory
code --install-extension donjayamanne.jquerysnippets
code --install-extension dracula-theme.theme-dracula
code --install-extension dsznajder.es7-react-js-snippets
code --install-extension dzannotti.vscode-babel-coloring
code --install-extension eamodio.gitlens
code --install-extension ecmel.vscode-html-css
code --install-extension EditorConfig.EditorConfig
code --install-extension eg2.vscode-npm-script
code --install-extension EQuimper.react-native-react-redux
code --install-extension ergenekonyigit.oceanic-next-bimbo
code --install-extension esbenp.prettier-vscode
code --install-extension fiazluthfi.bulma-snippets
code --install-extension formulahendry.auto-close-tag
code --install-extension formulahendry.auto-rename-tag
code --install-extension fosshaas.fontsize-shortcuts
code --install-extension foxundermoon.shell-format
code --install-extension goessner.mdmath
code --install-extension Gruntfuggly.todo-tree
code --install-extension hnw.vscode-auto-open-markdown-preview
code --install-extension IBM.output-colorizer
code --install-extension imperez.smarty
code --install-extension jock.svg
code --install-extension joelday.docthis
code --install-extension kisstkondoros.vscode-codemetrics
code --install-extension kumar-harsh.graphql-for-vscode
code --install-extension mblode.twig-language-2
code --install-extension mechatroner.rainbow-csv
code --install-extension mikestead.dotenv
code --install-extension mkoeppen.generate-data
code --install-extension ms-vscode-remote.remote-wsl
code --install-extension msjsdiag.debugger-for-chrome
code --install-extension naumovs.color-highlight
code --install-extension patbenatar.advanced-new-file
code --install-extension PKief.material-icon-theme
code --install-extension pnp.polacode
code --install-extension pranaygp.vscode-css-peek
code --install-extension Prisma.vscode-graphql
code --install-extension qinjia.seti-icons
code --install-extension ritwickdey.LiveServer
code --install-extension Rubymaniac.vscode-paste-and-indent
code --install-extension sdras.night-owl
code --install-extension Shan.code-settings-sync
code --install-extension shardulm94.trailing-spaces
code --install-extension spmeesseman.vscode-taskexplorer
code --install-extension spywhere.guides
code --install-extension syler.sass-indented
code --install-extension vscode-icons-team.vscode-icons
code --install-extension waderyan.gitblame
code --install-extension wayou.vscode-todo-highlight
code --install-extension wesbos.theme-cobalt2
code --install-extension wix.vscode-import-cost
code --install-extension xabikos.JavaScriptSnippets
code --install-extension yzhang.markdown-all-in-one

Webdev w 2015 roku

Zajrzałem do archiwum bloga i znalazłem notatkę ↗ o podobnym brzmieniu i też z podobnych przyczyn ona powstała. Upgrade laptopa (z R580 na Asus Pro).

https://bobiko.blog/2015/10/zestaw-web-narzedzi-w-2015/ ↗

Sporo zmian technologicznych zaszło w ostatnich 5 lat, ulepszone workflow … ale też nieco większy poziom komplikacji w developmencie, zwłaszcza we frontendzie. Nowe frameworki, nowe standardy, nowe obszary odpowiedzialności (zwłaszcza warstwa biznesowa etc).

Podsumowanie

Zastanawiałem się nad utworzeniem oddzielnego konta admina i zwykłego usera, ale przy mojej pracy, zwłaszcza że jestem jedynym użytkownikiem, wydaje się to być trochę nonsensem.

Pozostaje kwestia prywatności w systemie Windows 10 i zgodnie z rekomendacjami, większość powyłączałem.

Czemu wybrałem lapka z Windowsem 10 Pro na pokładzie? Przede wszystkim ze względu ekonomicznego (sorry 8k za podstawową wersję MBP?) oraz z przyzwyczajenia do okienkowej wersji systemu, który zmienił się na przestrzeni ostatniej dekady.

PS: Wpis będę na bieżąco uzupełniał o nowe pozycje, informacje. Niech inni z tego korzystają.