Kender du det med udokumenteret kode?
765 linjer udokumenteret CSS
Indholdsfortegnelse
Kender du det med udokumenteret kode?
Jeg prøver at lægge en plan for redesign af hjemmesiden. Uden en plan mister jeg overblikket, når siden er så stor.
- Det sjove arbejde er: et eller flere mood boards (I citatet herunder kan du se, hvad et mood board er), farvevalg, leg med Color Wheels osv. Det kan man pusle med en hel dag.
- Det hårde arbejde er:
- Det gamle design inkluderede 765 linjer CSS-kode, jeg med årene har betalt for at få lavet.
- Det er de færreste linjer, der er dokumenterede. Jeg kan meget lidt CSS, så jeg ved ikke, hvad koderne “gør”.
- Nu har jeg simpelthen slettet alle koderne og er begyndt forfra efter selvfølgelig at have sikret dem i et dokument.
- Nogle linjer er dokumenterede, og hvis jeg kan se, jeg skal bruge dem efter redesign, sætter jeg dem naturligvis ind igen. Et eksempel er, at hvis der ikke er en kode, klistrer logoet fast i browserens kant, hvilket ikke er så pænt.
Et mood board er en collage af billeder, tekst, lyd, film. Af stemning, stil, farver, følelser. Moodboarding bruges meget af designere i forskellige brancher. Det er et særdeles nyttigt, kreativt værktøj – også, når du skal lave website. Kilde.
Nu er jeg begyndt selv at skrive kommentarerne, hvis jeg ved, hvad en kode “gør”, hvilket skyldes, at min udvikler har skrevet dokumentation. Jeg skriver dem om, så de er klarere for mig selv:
En dokumenteret kode ser fx sådan ud nu:
/*—————————————–
Logoet rykkes lidt ned fra browserkanten
—————————————– */
.logo img {
padding:30px !important;
}
En udokumenteret kode ser fx sådan ud nu:
/*—————————————–
Noget med MailChimp – men hvad og hvor?
—————————————– */
#mc4wp-form-1 input {
font-size:14px !important;
}
De 765 linjer CSS-kode interfererer muligvis med både temaet og hinanden
Jeg er så irriteret over alle de koder, der måske har betydning nu eller måske ikke har betydning nu. Ingen har kunnet overskue det, så det er tænkeligt, at nogle koder måske endda har overskrevet hinanden. Der er kun én måde at finde ud af det på: fjerne dem alle og dernæst sætte dem ind igen en ad gangen og se, om der er en forskel, der er til at få øje på. Indtil videre har jeg ikke fundet ret mange, der bevirker en synlig ændring, og det vil sige, at de faktisk er overflødige … Jo mindre fikumdik, der er på en side, jo hurtigere vises den på din computer, telefon eller tablet.
Det er naturligt nok, at man med årene får lavet en masse rod og på et tidspunkt må man rydde op. Og det er så det, jeg er gået i gang med. Og jeg elsker jo selvfølgelig at gøre orden, dette er bare lidt rigeligt. Jeg vil have mindst muligt smartness og mest muligt af de standarder, der følger med mit tema.
Nogle mener, at 765 linjer er meget lidt, når de selv har 10.000 linjer, men det kan jeg jo ikke bruge til noget, og i øvrigt kan de så også selv læse dem. Det er en helt anden situation. Nogle mener også, at det tager længere tid at skrive dokumentationen end koden, og det er rigtigt, men i længden havde det været billigere for mig som kunde, da jeg så havde kunnet bruge genbruge koden nu, hvis den er nødvendig. Nogle laver en masse smartness, fordi de er dygtige til det. Jeg er bare nået dertil, hvor jeg ikke længere har behov for det.
Min plan er
- Forsiden er færdig
- Supra-sider er næsten færdige fx »Om Stegemüller« og »Kontakt«.
- Hvad jeg falder over i nyere artikler
- Resten af de 112 sider: 1 eller 2 om dagen. Så er jeg nok færdig om et par år …
Og jeg holder fast i at »Det er kun dig selv, der ved, at der er rod på din hjemmeside«.
Dokumentere beslutninger og fastholde dem
Når man har så stor en side som min, er det utrolig vigtigt at dokumentere sine beslutninger og fastholde dem. Jeg er gået i gang, og foreløbigt ser det ud som følger:
11:03 18. september 2024
Er standard orange god? Ja – har valgt den.
Mobilvenligt!
Link og fed må simpelthen ikke have samme farve!
Vurdere hvilke CSS-koder der skal genbruges.
* Logoet skal stadig rykkes ned
* Kuk i fed skrift og ??
https://www.modularscale.com/
Top-headings til sider (findes som template)
Heading Font Sizes: 40px font
Subheading Font Sizes vha. 1.2 på https://www.modularscale.com/
Basic: 18 px
H6 = 22px
H5 = 26px
H4 = 31px
H2 = 37px
H1 = 45px
Den mørkegrønne: #91974e
Den lysere grønne: #dadcbc
https://www.canva.com/colors/color-wheel/
Den rødlige/orange (fx menu-knapperne:) #c3512f
Komplementær til denne kan evt bruges til fed/strong skrift: #2FA1C3 – men en fed må ikke have farve. Problem: Hvis der ikke er et farvevalg, får fed/strong samme farve som links. Det dur heller ikke. Hvordan klares det?
Historiske emner
Icon box
Display icon above title
Boxed content block with borders
Top til sider efter redesign:
Er lavet som template >
En special heading >
Fx en Heading tekst: Om Stegemüller
Heading Type: H1
Heading Style: Heading Style Modern (centered)
Subheading: Display subheading below
Fx en Subheading text: Præsentation af Stegemüller
Styling >
Font size default: 40px
Subheading Font size: 25
Colors:
Custom Subheading Color: #91974e (den lyse grønne)
Custom Icon Color: #91974e
Spacing: Element Bottom Padding – default setting – used for all screen sizes (no media query): 40px
Advanced: > Her er ikke indsat noget.
Color section:
Udseende:
Section height: No minimum height
Styling:
En background color #dadcbc (den lyse grønne)
Scroll Down Arrow: Valgt til.
Advanced Ingen tilvalg
Har du kommentarer til artiklen?
Så er jeg glad for at modtage dem i relation til artiklen, dvs. i artiklens kommentarfelt herunder, ikke på Facebook og ikke via Messenger. Jeg svarer dig også relation til artiklen, ikke på Facebook og ikke via Messenger. Det skyldes, at kommentarer og artiklen jo ellers dekobles, og så er din kommentar ikke noget værd i fremtiden. Det er ærgerligt for os begge.
Hvis du ikke tidligere har kommenteret en af mine artikler her på siden, skal din kommentar først godkendes (spamhensyn). Min responstid er under normale omstændigheder meget kort. Herefter vil du stryge lige igennem.
Skriv en kommentar
Vil du deltage i debatten?Du er mere end velkommen!