Skip to content

Instantly share code, notes, and snippets.

View Uzwername's full-sized avatar

Uzwername

3 followers · 0 following
View GitHub Profile
@Uzwername
Uzwername / index.ejs
Last active August 23, 2020 17:33
HtmlWebpackPlugin - First attempt
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Handling script loading errors with HtmlWebpackPlugin</title>
</head>
<body>
<h1 id="content"></h1>
<script>
@Uzwername
Uzwername / index.ejs
Last active August 27, 2020 00:33
HtmlWebpackPlugin - Second attempt
<script>
(function(){
function showErrorPage() {
// Doesn't matter for now
}
window.addEventListener('DOMContentLoaded', function() {
var appScript = document.querySelector('script[src^="bundle"]');
appScript.addEventListener('error', showErrorPage);
});
@Uzwername
Uzwername / webpack.config.js
Created August 23, 2020 18:03
HtmlWebpackPlugin - config step 1
plugins: [
new HtmlWebpackPlugin({
inject: false
})
]
@Uzwername
Uzwername / index.ejs
Last active August 23, 2020 19:06
HtmlWebpackPlugin - config step 2
<script>
(function() {
function showErrorMessage() {
alert('Oops, something went wrong! Please reload the page.');
}
// Paths of all bundles
var bundlesSrcs = <%= JSON.stringify(htmlWebpackPlugin.files.js) %>;
for(var i=0; i < bundlesSrcs.length; i++) {
// Create script tag & configure it
@Uzwername
Uzwername / webpack.config.js
Created August 23, 2020 19:19
HtmlWebpackPlugin - Bonus, step 1
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/i,
loader: 'file-loader'
}
]
}
@Uzwername
Uzwername / index.ejs
Created August 23, 2020 19:24
HtmlWebpackPlugin - Bonus, full index.ejs
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Handling script loading errors with HtmlWebpackPlugin</title>
<style>
html, body, h1 {
padding: 0;
margin: 0;
@Uzwername
Uzwername / App.js
Last active August 28, 2020 11:12
Functions vs. Components - App.js
const App = () => {
const [total, setTotal] = useState(0);
const incrementTotal = () => setTotal(currentTotal => currentTotal + 1);
return (
<div className="App">
<div>
<h4>Total Clicks: {total}</h4>
</div>
<div className="CountersContainer">
@Uzwername
Uzwername / App.js
Created August 27, 2020 21:17
Functions vs. Components - App.js with description
const App = () => {
const [total, setTotal] = useState(0);
const incrementTotal = () => setTotal((currentTotal) => currentTotal + 1);
const Description = () => (
<p>
I like coding counters!
Sum of all counters is now {total}
</p>
);
@Uzwername
Uzwername / App.js
Created August 27, 2020 21:19
Functions vs. Components - App.js with description, CounterWithWeekday & a bug
const App = () => {
const [total, setTotal] = useState(0);
const incrementTotal = () => setTotal((currentTotal) => currentTotal + 1);
const Description = () => (
<p>I like coding counters! Sum of all counters is now {total}</p>
);
const CounterWithWeekday = (props) => {
let today;
switch (new Date().getDay()) {
case 0:
@Uzwername
Uzwername / plain-recursion-basic-for-loop.js
Last active March 21, 2021 02:01
// A magical structure that repeats whatever
// we need to repeat an arbitrary number of times
// ⬇️
for (let i = 0; i <= 10; i++) {
console.log(i); // ⬅️ procedure to repeat
}