xjamundx

<?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

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

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

// 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

https://github.paypal.com/shsreedharan/FEUI/blob/SREMMTWO-780/mm2-alert-auditor/jobs/CertExAuditor.js#L26

Don’t Mix the Async lib or Callbacks and Promises

// bad example
async.paralell([function(callback) {
	getUserPhotos().then((data) => callback(null, data), callback)
}, function(callback) {
	logClickToAnalytics().then((data) => callback(null, data)).catch(callback)

xjamundx

# ----------------------------------- #
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

// 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

// 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

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

xjamundx

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>
}