Roine

let isPrintableKey = e.key.length === 1; Support

I have simplified the atomic design with the following decision tree

git branch -a --merged | \
grep -v master | \
grep -v develop | \
grep -v release | \
sed 's/remotes\/origin\//:/' | \
xargs -n 1 git push origin

This command will check all merged branch including remote ones. It’ll then remove any vbranch containing master, develop or release. Strips out remotes/origin and pass it to git push origin.

Let’s say, I created a branch that I called PFS-1, opened a PR and merged it, then the final command executed would be git push origin :PFS-1.

You can generate a type from an object

// base file file.ts
const myObj = {a: 1, b: 2}

in the shell

tsc --declaration file.ts

it’ll generate two files, the compile js file and the type declaration file.

/// type declaration file file.d.ts
declare const myObj: {
    a: number;
    b: number;
};

The JS file can be ignored

Find all the ticket starting by DPO between two commit, it relies on the fact that commits are squashed and the merge message contains the branch name.

git log --oneline 653d7e09d49..master --abbrev-commit | grep -E "DPO-\d+" -o

I often need to prettify a JSON and always end up googling json format online, pasting my JSON and copying the result. With the following alias I can just copy my JSON, type jsonformat in the shell and magic the formatted JSON is in my clipboard.

alias jsonformat="pbpaste | python -m json.tool | pbcopy"

I’ve added colours to Makefiles few times in the past. Each and every single time I have spent way too much time figuring out the code for the colours. So here it is, my most used colours in one place:

