Skip to content

Instantly share code, notes, and snippets.

View xjamundx's full-sized avatar

Jamund Ferguson xjamundx

View GitHub Profile
@xjamundx
xjamundx / blog-webpack-2.md
Last active November 7, 2024 13:10
From Require.js to Webpack - Part 2 (the how)

This is the follow up to a post I wrote recently called From Require.js to Webpack - Party 1 (the why) which was published in my personal blog.

In that post I talked about 3 main reasons for moving from require.js to webpack:

  1. Common JS support
  2. NPM support
  3. a healthy loader/plugin ecosystem.

Here I'll instead talk about some of the technical challenges that we faced during the migration. Despite the clear benefits in developer experience (DX) the setup was fairly difficult and I'd like to cover some of the challanges we faced to make the transition a bit easier.

@xjamundx
xjamundx / canvas-upload.php
Created February 26, 2011 16:13
php canvas base64 png decoder
<?php
// requires php5
define('UPLOAD_DIR', 'images/');
$img = $_POST['img'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . uniqid() . '.png';
$success = file_put_contents($file, $data);
@xjamundx
xjamundx / models.js
Created November 2, 2011 02:20
Sample Mongoose Model File For Use With MongoHQ
var db = require('./config/db')
var mongoose = require('mongoose')
var Schema = mongoose.Schema
var Review = new Schema({
article : String
, count : Number
, date : { type: Date, default: Date.now }
, images : [String]
, industry : String
@xjamundx
xjamundx / express-pagination.js
Created April 19, 2011 05:28
sample pagination using express route-specific middleware
// articles per page
var limit = 10;
// pagination middleware function sets some
// local view variables that any view can use
function pagination(req, res, next) {
var page = parseInt(req.params.page) || 1,
num = page * limit;
db.articles.count(function(err, total) {
res.local("total", total);
@xjamundx
xjamundx / promise-anti-patterns.md
Last active March 4, 2021 17:49
Promise Anti-Patterns
@xjamundx
xjamundx / webpack-unused-files.sh
Last active November 20, 2020 12:51
Quickly identify files unused by webpack
# ----------------------------------- #
webpack --display-modules | awk '{print $2}' | grep ^\.\/ > files-processed.txt;
cd public/js/; # assumes all your files are here
find . -name "*.js" | grep -v eslint | grep -v __ > ../../files-all.txt; # excludes __tests__ and .eslintrc files
cd ../..;
cat files-all.txt | xargs -I '{}' sh -c "grep -q '{}' files-processed.txt || echo '{}'";
rm files-processed.txt files-all.txt;
# ----------------------------------- #
@xjamundx
xjamundx / DateTime.js
Created August 4, 2011 17:34
DateTime helper for client/server
// NOTE: Avoid using any requires up here as
// this file may be included on the client.
function DateTime (dateOrString, time) {
var time
this._date
this.offset
// generate a new datetime of now
@xjamundx
xjamundx / uploadapp.js
Created January 18, 2012 04:45
file uploads with express and node.js
// middleware
app.use(express.bodyParser({ keepExtensions: true, uploadDir: __dirname + "/public/uploads" }))
// later
app.get('/photos', uploadFile, addPhoto)
// file is automatically saved to /public/uploads, let's just set
function uploadFile(req, res, next) {
if (req.files) {
req.body.url = "http://myawesomesite.com/" + req.files.file.path.split("/").slice(-2).join("/")
@xjamundx
xjamundx / error-handling.md
Last active March 21, 2019 06:30
Full Stack Error Handling in Node.js

Ways to think about errors

  • this whole server is borked
  • this user session is broken
  • whatever action i just tried to complete did not work
  • an error will happen if we continue, so let’s not
  • who cares

Log level of various errors

Dealing with some serious issues regarding dev/build mismatch in gatsby and finally found the reason fo rit. It revolves around wrapRootElement and replaceComponentRenderer being treated differently during the hydration process. Look what happens when you return this:

gatsby-ssr.js

export const wrapRootElement = () => {
  return <div className="wrapper">text</div>
}