Skip to content

Instantly share code, notes, and snippets.

View siakaramalegos's full-sized avatar
🦄

Sia siakaramalegos

🦄
370 followers · 91 following
View GitHub Profile
@siakaramalegos
siakaramalegos / dino-name-pixlr.js
Created October 18, 2018 19:11
Dino game plus name and twitter handle
/* HOW TO USE:
* Enter your name below in 2 lines, where it says `NAME = `
* If you have a battery in the Pixl, remove it
* Add the battery while holding down Pixl's top left button
* Wait for the bootloader bar to go to the end, and hold down
even when told to release.
* Only release when the test fails and it says 'Erasing Saved Code'
* You now have a 100% blank Pixl.js
* Click the connect icon in the top left of the IDE
@siakaramalegos
siakaramalegos / future_performance.md
Last active October 4, 2022 19:08
The Future of Front-End Performance

The Future of Front-End Performance

Help! My app bundle is 5MB! My users are angry that my app is so slow! It’s easy to forget that performance matters when we are under pressure to deliver features quickly. What data should we use to inform our decisions? From code splitting, lazy loading, and tree shaking to bundle analysis, progressive rendering, and modern transpiling, come learn how you can deliver a better experience to your users with high-performing front-end apps. This talk is library-agnostic (React, Angular, Vue, etc.).

The most recent version of the slides for this talk are here on SpeakerDeck (from RWX2018).

You can watch the video from Full Stack Fest in Barcelona here:

<a href="http://www.youtube.com/watch?feature=player_embedded&v=SA_Hp8l7lr4 " target="_blank">

@siakaramalegos
siakaramalegos / custom_timings.html
Created August 30, 2018 07:44
Custom timings demo from Harry Roberts
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Blocking</title>
<script>
performance.mark('startAsyncSnippet');
console.timeStamp('startAsyncSnippet');
var script = document.createElement('script');
@siakaramalegos
siakaramalegos / gatsby-node.js
Last active August 21, 2018 21:07
Disable source maps in production build using Gatsby v2
exports.onCreateWebpackConfig = ({ actions, stage }) => {
// If production JavaScript and CSS build
if (stage === 'build-javascript') {
// Turn off source maps
actions.setWebpackConfig({
devtool: false,
})
}
};
@siakaramalegos
siakaramalegos / MyComponent.js
Last active April 3, 2018 15:26
refactor of slack stuff
class MyComponent extends Component {
render() {
const cards = this.props.data.map(card => (
<Card card={card} key={card.id} />
))
return (
<div style={contentStyles.root}>
{cards}
</div>
@siakaramalegos
siakaramalegos / next-level-react.md
Last active August 7, 2019 08:29
Next-level React Workshop

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
siakaramalegos / Timer.js
Created March 11, 2018 20:55
Countdown timer component using requestAnimationFrame
class Timer extends Component {
constructor(props) {
super(props)
// here, getTimeRemaining is a helper function that returns an
// object with { total, seconds, minutes, hours, days }
this.state = { timeLeft: getTimeRemaining(props.expiresAt) }
}
// Wait until the component has mounted to start the animation frame
componentDidMount() {
@siakaramalegos
siakaramalegos / CreditCardElement.js
Last active March 1, 2018 22:38
Displaying Card Errors with React Stripe Elements
import React, { Component } from 'react';
import { CardElement } from 'react-stripe-elements';
import isEmpty from 'lodash/isEmpty';
class CreditCardInput extends Component {
constructor() {
super()
this.state = { error: undefined }
}
@siakaramalegos
siakaramalegos / performance_matters.md
Last active March 23, 2018 20:33
Performance Matters slides and resources

Performance Matters

The slides from my talk are here on SpeakerDeck.

Want to check out some cool links and resources too? Here you go:

@siakaramalegos
siakaramalegos / favicons.html
Created February 2, 2018 17:00
Head links for favicons
<!-- Favicons -->
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">