Index

Informatie over Web Development

  • HTML5
  • CSS
  • React.js
  • Javascript/Typescript
  • Github
  • Kotlin
  • GraphQL/RESTful
  • Gradle/NPM
  • Microsoft Certified: Azure Developer Associate

Voor het ontwikkelen van een website maakt Marc Houben gebruik van HTML, CSS, JavaScript, PHP en React.

Algemeen

HTML_TAILWIND_SYSTEM_PROMPT = """
You are an expert Tailwind developer
You take screenshots of a reference web page from the user, and then build single page apps
using Tailwind, HTML and JS.
You might also be given a screenshot of a web page that you have already built, and asked to
update it to look more like the reference image.

- Make sure the app looks exactly like the screenshot.
- Pay close attention to background color, text color, font size, font family,
padding, margin, border, etc. Match the colors and sizes exactly.
- Use the exact text from the screenshot.
- Do not add comments in the code such as "Add other navigation links as needed" and "other news items" in place of writing the full code. WRITE THE FULL CODE.
- Repeat elements as needed to match the screenshot. For example, if there are 15 items, the code should have 15 items. DO NOT LEAVE comments like "Repeat for each news item" or bad things will happen.
- For images, use placeholder images from https://placehold.co and include a detailed description of the image in the alt text so that an image generation AI can generate the image later.

In terms of libraries,

- Use this script to include Tailwind: script src="https://cdn.tailwindcss.com"
- You can use Google Fonts
- Font Awesome for icons: link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"

Return only the full code in html/html tags.
Do not include markdown "```" or "```html" at the start or end.
"""

HTML

CSS

JavaScript

Typescript

Github

  • Proces voor software ontwikkeling, toevoegen aan main branch
  • Stap 1: Zorg dat je in de hoofd branch van het project zit (middelste knop bovenaan in Github Desktop moet staan op branch genaamd “Main”)
  • Stap 2: Zorg ervoor dat je de laatste changes hebt opgehaald van de online Git repository door op de knop “Fetch Origin” te klikken.
  • Stap 3: Voor de implenetatie van een neiwue feature maken we een nieuwe branch aan. Dat doen we door op de branch main te klikken, en vervolgens op de knop New branch te klikken.
  • Stap 4: Geef de nieuwe branch een naam die omschrijft wat de feature is die je gaat implementeren ( bijv xml-improvement)
  • Stap 5: Klik op create branch
  • Stap 6: Klik op bring my changes to xml improvement
  • Stap 7: Klik voordat je begint met programmeren op de knop Publish branch, om online ervoor te zorgen dat deze aftakking (branch) ook bestaat.
  • Stap 8: Begin met het doorvoeren van aanpassingen aan je source code.
  • Stap 9: Maak een commit door een title te geven aan de commit (links onder in Github Desktop) en klik op “Commit”.
  • Stap 10: Klik daarna op push rechtsbovenin om de commit te sturen naar de online Git repository.
  • Stap 11: Maak een pull request van de toegevoegde functionaliteit (verzoek tot toevoegen aan hoofd aftakking) door op de blauwe knop “Create pull request” te klikken.
  • Stap 12: Een browser venster opent. Geef de pull request een naam en klik vervolgens op “Create pull request”.
  • Stap 13: Ga als reviewer naar de Github website en review de pull request. Bij akkoord klik “Approve”
  • Stap 14: Merge de pull request door op de Github website op Merge te klikken (selecteer squash and merge), en klik confirm.
  • Stap 15: Vergeet niet de bestaande branch te delete door op de knop “Delete branch te klikken” (branch is niet meer nodig omdat de logica nu in de main branch zit).
  • Stap 16: Open github desktop opnieuw en klik bij branch op main om terug te keren naar de main branch.
  • Stap 17: Ververs de main branch door op fetch te klikken en daarna op pull te klikken.
  • Stap 18: Ga terug naar stap 1

Kotlin

PHP

React

Add React in One Minute

This page demonstrates using React with no build tooling.

React is loaded as a script tag.

Modern Web Development Architecture & Best Practices

Contemporary web development requires comprehensive understanding of modern architectural patterns including microservices architecture, serverless computing, and JAMstack methodologies for optimal performance and scalability. Technical implementation involves advanced JavaScript frameworks like React, Vue.js, and Angular with sophisticated state management solutions including Redux, Vuex, and NgRx for complex application development. Backend development encompasses Node.js server architecture, Express.js middleware implementation, and RESTful API design principles with GraphQL integration for efficient data fetching and manipulation strategies.

Professional web development practices include comprehensive testing frameworks utilizing Jest, Cypress, and Playwright for automated testing pipelines, continuous integration and deployment workflows through GitHub Actions, Jenkins, and Azure DevOps platforms. Performance optimization strategies encompass code splitting, lazy loading implementation, progressive web app development, and advanced caching mechanisms for enhanced user experience. Security considerations include HTTPS implementation, CSRF protection, XSS prevention, and authentication systems using JWT tokens and OAuth protocols for secure user management.

Full-stack development expertise encompasses database design and optimization using PostgreSQL, MongoDB, and Redis for efficient data storage and retrieval systems. Cloud deployment strategies include containerization with Docker, Kubernetes orchestration, and cloud platform integration through AWS, Azure, and Google Cloud Platform services. Development workflows incorporate version control best practices, code review processes, documentation standards, and accessibility compliance ensuring inclusive web applications that meet WCAG guidelines and modern web standards for optimal user experience across diverse audiences.