Skip to content

Instantly share code, notes, and snippets.

Fatih Altinok frontsideair

Block or report user

Report or block frontsideair

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@frontsideair
frontsideair / Main.purs
Created May 31, 2020
List members of union in PureScript
View Main.purs
module Main where
import Prelude
import Data.Enum
import Data.Maybe
import Data.List
import Effect
import TryPureScript
@frontsideair
frontsideair / does-your-web-app-work-without-javascript.md
Created Apr 10, 2020
Does your web app work without JavaScript?
View does-your-web-app-work-without-javascript.md

Does your web app work without JavaScript?

I'm currently running an experiment. I'm building a non-trivial web app using JavaScript, which should work with no missing functionality if JavaScript is disabled. That's an undertaking for sure, but it's how it used to be in the olden times. I just wanted to try to build a product using the web fundamentals where JavaScript would only enhance the experience and not be a requirement. Call it graceful degradation taken to the extreme.

How did I do it? My framework of choice was Next.js, which was actually an inspiration to this experiment. With Next.js you make pages using React.js and Next.js handles everything for you. What do I mean by everything? When you make a request to the server, Next.js gathers the required data to render the page and sends the HTML along with the required JavaScript and it is rehydrated on the client. When you navigate to another page, something magical happens. The Next.js runtime actually fetches the scripts required for the navigated

@frontsideair
frontsideair / do-we-really-need-node_modules-or-npm.md
Created Apr 9, 2020
Do we really need `node_modules` or `npm`?
View do-we-really-need-node_modules-or-npm.md

Do we really need node_modules or npm?

I remember thinking that the way we're doing JavaScript is complex but we don't have any choice. What we've been doing for the last few years is that we are downloading a lot of JavaScript modules from npm to ournode_modules folder and we transform and bundle it for browsers using webpack and babel. This was necessary because browsers didn't have support for new features, most importantly module support and sending a lot of separate files to the browser was inefficient, so we transformed and bundlead ahead-of-time.

Now the times are changing. Many popular browsers support the crucial features including module support and HTTP/2 makes it more efficient to send a bunch of files. But we're stuck with the old ways now, and we're paying the price for what made sense at the time. As it turns out putting al your JavaScript in one bundle is not that efficient either, since you're sending non essential code which makes it load and parse slower thus affecting the us

@frontsideair
frontsideair / form.js
Created Mar 12, 2018
Type-safe form validation
View form.js
// @flow
import React, { Component } from "react"
import { isIP, isURL, isEmail, isPort } from "validator"
import { allValid, getErrors } from "./validation"
import { makeAPICall } from "./api"
// a flat data structure for viewing in the UI
type Inputs = {
hasAuth: boolean,
View keybase.md

Keybase proof

I hereby claim:

  • I am frontsideair on github.
  • I am frontsideair (https://keybase.io/frontsideair) on keybase.
  • I have a public key ASAPGnaC_3WM2q986wv9RYI23GHLA7eJVZ11fbdqFt0ylwo

To claim this, I am signing this object:

@frontsideair
frontsideair / _rxjs-ajax.md
Last active Mar 30, 2017
esnextbin sketch
View _rxjs-ajax.md

Enter the username of a Github user to get their full name. Request on keystroke with XHR cancellation instead of debounce, which results in less latency and better user experience. Very simple implementation with RxJS. The magic is the .switch operator.

See live on esnextbin, don't forget to open Network tab in DevTools to see cancellation.

@frontsideair
frontsideair / objects_and_closures.js
Created Mar 2, 2017
Objects and closures are (in some ways) the same thing! (Illustrated in ES6)
View objects_and_closures.js
const obj = { foo: 'bar', baz: 'quux' } // let's define our object
const { foo, baz } = bar // the keys are now in the envorinment!
const hello = 'world' // hello is defined in our environment
const newObj = { hello } // and now it's captured in our object!
@frontsideair
frontsideair / comma-operator-push-pop.js
Created Jan 3, 2017
Simple implementation of push/pop with comma operator, function scope
View comma-operator-push-pop.js
const pop = (arr, tmp) => (tmp = arr.slice(0), tmp.pop(), tmp)
const push = (arr, item, tmp) => (tmp = arr.slice(0), tmp.push(item), tmp)
// Can you see why and how this works? Does it really? Can you guess if it's pure or impure?
// Does it modify any of its arguments, or pollute global scope?
@frontsideair
frontsideair / copy-no-flash-test.md
Last active Feb 7, 2017
Test case for copying test with native APIs. (Works on latest Chrome, Firefox, Safari.)
View copy-no-flash-test.md

Test case for copying test with native APIs. (Works on latest Chrome, Firefox, Safari.)

made with esnextbin

You can’t perform that action at this time.