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ą.