GS500 The Coder: 2022

10/5/22

Getting started with docker

It is very simple to get started usig docker.
All you need to do-is download the docker desktop for your system
Once you get docker system running on your machine - you can start containers


docker run -d -p 80:80 docker/getting-started

Now you can see "docker/getting-started" container running on your machine

9/17/22

how to fetch data at nextJS

well - main thing application should do - is to display data.
so, you can fetch data from external source very simple:


export const getStaticProps = async () => {
  const res = await fetch(`https://jsonplaceholder.typicode.com/users`)
  const users = await res.json();
  return {
    props: { users }
  }
}

export default function Home({ users }) {
  return <div>{users.map(({id, name}) => <div key={id}>{name}</div>)}</div>
}

The difference here - is that now you have no 'loading' time when page is empty.
That is because data loading happens on the server side

9/15/22

Some post about nextJs framework

Grate thing about this framework is that you can write the whole applicaiton using react on client and server side:
Hows that possible? you may ask
Thing is - the nextJs is first of all, nodejs application, and node uses same javascript language for writing api and also for write views. Views can be html and also they can include javascript, and in case of nextJs - they also include react.
So, how to start use it?
All you need to do for starting a nextJs project is to write following command in your terminal:


npx create-next-app my-mynext-app

after installation finished, navigate to app folder and run


npm run dev

browse to http://localhost:3000 and see your app is runing now!
The main advantage of nextJs framework is - SEO.
crawler can access pages more easily than at classic react app.
notice: you page already has react component:


export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Welcome</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title} onClick={() => alert('hi')}>
          Welcome!!!
        </h1>
      </main>
    </div>
    )
}

you can click on the title and see 'alert' appears

6/1/22

movies autocomplete exercise

At one of my interviews a was asked to create autocomplete that search movies and displays results.
I quickly created some input that handles changes and populates the state with the input:


export default function App() {
  const [term, setTerm] = useState("");
  useEffect(() => {
    // request logic...
  }, [term])
  return (
    <div className="App">
      <h1>
        <input
          onChange={(e) => setTerm(e.target.value)}
        />
      </h1>
      <h2>Term: {term}
    </div>
  );
}

the problem here, that changes populated imediately. and request sent for every character...
This can lead to performance issues and also - it is not exactly what user wants - he wants to start search after he finished to type the term...

Debounce

Instead we can take advantage of so called - debounce technique:
This means we only startnig the search after we indicated that user finished typing
If no typing happened for some period (one second in our case) only then we send a search request:


let debounceTimer;

const debounce = (callback, time) => {
  window.clearTimeout(debounceTimer);
  debounceTimer = window.setTimeout(callback, time);
};
export default function App() {
  const [term, setTerm] = useState("");
  useEffect(() => {
    // request logic...
  }, [term])
  return (
    <div className="App">
      <h1>
        <input
          onChange={(e) => debounce(() => {
           setTerm(e.target.value), 1000)}
          }
        />
      </h1>
      <h2>Term: {term}
    </div>
  );
}

5/23/22

Something about unit testing - After more than year!

It is importnat to understand what is a purpose of a unit test...
the prupose is to check only things that module (or component) is responsible of
example: if you have a toggle component like here:
code:


export function Toggle() {
  return (
    <label className="switch" role="toggle">
      <input type="checkbox" role="hidden-input" />
      <span className="slider round" />
    </label>
  );
}

you need to ask yourself: what is this thing responsible of? is it repsonsble for display nice slider and hide the real simple checkbox?
the answer is "yes", and this is exactly the thing you need to test: