Artiklen er opdateret den: 21. januar 2025
I dette blogindlæg deler jeg de programmer og online tjenester, der er essentielle i mit daglige arbejde med at kode og designe WordPress hjemmesider.
Denne liste er dynamisk og bliver løbende opdateret, i takt med at jeg opdager nye værktøjer eller udskifter eksisterende programmer på min Mac.
Designfasen
I mange tilfælde designer jeg som webdesigner direkte i browseren med Google Chrome, Visual Studio Code og CodeKit, som automatisk genindlæser siden, når jeg gemmer min kode. Dette workflow gør det muligt at kombinere kodning og design i én flydende proces.
Fordelen: Kodning og design sker samtidig, hvilket skaber en hurtig og effektiv arbejdsgang.
Ulempen: Koden dikterer desværre ofte designet, og jeg kan utilsigtet ende med at gentage visuelle løsninger fra nogle af mine tidligere webprojekter.
Når jeg som webdesigner ønsker at arbejde mere frit og kreativt, skifter jeg til Affinity Designer 2, der giver mig større fleksibilitet og mulighed for at eksperimentere. Det er eksempelvis meget nemmere for mig at skifte placering på elementer og afprøve “skøre” ideer som faktisk ofte kan lede til noget brugbart!
Affinity Designer 2 er et alsidigt design program, der kombinerer vektor- og pixel-baserede værktøjer i én løsning. Det er hurtigt, præcist og perfekt til alt fra logoer og illustrationer til web- og app-design.
Programmet har en intuitiv brugerflade og kræver kun engangsbetaling, hvilket gør det til et populært alternativ til Adobe Illustrator som jeg tidligere har benyttet.
Jeg bruger det til at skabe kreative designs uden at være begrænset af kodning.
Farvevalget tager ofte sit udgangspunkt i kundens logo eller trykte pr. materiale.
Her er https://mycolor.space/ et vigtigt redskab for mig.
ColorSpace er et online værktøj, der automatisk genererer farvepaletter og gradienter ud fra en valgfri farve. Det er perfekt til webdesign, grafisk design og branding, hvor harmoniske farvekombinationer er afgørende. Værktøjet er nemt at bruge og giver inspiration til farveskemaer på få sekunder.
Billedbehandling
Når jeg behandler billeder til mine kunders hjemmesider, bruger jeg Affinity Photo 2. Programmet gør det nemt at forbedre farver, beskære billeder og konvertere dem til formater som WebP eller SVG – formater, jeg ofte benytter for at optimere billeder til en hurtig page load.
Affinity Photo 2 er et professionelt billedbehandlingsprogram, der tilbyder avancerede værktøjer til redigering, retouchering og manipulation af billeder. Med sin intuitive grænseflade og kraftfulde funktioner som lag, masker og filtre er det ideelt til både fotografering og webdesign.
Programmet understøtter en bred vifte af formater, herunder WebP og SVG som jeg mest benytter.
Kodning
Når jeg udvikler WordPress-temaer, bruger jeg fire programmer samtidig for at optimere min arbejdsproces: VS Code, CodeKit, MAMP PRO og Google Chrome med dens udviklerværktøjer.
VS Code fungerer som min primære kode-editor, hvor jeg skriver PHP, HTML, SCSS og JavaScript.
CodeKit hjælper med at kompilere SCSS til CSS, komprimere både CSS og JavaScript samt tilføje de nødvendige prefix til ældre browsere. Derudover sikrer CodeKit automatisk “browser-refreshing”, så jeg kan se opdateringer både på min computerskærm og min telefon i realtid.
MAMP PRO giver mig mulighed for at have både en database og PHP kørende direkte på min Mac, hvilket gør det muligt at udvikle WordPress-hjemmesider lokalt uden behov for en ekstern webserver.
For at teste og se resultatet af min kodning benytter jeg Google Chrome, Firefox Developer Edition og Safari, som giver mig forskellige perspektiver på, hvordan min kode ser ud og fungerer på tværs af browsere.
Visual Studio Code er en populær og kraftfuld kode-editor, der understøtter flere programmeringssprog som PHP, HTML, SCSS og JavaScript. Den er let at tilpasse med plugins og udvidelser og har en brugervenlig grænseflade, der gør kodning mere effektiv.
CodeKit er et værktøj, der automatiserer webudvikling ved at kompilere SCSS til CSS, komprimere filer og tilføje browser-prefikser. Det sikrer også “browser-refreshing”, så ændringer vises øjeblikkeligt både på desktop og mobil. Perfekt til at optimere din workflow.
MAMP PRO er en lokal serverløsning, der giver dig mulighed for at udvikle og teste WordPress-websteder på din Mac uden at skulle bruge en ekstern webserver. Den inkluderer både en database og PHP, hvilket gør det muligt at køre en fuldt funktionel WordPress-installation lokalt.
Google Chrome er en af de mest populære webbrowsere og et uundværligt værktøj for udviklere. Med dens indbyggede udviklerværktøjer (DevTools) kan du inspicere, debugge og teste din kode i realtid, hvilket gør det lettere at rette fejl og optimere hjemmesider.
Lokalt til server
Når koden er skrevet og klar, skal filerne overføres fra min Mac til webserveren. Som webdesigner bruger jeg ofte GitHub og GitHub Desktop til at uploade filerne. Ved at bruge GitHub kan jeg nemt overføre opdateringer til en WordPress-hjemmeside via plugin’et WP Pusher. Denne metode gør det muligt for mig at udføre løbende forbedringer og sikre, at hjemmesiderne altid er opdaterede – både for mig og mine kunder.
En alternativ metode til at overføre filer fra lokal udvikling til serveren er FTP, og her bruger jeg FileZilla til at håndtere filoverførslerne hurtigt og effektivt.
GitHub Desktop er et brugervenligt program, der gør det nemt at arbejde med Git-repositories uden at bruge kommandolinjen. Det hjælper med at versionere og synkronisere filer mellem din lokale maskine og GitHub, hvilket gør det ideelt til udvikling og samarbejde om kode.
FileZilla er en populær og effektiv FTP-klient, der bruges til at overføre filer mellem din lokale computer og en webserver. Den understøtter både FTP, FTPS og SFTP, hvilket gør den til et pålideligt værktøj til at uploade, downloade og administrere filer på servere.