This gist includes files detailing programs and tools I personally am using for frontend and mainly JavaScript development.
To edit all my JS, HTML and CSS files I use Atom. You can get it at atom.io. It is an open source HTML and JS based editor running on electron. So you can do a lot of configuration and hacking around.
| image: node:4.2.2 | |
| pages: | |
| cache: | |
| paths: | |
| - node_modules/ | |
| script: | |
| - npm install -g gulp | |
| - npm install |
| /* | |
| , , | |
| / \/ \ | |
| (/ //_ \_ | |
| .-._ \|| . \ | |
| \ '-._ _,:__.-"/---\_ \ | |
| ______/___ '. .--------------------'~-'--.)__( , )\ \ | |
| `'--.___ _\ / | Here ,' \)|\ `\| | |
| /_.-' _\ \ _:,_ Be Dragons " || ( | |
| .'__ _.' \'-/,`-~` |/ |
| /* | |
| Logging middleware for Redux as suggested by the official documentation. | |
| http://redux.js.org/docs/advanced/Middleware.html | |
| */ | |
| export const logger = store => next => action => { | |
| console.log('dispatching\n', action) | |
| let result = next(action) | |
| console.log('next state\n', store.getState()) | |
| return result |
| const path = require('path') | |
| const webpack = require('webpack') | |
| module.exports = { | |
| entry: { | |
| main: "./src/js/index.js" | |
| }, | |
| output: { | |
| path: path.join(__dirname, 'build', 'js'), | |
| filename: "[name].js" |
| /** | |
| * Walks a filestructure starting from a given root and returns all found files to a callback, using a filter. | |
| * @param {String} dir - Root directory | |
| * @param {RegEx} filter - RegEx to test found files against | |
| * @param {Function} done - Callback will be called with (err, foundFiles) | |
| * @private | |
| */ | |
| function walk(dir, filter, done) { | |
| var results = []; | |
| fs.readdir(dir, function(err, list) { |
| /* | |
| This file is build to have somehting to paste into code highlighters or editors and see how they display JavaScript. | |
| It therefor includes many random things you might do in JS. | |
| */ | |
| function hello() { | |
| var hello = 'hello' | |
| let world = "world" | |
| const helloWorld = hello + ` ${world}` | |
| return(helloWorld) |
| /* | |
| Calculate modular scalled font-sizes for headlines in Stylus | |
| "Modular scale refers to a series of harmonious numbers | |
| that relate to one another in a meaningful way." | |
| Inspired after reading http://typographyhandbook.com/#font-sizing | |
| Build after http://www.modularscale.com/ | |
| */ | |
| /* | |
| Hide scrollbars when not hovering container in Atom. | |
| For Windows especially. | |
| Get those scrollbars out of your way. | |
| Put this in your 'style.less'. | |
| Open Settings click 'Open config folder' | |
| This was really getting to me, thanks for |