COLOUR_GREEN=\033[0;32m
COLOUR_RED=\033[0;31m
COLOUR_BLUE=\033[0;34m
COLOUR_END=\033[0m

Usage:

@echo "$(COLOUR_GREEN)Test Passed$(COLOUR_END)"

More info on stackoverflow.

Cors can be a pain as a frontend developer. Maybe you’re on a localhost and want to access the prod API. The problem is that the prod server enforce same origin request. There are few ways around it, my favourite so far is using a proxy server. Let’s see how CORS work and then how the proxy server solves it.

Imagine we are building an application on localhost and need to access the API in production test.com. We work on some data updating and need to make a POST request, wee write our query and try it. The browser detects that the requested resource is on an other domain than the requester. So before to run our POST request, it runs a preflight request (OPTION) to ask whether the server accepts requests from other origin. If the server says no the POST is not executed. At the moment only browsers enforce CORS rules. What if we could have a server that accepts request from any domain, take a URL and make an http request for us.

TL;DR

Enter cors-anywhere. With it you could query your test.com API like so https://cors-anywhere.herokuapp.com/https://test.com/api/login. No more preflight denying you access. Pretty awesome.

Extra

You might not want to add this everywhere.

if(isProd) {
    const domain =  "/api"
}
else {
    const domain =  "https://cors-anywhere.herokuapp.com/https://test.com/api"
}
fetch(domain + "/login")

Today I was reviewing some ELM code and noticed a nice simple trick that is going to change my life! It has to do with conditional Html.Attributes. Let’s start by how I was doing my conditional Attributes:

[class "hello"] ++ (if bool then [onClick msg] else [])

Pretty ugly, right? Now imagine that I have more than one conditional Attribute.

Enter the empty Attribute.

empty = 
    Html.Attributes.class ""

This blew my mind, how did I never thought of that? It’s so simple and elegant. The code above would then write:

[class "hello", if bool then onClick msg else empty]

To mount a volume that mirrors your files in your host

docker run -p 8080:3000 -v $(pwd):/var/www -w "/var/www" node npm start

• 8080:3000 your app runs in port 3000 and you want it to be served in 8080 in the host, this will forward the port.
• -v $(pwd):/var/www, mounts the current directory /var/www
• -w "/var/www" sets the working directory inside the container to /var/www, so when when we execute our command it’ll execute their
• node name of the image
• npm start our command to be executed in the working directory

So it starts the node container, exposes 8080 and forward 3000 to it. Mount a volume to mirror our local files, sets the working directory where the command will be executed. Finally, execute the command.

If you need the container’s IP

docker inspect -f '{{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}}' container_id

Replace container_id by yours.

I always end up looking for the same Makefile help. I’ll pin it here for convenience.

help: ## This help dialog.
	@IFS=$$'\n' ; \
    help_lines=(`fgrep -h "##" $(MAKEFILE_LIST) | fgrep -v fgrep | sed -e 's/\\$$//' | sed -e 's/##/:/'`); \
    printf "%-30s %s\n" "target" "help" ; \
    printf "%-30s %s\n" "------" "----" ; \
    for help_line in $${help_lines[@]}; do \
        IFS=$$':' ; \
        help_split=($$help_line) ; \
        help_command=`echo $${help_split[0]} | sed -e 's/^ *//' -e 's/ *$$//'` ; \
        help_info=`echo $${help_split[2]} | sed -e 's/^ *//' -e 's/ *$$//'` ; \
        printf '\033[36m'; \
        printf "%-30s %s" $$help_command ; \
        printf '\033[0m'; \
        printf "%s\n" $$help_info; \
done

Analyzing production is hard since it’s most the time compressed and unreadable. One trick you can use is to check all the values attached to the window by the user. This snippet does exctly that, by comparing window to an iframe window:

(function () {
    var results, currentWindow,
    // create an iframe and append to body to load a clean window object
    iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    document.body.appendChild(iframe);
    // get the current list of properties on window
    currentWindow = Object.getOwnPropertyNames(window);
    // filter the list against the properties that exist in the clean window
    results = currentWindow.filter(function(prop) {
        return !iframe.contentWindow.hasOwnProperty(prop);
    });
    // log an array of properties that are different
    console.log(results);
    document.body.removeChild(iframe);
}());

Source: https://stackoverflow.com/questions/17246309/get-all-user-defined-window-properties

If you try to dump an object in a JSON and for some reason want it to be formatted use this snippet

fs.writeFile('manifest.json', JSON.stringify(res, null, 4), 'utf8', (err) => {
  //...
})

This will add jump line and 4 space indentation after each entry

If you want to do something when the viewport reaches a certain element in the view, you would use a scroll event and check that the position of that element is equal to the viewport top position.

You can instead use the IntersectionObserver. You choose a root and target and when they cross path it calls the callback , when root is null then it uses the browser viewport.

const options = {
  root: null, // use browser viewport
  rootMargin: '0px',
  treshold: 0.0
}
const observer = new IntersectionObserver(callback, options)
const target = document.querySelectorAll('#item')
observer.observe(target)

Demo in codepen.

In the world of static file hosting there are plenty of solutions. I picked now.sh. It’s free, easy to use and works well. I have had one problem with now.sh so far, it creates a new URL everytime you push. It’s a feature that I dont need in some cases, here’s how to solve. Put this in package.json:

{
  "scripts": {
    "deploy": "now && now alias && now remove YOUR_APP_NAME --safe -y"
  }
}

Replace YOURAPPNAME by the name of your app. Then go to your now.json and add/change:

{
  "name": "YOUR_APP_NAME",
  "alias": "YOUR_UNIQUE_SUBDOMAIN.now.sh"
}

Replace YOURUNIQUESUBDOMAIN by your unique subdomain. Then, run yarn deploy.

Touch is mainly known for creating files. Touch main purpose is actually to update the file’s timestamp. From the man:

The touch utility sets the modification and access times of files. If any file does not exist, it is created with default permissions.

Using Debug.toString is really helpful to help debug the model but the format of the output is hard to read. Looking for solution I stumbled upon this gem (not the ruby gem). I changed it to work in elm 0.19 and fix a minor issue when using custom type for the Model. Here’s the final result on Gist.

When you need to return more than one element you have few solutions.

Wrap with an element

<div>
  <span>1</span>
  <span>2</span>
</div>

Return a list (requires a key)

function List() {
    return [<span key='1'>1</span>, <span key='2'>2</span>]
}

Use Fragment (16.2.0+)

<Fragment>
  <span>1</span>
  <span>2</span>
</Fragment>

Use empty tag (some kind of alias for Fragment)

<>
  <span>1</span>
  <span>2</span>
</>

If you need to reuse the reuse the last argument from the previous command this is for you:

touch config.js
vi !$

Last command is equivalent to

vi config.js

Bonus: echo $? will display the exit code of therevious command !! will re-execute the previous command, sudo !!

I love calendars and shell has a way to display the calendar for the current month

$ cal