Skip to content

Instantly share code, notes, and snippets.

View r3dm1ke's full-sized avatar
🎯
Before software can be reusable it first has to be usable.

Michael Krasnov r3dm1ke

🎯
Before software can be reusable it first has to be usable.
18 followers · 4 following
View GitHub Profile
@r3dm1ke
r3dm1ke / App.js
Last active March 6, 2020 18:11
// EXAMPLE WITH CONTEXT + REDUCER
import React, {useContext, useReducer} from 'react';
const AppContext = React.createContext(null);
const ContextProvider = ({children}) => {
const reducer = (state, action) => {
switch (action.type) {
@r3dm1ke
r3dm1ke / App.js
Last active March 6, 2020 18:10
// EXAMPLE WITH CONTEXT
import React, {useContext, useState} from 'react';
const AppContext = React.createContext(null);
const ContextProvider = ({children}) => {
const [counter, setCounter] = useState(0);
const contextValue = {
counter,
@r3dm1ke
r3dm1ke / index.html
Created March 4, 2020 17:35
<!doctype html>
<html class="no-js" lang="" xmlns:x-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>AlpineJS Todo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.js" defer></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
@r3dm1ke
r3dm1ke / Todo.pas
Created March 3, 2020 19:55
program Todo;
{$mode objfpc}
uses
JS, Classes, SysUtils, Web;
type
task = record
name: String;
@r3dm1ke
r3dm1ke / index.html
Created February 27, 2020 18:37
<div x-data="{password: ''}">
<input x-model="password" placeholder="Enter your password" />
<p x-show="password === 'abacaba'">Access granted</p>
<p x-show="password !== 'abacaba'">Access denied</p>
</div>
@r3dm1ke
r3dm1ke / App.js
Created February 27, 2020 18:34
import React, {useState} from 'react';
function App() {
const [password, setPassword] = useState('');
return (
<>
<input
placeholder='Enter the password'
value={password}
@r3dm1ke
r3dm1ke / index.html
Created February 27, 2020 18:31
<div x-init="console.log('this runs when component is mounted')">
<button @click="console.log('this runs when button is clicked')">
Click me
</button>
</div>
@r3dm1ke
r3dm1ke / App.js
Last active February 27, 2020 18:32
import React, {useEffect} from 'react';
function App() {
useEffect(() => {
console.log('this will output when app loads');
}, []);
return (
<button onClick={console.log('this will output when button is clicked')}>
Click me
@r3dm1ke
r3dm1ke / index.html
Created February 27, 2020 18:28
<div x-data="{name: ''}">
<input x-model="name" />
<p>Hello, <span x-text="name" /></p>
</div>
@r3dm1ke
r3dm1ke / App.js
Created February 27, 2020 18:24
import React, {useState} from 'react';
function App() {
const [name, setName] = useState('');
return (
<>
<input value={name} onChange={e => setName(e.target.value)} />
<p>Hello, {name}</>
</>