Notes and anecdotes

Techstuff rambling

Creating a Google Chrome Extension

I’ve heard multiple say that creating a chrome extension is about as easy as creating a static web page. Is it really? Here’s a step-by-step on how I created my first Trello-integrated chrome extension, almost like a simple and developer-friendly version of Momentum.

Prettier Javascript

A side note: A-Prettier-Formatter should be read. And if you’re using Javascript, Prettier should be tested (especially if you’re using JSX). Because Eslint made the world a better place, but Prettier could make the lint warnings go away entirely, while keeping everyone happy. Thumbs up!

Porting a React app to Phonegap

If you already have a React web app, and consider porting it to a proper phone app, you should consider using React Native. However, you could also use PhoneGap/Cordova, which is done in a heartbeat: How?

ES6 notes

A summary of the key takeaways from CodeSchools “ES2015: The Shape of JavaScript to Come”.

Javascripts var, let, and const

Remember var from the ES5 and previously? It had this weird thing, where JavaScript would move the declaration to the top of the function behind the scenes, called hoisting. Usually no one noticed, but once in a while it would create a bug that could be hard to spot.

Converting SVG to PNG with Javascript cross browser

I promise I tried to do it with client-side Javascript only. And I promise I won’t try again before 2020. Google returns so many optimistic answers, that on the bottom has a disclaimer: “This does not work with Safari”, or “This crashes IE9”, or just no disclaimer. But don’t believe  them: It can’t be done. JUST…

Continue Reading

D3 + article combo ideas

The national budget illustrated with d3. There’s so much quantitative, hierarchical delicious graphable data in the budget, and it’s a document that deserves more attention than it gets. Illustrate it intuitively with d3.js, and you’ve done the world a favor. What’s up with the economy? (in d3) I realised that an increase in automation by introducing computers…

Continue Reading

React intro notes

A handful notes from the React intro tutorial (which is available at https://facebook.github.io/react/docs/tutorial.html).

Finding Javascript memory leaks with Chrome Developer tools

Check out http://discover-devtools.codeschool.com/chapters/7/ for an interactive video on this topic.

Profiling JavaScript in Chrome Developer Tools

Open devtools Select Profiles Select Collect JavaScript CPU Profile Click Start Do the (typically slow) things you wish to record Click Stop You now got a table of functions, and CPU time they consumed. On the right hand side of the table, you got a link to the js file and its line number of the function that is…

Continue Reading

Chromes Awesome Developer Tools

Here is a great talk about them Chrome tools. You can emulate reduced network speed You can emulate other device You can force states (:active etc) for elements You can smartprint objects You can group console logging You can time sections of the code or timestamp all logging You can insert debugger stops debugger; You can…

Continue Reading

Parallax. CSS it, please.

Parallax is hot. But in so many implementations, it’s not. Because it’s implemented shittily. Parallax shouldn’t be done with Javascript, because then it might end up like this: so laggy it breaks my heart. It should be done with CSS. Jsfiddle  

Sending and receiving JSON over Bluetooth

I’m new to the whole Bluetooth communication game, but in my case I’ve run into having to communicate using 8-bit usigned integer arrays (I’ve used Cordova libraries to communicate with Arduino chips). In order to do this I’ve had to convert from and to JSON structures on the Cordova side. I’ve done this with the…

Continue Reading

jquery confirm modal using bootstrap

This little JavaScript snippet lets you easily decide (from another javascript function) to show a confirm-dialog (Bootstrap), and functions to be executed on cancel/confirm. Check it out at https://gist.github.com/tomfa/12bf7651d6a346eb2942 Want one made for submit-buttons, link etc? See http://www.petefreitag.com/item/809.cfm

Using FreshDesk API

After starting to write this note, I realize Freshdesk have ridiculously good guides on this. This page does not serve much purpose except this link, as well as this link to JavaScript Freshdesk API repo. How to use Freshdesk API 1. Get your API-key It’s on your profile settings pane (click on your profile picture). The actions done with that API-key,…

Continue Reading

Facebook: Invite all friends to event

So you have created an event, and wish to invite all your friends (or all friends in a circle), but don’t want to manually click all of them? Open the event in Chrome Click invite Friends and select the group (or let it stay in search for all) Scroll down to the end of the…

Continue Reading