siakaramalegos

2020-11-24T19:42:19.111Z Eleventy Directories:
Input: .
Data: _data
Includes: _includes
Layouts: undefined
Output: _site
Template Formats: html,njk
Verbose Output: false
2020-11-24T19:42:19.140Z Eleventy:EleventyFiles Searching for: [ './**/*.html', './**/*.njk', '!./_site/**', '!./node_modules/**', '!./package-lock.json', '!./.DS_Store', '!./.netlify/**', '!./_site/**', '!./_includes/**', '!./_data/**' ]
2020-11-24T19:42:19.147Z Eleventy:TemplateWriter Found: [ './src/index.html', './src/_includes/layout.njk' ]

siakaramalegos

CHOOSE-A-TRON

A Pen by Sia Karamalegos on CodePen.

Thanks to Gant Laborde for the project idea!

License.

siakaramalegos

Vintage Bundles, aka Modern JavaScript for Modern Browsers

Web performance matters. From SEO to bottom-line revenue impacts, performance can make or break your app. However, fixing performance feels like a quagmire of expert-level topics. What if I told you JavaScript bundle sizes could be cut up to 50% by doing one thing only? Nearly 90% of web traffic runs on modern browsers, but we're transpiling all of our JavaScript to ES5. That’s expensive. In this talk, we'll learn about differential serving, or serving both modern bundles and legacy bundles using webpack. This talk is framework agnostic, and best if you have at least a basic understanding of JavaScript.

Slides and Controls

The slides are deployed here. To advance the slides, use n for next and p for previous. The right arrow jumps to the next section (and left for previous section). Up and down to advance through slides within a section.

Articles and research/tests

• [Deploying ES2015+ Co

siakaramalegos

Dev.to API summary for possible Bridgy integration

Contents

• No Auth Required
  • GET an article by ID
  • GET a comment by ID
• Requires a token
  • GET all articles of a user

It looks like reactions calls are limited to creating and "onboarding". More here: forem/forem#4474.

siakaramalegos

Testing double-fetching of module/nomodule JS code (including the Safari hack)

<script type="module" src="module.js"></script>
<script nomodule src="nomodule.js"></script>

Test page: https://jg-testpage.github.io/es-modules/module-nomodule/

|IE/Edge|Firefox|Chrome|Safari |fetches module|fetches nomodule|executes| |

siakaramalegos

Next-level React Workshop: React Router, Redux and more

This is a full-day workshop on intermediate to advanced topics on building real-world ReactJS Web applications. We will start by learning about the core fundamentals of Redux including pure functions, actions, reducers, the store, and subscriptions. Then we will integration Redux into a React app, learning about components vs containers, accessing the store, async actions, middleware, and thunks. Next, we will layer in React Router 4, learning about params, queries, and redirects; prompt before navigation, and scrollToTop.

Time permitting and based on audience preferences, we can learn about using component libraries, styling, forms and validations, and more!

siakaramalegos

import React, { Component } from 'react'
// Import the serialize function from the form-serialize package
import serialize from 'form-serialize'

export default class UncontrolledSerialized extends Component {
  onSubmit = (e) => {
    e.preventDefault()
    // Usually, we would pass the final input values to a function that
    // would do something with the data like persist it to a database.
    // Using serialization, we just need to pass that function the

siakaramalegos

<link rel="preload" as="font" type="font/woff2" 
  href="./fonts/muli-v12-latin-regular.woff2" crossorigin>

<link rel="preload" as="font" type="font/woff2" 
  href="./fonts/muli-v12-latin-700.woff2" crossorigin>

siakaramalegos

<link href="https://fonts.googleapis.com/css?family=Muli:400" rel="stylesheet">

siakaramalegos

/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0bf8pkAg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}