Antonija Šimić tonkec

## fc.ts
type FC<P = {}> = FunctionComponent<P>;

interface FunctionComponent<P = {}> {
    (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
    propTypes?: WeakValidationMap<P> | undefined;
    contextTypes?: ValidationMap<any> | undefined;
    defaultProps?: Partial<P> | undefined;
    displayName?: string | undefined;
}

## index.jsx
import React, { useRef, useEffect } from 'react';
import p5 from 'p5';

function Game() {
    const audioRef = useRef(new Audio('/path/to/your/audio/file.mp3'));
    let audioButton;

    useEffect(() => {
        // Using p5.js to create the audio toggle button
        const sketch = (p) => {

## index.html
<html>
    <head>
        <title>Nasa prva web stranica</title>
    </head>
    <body>
        <h1> Moj prvi heading. </h1>
        <h2> Moj drugi heading. </h2>
    </body>
</html>

## es6_syntax_sugars.js
//why is es6 important
/*

  lots of syntax sugar
  faster solutions
  cleaner solutions

*/

// arrow functions

## ideas_for_meetups.md

      
              1 file
            
          
              0 forks
            
          
                0 comments
              
            
              0 stars
            
          
                tonkec
                / ideas_for_meetups.md
            
            
              Created
              April 9, 2019 08:56
            
              
                Ideas for scss meetups (https://www.meetup.com/S_CSS_Zagreb/)
              
          
Centering 101

vertical and horizontal centering in any situation


Import vs link
flexbox vs grid
Pseudo elements

what, how and why


bem vs. smacss
oocss
Intro to Bulma
family.scss and other cool libraries


## Filter.js
import React from 'react';

const KeywordHighlighter = (props) => {
  const allowedKeywords = ["dosage", "happy", "sunny"]; // just some random words that would be highlighted
  const filteredKeywords = allowedKeywords.filter((word) => props.value.includes(word));
  return (
    <div>
      <textarea
        type="text"
        name="keyword"

## step4.js
const incrementCount = ( {incrementBy = 1 } = {} ) => {
 return {
   type: 'INCREMENT',
   incrementBy
 }
}

## step3.js
const incrementCount = ( {incrementBy = 1 } = {} ) => {
 console.log(incrementBy) // propery on the payload object
 /*
  payload = {
    incrementBy: 5
  }
 */
 return {
   type: 'INCREMENT',
   incrementBy: incrementBy

## step2.js
const incrementCount = ( {incrementBy} = {} ) => {
 console.log(incrementBy) // propery on the payload object
 /*
  payload = {
    incrementBy: 5
  }
 */
 return {
   type: 'INCREMENT',
   incrementBy: typeof incrementBy === "number" ? incrementBy : 1

## step1.js
// action generator returns action object!!
const incrementCount = ( payload = {} ) => {
// if payload doesn't exist it defaults to {}
// calling property on undefined object will throw an error
// payload is an object passed to incrementCount
 return {
   // returns new action object!
   type: 'INCREMENT',
   incrementBy: typeof payload.incrementBy === "number" ? payload.incrementBy : 1
 }
	type FC<P = {}> = FunctionComponent<P>;

	interface FunctionComponent<P = {}> {
	(props: PropsWithChildren<P>, context?: any): ReactElement<any, any> \| null;
	propTypes?: WeakValidationMap<P> \| undefined;
	contextTypes?: ValidationMap<any> \| undefined;
	defaultProps?: Partial<P> \| undefined;
	displayName?: string \| undefined;
	}
	import React, { useRef, useEffect } from 'react';
	import p5 from 'p5';

	function Game() {
	const audioRef = useRef(new Audio('/path/to/your/audio/file.mp3'));
	let audioButton;

	useEffect(() => {
	// Using p5.js to create the audio toggle button
	const sketch = (p) => {
	<html>
	<head>
	<title>Nasa prva web stranica</title>
	</head>
	<body>
	<h1> Moj prvi heading. </h1>
	<h2> Moj drugi heading. </h2>
	</body>
	</html>
	//why is es6 important
	/*

	lots of syntax sugar
	faster solutions
	cleaner solutions

	*/

	// arrow functions
	import React from 'react';

	const KeywordHighlighter = (props) => {
	const allowedKeywords = ["dosage", "happy", "sunny"]; // just some random words that would be highlighted
	const filteredKeywords = allowedKeywords.filter((word) => props.value.includes(word));
	return (
	<div>
	<textarea
	type="text"
	name="keyword"
	const incrementCount = ( {incrementBy = 1 } = {} ) => {
	return {
	type: 'INCREMENT',
	incrementBy
	}
	}
	const incrementCount = ( {incrementBy = 1 } = {} ) => {
	console.log(incrementBy) // propery on the payload object
	/*
	payload = {
	incrementBy: 5
	}
	*/
	return {
	type: 'INCREMENT',
	incrementBy: incrementBy
	const incrementCount = ( {incrementBy} = {} ) => {
	console.log(incrementBy) // propery on the payload object
	/*
	payload = {
	incrementBy: 5
	}
	*/
	return {
	type: 'INCREMENT',
	incrementBy: typeof incrementBy === "number" ? incrementBy : 1
	// action generator returns action object!!
	const incrementCount = ( payload = {} ) => {
	// if payload doesn't exist it defaults to {}
	// calling property on undefined object will throw an error
	// payload is an object passed to incrementCount
	return {
	// returns new action object!
	type: 'INCREMENT',
	incrementBy: typeof payload.incrementBy === "number" ? payload.incrementBy : 1
	}