Please download to get full document.

View again

of 43

Making of Kit.nl

1. the making of kit.nl @LucP WP Meetup Eindhoven 25 februari 2019 Image: KIT 2. Heb je zin om van zeven WordPress sites één WordPress site te maken? -…
0 views43 pages
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Documenttranscript
  • 1. the making of kit.nl @LucP WP Meetup Eindhoven 25 februari 2019 Image: KIT
  • 2. "Heb je zin om van zeven WordPress sites één WordPress site te maken?" - Peter van Grieken, Maart 2018 @LucP
  • 3. @LucP Image: Wikimedia Commons December 2018
  • 4. Koninklijk 
 Instituut voor de Tropen - Research - Training & coaching - Development programs - Studies & Scholarships - Conferences & Events @LucP
  • 5. @LucP Image: Wikimedia Commons Gutenberg
  • 6. @LucP Image: Wikimedia Commons@LucP Image: Vidar Nordli-Mathisen,
 Unsplash Accessible
  • 7. Dus: - Gigantische content uitdaging - Gigantische backend uitdaging - Gigantische frontend uitdaging - Gigantische interne uitdaging - AUB nét na de vakantie live 😬 @LucP
  • 8. "Yikes" - Luc Princen, April 2018 @LucP Image: Caitlin Russell "Coolcoolcool!"
  • 9. "Wat verwachten we aan problemen tegen te gaan komen?" @LucP
  • 10. @LucP
  • 11. Accessibility Gutenberg @LucP
  • 12. Accessibility Gutenberg @LucP
  • 13. Blind 78.000 Slechtziend 238.000 Kleurenblind 700.000 Doof en slechthorend 1.300.000 Fysieke beperking 1.500.000 Dyslexie 825.000 Laaggeletterd 1.500.000 Totaal 4.000.000 @LucP Image: Ian, Unsplash
  • 14. Lees baar heid @LucP Image: Elijah O'Donnell Leesbaarheid
  • 15. More about us More about us Huisstijl Website Contrast @LucP
  • 16. Semantische HTML VS @LucP <div class="flex-md-row mb-4 shadow-sm h-md-250"> ...content </div> <section class="overview overview--news"> ...content </section> VS
  • 17. Schaalbaarheid @LucP text-format +175%
  • 18. Leesbaarheid: - Kleurcontrast - Formaat & schaalbaarheid - Semantische HTML - ALT-tags - Content @LucP
  • 19. @LucP Image: Tyler Lastovich Gebruikers- gemak
  • 20. Skiplinks @LucP
  • 21. Lees meer... VS @LucP Lees Meer <a href="#" class="read-more button"> Read more </a> <a href="#" class="read-more button"> Read more 
 <span class="visuallyhidden">about <?php the_title(); </a> VS
  • 22. Focus states @LucP
  • 23. Nifty Stuff @LucP @media (prefers-color-scheme: dark) { color: $color-offwhite; } /* MacOS dark-mode support: */ if( isset( $_SERVER['HTTP_DNT'] ){ return $_SERVER['HTTP_DNT']; } /* Do Not Track mode support: */ &
  • 24. Gebruikersgemak - Skiplinks - "Lees meer..." - Focus-states - Do Not Track & Dark mode - Laadtijd @LucP
  • 25. Google Lighthouse meting, 6-11-2018@LucP Resultaat:
  • 26. Accessibility Gutenberg @LucP
  • 27. BLOCK! BLOCK! BLOCK! BLOCK! BLOCK! BLOCK! BLOCK! @LucP
  • 28. Drie keer raden... @LucP
  • 29. BLOCK! BLOCK! BLOCK! Yep! @LucP
  • 30. Seperation Of Concerns @LucP Data Vorm Functie
  • 31. WordPress @LucP Data Vorm Functie 😕
  • 32. Gutenberg @LucP Data Vorm Functie (Backend, want React)
  • 33. Custom Blocks KIT page-break container intro links hero subtitle home-intro read-more related collection staff-collection staff-publications publications collection-filter studies-collection vacancies-collection expert service publication contact partners testimonials media checklist room-layout room-specs possibility-block banner faq-list taxonomy-menu page-menu sidebar text-button @LucP
  • 34. @LucP Seperation Of Concerns?
  • 35. BLOCK! BLOCK! BLOCK! BLOCK! BLOCK! BLOCK! BLOCK! @LucP
  • 36. Gutenberg frontend: @LucP (Frontend) - Weinig query-opties (alles in één table cell) - Data + templates door elkaar - Veel backend errors @LucP
  • 37. Layout Areas @LucP Main content Sidebar right Sidebar left Related posts
  • 38. @LucP HTML Parser: Kit:Container InnerBlocks: WP:heading WP:linklist Title Links Link Link Link Link
  • 39. HTML: <aside>
 
 Sidebar <section>
 Tekst <article> Content <header>
 titel + intro <footer>
 related +
 further links <section> <section> <section> <section> <footer> (page) <header> @LucP
  • 40. Layouts @LucP Post-type, voor herhalende elementen.
 
 Opgehaald in één query Cookie melding Header Footer Search Filter 404 links
  • 41. @LucP Resultaat: Data Vorm Functie Custom database column Maatwerk WP template Gutenberg Parser
  • 42. @LucP Resultaat: Data Vorm Functie Makkelijke queries 100% themable Volledige controle
  • 43. Danku! @LucP Zijn er nog vragen? Image: KIT
  • Advertisement
    MostRelated
    View more
    We Need Your Support
    Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

    Thanks to everyone for your continued support.

    No, Thanks
    SAVE OUR EARTH

    We need your sign to support Project to invent "SMART AND CONTROLLABLE REFLECTIVE BALLOONS" to cover the Sun and Save Our Earth.

    More details...

    Sign Now!

    We are very appreciated for your Prompt Action!

    x