Skip to content

Instantly share code, notes, and snippets.

💅
writing JavaScript

Max Stoiber mxstbr

💅
writing JavaScript
Block or report user

Report or block mxstbr

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
View grab.js
// Benötigt PhantomJS. Benutzung: $ phantomjs grab.js
var page = require('webpage').create();
page.viewportSize = {
width: 10000, // A0: 9933
height: 15000 // A0: 14043
};
page.open('http://localhost/~peter/map/map.html', function(){
setTimeout(function(){
View keybase.md

Keybase proof

I hereby claim:

  • I am mxstbr on github.
  • I am mxstbr (https://keybase.io/mxstbr) on keybase.
  • I have a public key whose fingerprint is DF86 64CE 0ECF A8CA F8EB 3919 DAE5 1ACA D765 65B6

To claim this, I am signing this object:

@mxstbr
mxstbr / idea.md
Last active Nov 4, 2017
Code splitting react-router routes with webpack 2
View idea.md

NOTE: Sokra confirmed I had a misunderstanding, Webpack is still a static build tool and the below won't work. It's still a nice concept though...

With webpack 1, code splitting react-router routes is quite tedious. It requires us to repeat the getComponent function over and over again. (See here for an explanation how it works with webpack 1)

Example:

<Router history={history}>
  <Route
    path="/"
View ES2015 JavaScript Primer.md

We're excited to have you attend one of our workshops! Here's a JavaScript (re)fresher to help you get up-to-speed on some features of the language we'll be using.

Let and Const

JavaScript has always had var:

var name = 'Ryan'
@mxstbr
mxstbr / Readme.md
Last active Nov 15, 2019
Enable tab completion for JSX with Emmet in Atom
View Readme.md

Enable tab completion for JSX with Emmet in Atom

This guide assumes you have the emmet and language-babel packages already installed in Atom

Gif of the tab completion working

  1. Open the keymap.cson file by clicking on Atom -> Keymap… in the menu bar
  2. Add these lines of code to your keymap:
'atom-text-editor[data-grammar~="jsx"]:not([mini])':
@mxstbr
mxstbr / webpack-for-node-modules.js
Last active Jun 26, 2019
How to use webpack to compile node modules
View webpack-for-node-modules.js
/* eslint-disable no-var */
var path = require('path');
var autoprefixer = require('autoprefixer');
const MATCH_ALL_NON_RELATIVE_IMPORTS = /^\w.*$/i;
module.exports = [{
output: {
filename: '[name].js',
library: 'atrium-react-plugin-beta',
@mxstbr
mxstbr / README.md
Last active Sep 1, 2017
Syntax highlighting ESNext (inc. JSX) for Keynote presentations
View README.md

Syntax Highlighting ESNext (inc. JSX)

To get syntax highlighting for ESNext (including JSX), you need to have pygments-lexer-babylon installed:

pip install pygments pygments-lexer-babylon

Now when you run pygmentize on a .jsx file it'll automatically use the new lexer! 🎉

@mxstbr
mxstbr / Component.js
Last active Jun 18, 2019
styled-components ❤ tachyons
View Component.js
// There's two ways to use Tachyons together with styled-components
// Both are valid, which one you use depends if you want to always apply a tachyons class when a certain component
// is rendered or if you want to apply it for specific instances.
// 1. Use .attrs to define classNames that should always be applied to a styled component
// Whenever you use <Component /> now it'll have both the styled-components as well as the Tachyons class
// See the docs for more info: https://www.styled-components.com/docs/basics#attaching-additional-props
const Component = styled.div.attrs({
className: 'bw0-l',
})`
You can’t perform that action at this time.