rizalibnu’s gists

rizalibnu / image.hbs

Created October 15, 2025 19:01

Reusable image template for Ghost themes

	{{!--
	Reusable image template for Ghost themes
	Params:
	- src (required)
	- alt (optional)
	- class (optional)
	- loading (optional)
	- sizes (optional)
	- default_src_size (optional, defaults to "xl")
	- width / height (optional)

rizalibnu / learnfullstackjs.md

Created December 24, 2023 14:41

BELAJAR FULL STACK JAVASCRIPT DEVELOPER DARI SKO.DEV

FULL STACK JAVASCRIPT DEVELOPER TRACK

rizalibnu / App.tsx

Created December 15, 2023 06:15

React Swiper Web Component with Typescript

	import { Swiper, SwiperSlide } from 'path/to/Swiper.tsx';

	export default function App() {
	return (
	<Swiper
	slidesPerView={3}
	breakpoints={{ 768: { slidesPerView: 4 } }}
	on={{
	slideChange: () => console.log('slide changed'),
	progress: (s, progress) => console.log(`progress is ${progress}`),

rizalibnu / SlickSlider.tsx

Last active December 15, 2023 06:17

React slick typescript workaround for issue changing slide works incorrect when infinite is false and initialSlide > 1

	import * as React from 'react';
	import {default as SlickSlider} from 'react-slick';

	interface Props extends React.ComponentProps<typeof SlickSlider> {
	ref?: React.MutableRefObject<SlickSlider \| null>;
	}

	const Slider = (props: Props) => {
	const {initialSlide} = props;
	const fallbackSliderRef = React.useRef<SlickSlider \| null>(null);

rizalibnu / gist:200763dd66f75746a83d1fec1d444068

Created April 11, 2023 12:49 — forked from Yasir5247/gist:58866e4fc269b124bcf11c8aa3cd4921

apolloClient

	import {ApolloClient, HttpLink, from, fromPromise} from '@apollo/client';
	import {setContext} from '@apollo/client/link/context';
	import {RetryLink} from '@apollo/client/link/retry';
	import {onError} from '@apollo/client/link/error';

	import {refresh} from 'react-native-app-auth';
	import AsyncStorage from '@react-native-async-storage/async-storage';

	import {getTokenSync, getToken} from '../../utils/getToken';
	import {test_config, prod_config} from '../../utils/efaasConfig';

rizalibnu / useSearchParams.js

Created January 3, 2022 13:47

react router v5 useSearchParams

	import * as React from 'react';
	import {useLocation, useHistory} from 'react-router-dom';

	export const createSearchParams = (init = '') =>
	new URLSearchParams(
	typeof init === 'string' \|\|
	Array.isArray(init) \|\|
	init instanceof URLSearchParams
	? init
	: Object.keys(init).reduce((memo, key) => {

rizalibnu / service-worker.js

Created October 15, 2020 09:32 — forked from jeffposnick/service-worker.js

Example of InjectManifest in Workbox v5

	// Add any other logic here as needed.

	import { CacheableResponsePlugin } from 'workbox-cacheable-response/CacheableResponsePlugin';
	import { CacheFirst } from 'workbox-strategies/CacheFirst';
	import { createHandlerForURL } from 'workbox-precaching/createHandlerForURL';
	import { ExpirationPlugin } from 'workbox-expiration/ExpirationPlugin';
	import { NavigationRoute } from 'workbox-routing/NavigationRoute';
	import { precacheAndRoute } from 'workbox-precaching/precacheAndRoute';
	import { registerRoute } from 'workbox-routing/registerRoute';

rizalibnu / simulate.js

Created September 21, 2020 14:54 — forked from cs09g/simulate.js

Mouse/Touch Event Simulation

	/**
	* @desc It triggers mouse event.
	* @param {HTMLElement} element target DOM element
	* @param {string} type type of event
	* @param {number} x clientX of event
	* @param {number} y clientY of event
	*/
	export function simulateEvent(element, type, x, y) {
	const mouseEvent = new MouseEvent(type, {
	screenX: 0,

rizalibnu / checkerboard-background.css

Created July 13, 2020 17:24

CSS Checkerboard Background

	.checkerboard-background {
	background-image: linear-gradient(45deg, rgba(192, 192, 192, 0.75) 25%, transparent 25%), linear-gradient(-45deg, rgba(192, 192, 192, 0.75) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(192, 192, 192, 0.75) 75%), linear-gradient(-45deg, transparent 75%, rgba(192, 192, 192, 0.75) 75%);
	background-size: 20px 20px;
	background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
	}

rizalibnu / bash_script_with_parameters_manual_loop.sh

Created July 11, 2020 15:39

Example of Bash Script with Parameters use Manual Loop

	#!/bin/bash

	helpFunction()
	{
	echo ""
	echo "Usage: $0 -a parameterA -b parameterB -c parameterC"
	echo -e "\t-a\|--flagA Description of what is parameterA"
	echo -e "\t-b\|--flagB Description of what is parameterB"
	echo -e "\t-c\|--flagC Description of what is parameterC"
	exit 1 # Exit script after printing help

Rizal Ibnu rizalibnu