Andre Vermeulen avermeulen

## WebDevBeyondTheSourceTag.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                avermeulen
                / WebDevBeyondTheSourceTag.md
            
            
              Last active
              October 27, 2023 15:49
            
          
    Web development beyond the src tag

Using ES6 modules in the browser.
So far you have used modules import/export in NodeJS and in the front-end you have used script tags to import your source code.
You can actually use modules in your front end code. And frameworks like ReactJS & VueJS are heavily using that.
To do that though you will need a tool that convert the JavaScript that is using modules into JavaScript that can be executed
in the browser.

  
## students.js
const students = [
  { name: 'Ethan', subject: 'History', score: 85, grade: 10 },
  { name: 'Mia', subject: 'Physical Sciences', score: 92, grade: 12 },
  { name: 'Lucas', subject: 'Life Sciences', score: 88, grade: 11 },
  { name: 'Avery', subject: 'Geography', score: 90, grade: 9 },
  { name: 'Lila', subject: 'English', score: 94, grade: 11 },
  { name: 'Benjamin', subject: 'Maths', score: 87, grade: 12 },
  { name: 'Nora', subject: 'History', score: 82, grade: 10 },
  { name: 'Alexander', subject: 'Physical Sciences', score: 88, grade: 9 },
  { name: 'Grace', subject: 'Life Sciences', score: 90, grade: 11 },

## AlpineJSwithViteJS.md

      
              1 file
            
          
              3 forks
            
          
              6 comments
            
          
              12 stars
            
          
                avermeulen
                / AlpineJSwithViteJS.md
            
            
              Last active
              July 31, 2024 14:29
                — forked from Pholisa-Fatyela/AlpineJSwithViteJS.md
            
          
    AlpineJS with ViteJS

ViteJS is a modern JavaScript build tool that can be used to build modern JavaScript frameworks including ReactJS and VueJS to name only two. In this tutorial you will explore how to use ViteJS with AlpineJS. This will prepare you for using ViteJS with ReactJS or other modern web framework.
Modern JavaScript built tools like ViteJS, ParcelJS & react-create-app (built with webpack) embrace ES Modules. Meaning that external dependencies are installed via npm and imported. So no more script, style or link tags. HTML, CSS & JavaScript are  bundled into compact bundle.
Create app using Vite

Let's start exploring ViteJS by creating a new application. Using this command:

  
## Electricity-app.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                avermeulen
                / Electricity-app.md
            
            
              Last active
              January 18, 2022 13:05
                — forked from Unalo/Electricity-app.md
            
          
    Elastic Electricity App

Create a web app, to help your local Municipality to track electricity usage per household. Each month the Municipality gives each household's 50 units each for free. Households can topup if they need extra electricity.
As you use appliances, your units will drop accordingly.
If the units per household is equal or below 30, add a class warning into your current units.
In your app you must have the following.

  
## Eslint.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                avermeulen
                / Eslint.md
            
            
              Last active
              March 30, 2021 10:33
                — forked from Unalo/Eslint.md
            
          
    Using ESLint with VS Code

ESLint is a tool for “linting” your code. It analyze your code and warn you of potential errors.
Installing ESLint

In order for it to work, you need to configure it with specific rules. Luckily it provides an ESLint configuration that anyone can use.

To use ESLint you will need to install Node.js


## spark-session.java
get("/login", (req, res) -> {
	// create route  that render a login screen
});

get("/logout", (req, res) -> {
	// or see how to destroy the session
	request.session().removeAttribute("username"); // Remove session attribute 'user'
	res.redirect("/login");
});

## A.)_BuildingBlocks.md

      
              5 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                avermeulen
                / A.)_BuildingBlocks.md
            
            
              Last active
              September 16, 2020 08:57
            
              
                Java OCA preperations, tips and tricks
              
          
    Building blocks

To pass the OCA exam your really need to know these Java concepts.

Classes & Interfaces

methods on classes
the affect of access modifiers on classes
the affect of interfaces on classes
class constructors


## todo.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                avermeulen
                / todo.md
            
            
              Created
              April 3, 2020 06:08
            
          
    Todos

Things to look into

https://www.apollographql.com/docs/link/links/context/ - storing a token Apollo GraphQL client.


## CalculateCost.java
package cost;

public class CalculateCost {

	// calculate the sms cost
	public static double smsCost(int qty) {
		return 65 * qty;
	}

	// calculate the call cost

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="counter"></div>
  <input type="text" class="name" pattern="^[A-Za-z]*" >
	const students = [
	{ name: 'Ethan', subject: 'History', score: 85, grade: 10 },
	{ name: 'Mia', subject: 'Physical Sciences', score: 92, grade: 12 },
	{ name: 'Lucas', subject: 'Life Sciences', score: 88, grade: 11 },
	{ name: 'Avery', subject: 'Geography', score: 90, grade: 9 },
	{ name: 'Lila', subject: 'English', score: 94, grade: 11 },
	{ name: 'Benjamin', subject: 'Maths', score: 87, grade: 12 },
	{ name: 'Nora', subject: 'History', score: 82, grade: 10 },
	{ name: 'Alexander', subject: 'Physical Sciences', score: 88, grade: 9 },
	{ name: 'Grace', subject: 'Life Sciences', score: 90, grade: 11 },
	get("/login", (req, res) -> {
	// create route that render a login screen
	});

	get("/logout", (req, res) -> {
	// or see how to destroy the session
	request.session().removeAttribute("username"); // Remove session attribute 'user'
	res.redirect("/login");
	});
	package cost;

	public class CalculateCost {

	// calculate the sms cost
	public static double smsCost(int qty) {
	return 65 * qty;
	}

	// calculate the call cost
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	</head>
	<body>
	<div class="counter"></div>
	<input type="text" class="name" pattern="^[A-Za-z]*" >