Skip to content

Instantly share code, notes, and snippets.

Avatar
🎯
Focusing

Andre andrelandgraf

🎯
Focusing
View GitHub Profile
@andrelandgraf
andrelandgraf / sitemap.js
Last active Jul 6, 2021
sitemap.xml generator for react-router (remix.run)
View sitemap.js
// based on Next.js sitemap.xml generator: https://medium.com/spemer/creating-a-sitemap-generator-for-next-js-3102fb5a297e
const fs = require('fs');
const globby = require('globby');
const prettier = require('prettier');
const getDate = new Date().toISOString();
const YOUR_AWESOME_DOMAIN = 'https://yourdomain.cool';
const formatted = (sitemap) => prettier.format(sitemap, { parser: 'html' });
@andrelandgraf
andrelandgraf / useErrorNotifications.tsx
Last active Jul 6, 2021
Communication of status / errors codes between client and server via URLSearchParams
View useErrorNotifications.tsx
import { useCallback, useEffect } from 'react';
import { useSearchParams } from 'react-router-dom';
export default function useErrorNotifications() {
const { pushNotification } = useContext(NotificationsContext);
const [searchParams, setSearchParams] = useSearchParams();
const errorCode = searchParams.get('error');
const onClose = useCallback(() => {
searchParams.delete('error');
@andrelandgraf
andrelandgraf / form.tsx
Last active Jul 6, 2021
working with URLSearchParams in remix.run
View form.tsx
import { Form as RemixForm } from 'remix';
import type { FC } from 'react';
import type { FormProps, Request } from 'remix';
type FormReqBody = { method: 'get' | 'post' | 'put' | 'delete' } & Record<string, string>;
export async function parseURLSearchParams(request: Request): Promise<Partial<FormReqBody>>;
export async function parseURLSearchParams<ReqBody>(request: Request): Promise<Partial<ReqBody & FormReqBody>>;
@andrelandgraf
andrelandgraf / index.js
Last active Jul 29, 2018
working over arrays with for loops in js
View index.js
// summarized and added comments, original source: https://es6.io/ course by Wes Bos
// messing with the prototype
Array.prototype.myFunction = function(){
// add some array functionality
};
// initialising our array
const names = ["Alice", "Foo", "Bar", "Jon Doe"];
// adding some further properties
@andrelandgraf
andrelandgraf / index.js
Last active Jul 30, 2018
working with function expressions and chaining of promises
View index.js
/*
* working with resolve()
*/
const doSomethingChained = (name) => {
console.log('1');
return new Promise((resolve, reject) => setTimeout(() => {console.log(name); resolve();}, 1500, name));
};
doSomethingChained('Alice').then(() => {
console.log('2');
@andrelandgraf
andrelandgraf / index.js
Last active Jul 29, 2018
working with async await
View index.js
/**
* implementing return value of setTimeout() from callback to promise
* @param ms
* @returns {Promise<function>}
*/
const sleep = function (ms) {
// 4.) task 1: we create a new promise and call setTimeout(),
// set timeout creates a new taks 2 that will run after taks 1 has finished & 1500 milliseconds have passed
// new Promise(function(resolve, reject) { ... });
return new Promise(resolve => {
@andrelandgraf
andrelandgraf / index.js
Created Jul 29, 2018
timeout and the event loop
View index.js
/*
* what happens if task 1 takes longer than 1500 milliseconds to be executed? Does task 2 has to wait?
*/
function doSomethingLonger(name, callback){
// 2.) task 1: we execute console.log('1');
console.log('1');
// 3.) task 1: we execute setTimeout. Set timeout creates a new task (task 2) that will be executed in 1500 milliseconds from now on
setTimeout(callback, 1500, name);
// 4.) task 1: we execute console.log('2');
while(true);
@andrelandgraf
andrelandgraf / index.js
Last active Jul 29, 2018
working with the js event loop
View index.js
// timeouts are handy to fake async calls
// setTimeout(callback function, 1500 /*milliseconds*/, 'parameters');
function doSomething(name, callback){
// 2.) task 1: we execute console.log('1');
console.log('1');
// 3.) task 1: we execute setTimeout. Set timeout creates a new task (task 2) that will be executed in 1500 milliseconds from now on
setTimeout(callback, 1500, name);
// 4.) task 1: we execute console.log('2');
console.log('2');
}
@andrelandgraf
andrelandgraf / index.js
Last active Jul 29, 2018
working with var vs let in for loops
View index.js
// the scope of a let variable is the current block scope
// the scope of a var variable is the current function scope (if there is no function, than the scope is global)
// using var in this example will execute the loop and compute var i to the value 10
// than the timeout callbacks will callback one after the other and access i which is globally set to 10
for(var i = 0; i < 10; i++){
setTimeout(function () {
console.log(i);
}, 1500, i);
}
@andrelandgraf
andrelandgraf / index.js
Created Jul 29, 2018
Using String.prototype.includes() in a case insensitive way
View index.js
const myString = "Foo Bar";
const needle = "fOO";
let isCaseInsensitive = myString.includes(needle)); // => isCaseInsensitive is false
isCaseInsensitive = myString.toUpperCase().includes(needle.toUpperCase()); // => isCaseInsensitive is true