Dec

Three Ways to Handle Exceptions with Async Functions

Dec 04, 2019

Javascript exceptions shouldn’t be thrown when an IO to error occurs. Instead, helpful messages should be sent your your logger system AND to the user.

Method 1: Try/Catch

Traditionally, these exceptions are handled using Try/Catch blocks, but those can easily make your code unreadable. For example,

const getCart = async id => ({items: [{productId: 1}]});
const getProduct = async id => ({imageId: 1});
const getImage = async id => {throw new Error("Image ID Not Found");}

const getCartFull = async (cartId) => {
  let cart, products = {}, images = {};
  
  try {
    cart = await getCart(cartId);
  
    for (let item of cart.items) {
      try {
        products[item.productId] = await getProduct(item.productId);

        try {
          let imageId = products[item.productId].imageId;
          images[imageId] = await getImage(imageId);
        } catch (error) {
          return [error];
        }

      } catch (error) {
        return [error];
      }
    }

  } catch (error) {
    return [error];
  }

  return [null, cart, products, images];
}

getCartFull(1).then(res => console.dir(res));

const getCart = async id => ({items: [{productId: 1}]});

const getProduct = async id => ({imageId: 1});

const getImage = async id => {throw new Error("Image ID Not Found");}

const getCartFull = async (cartId) => {

let cart, products = {}, images = {};

try {

cart = await getCart(cartId);

for (let item of cart.items) {

try {

products[item.productId] = await getProduct(item.productId);

try {

let imageId = products[item.productId].imageId;

images[imageId] = await getImage(imageId);

} catch (error) {

return [error];

}

} catch (error) {

return [error];

}

} catch (error) {

return [error];

}

return [null, cart, products, images];

}

getCartFull(1).then(res => console.dir(res));

Method 2: Catch Callback

const getCart = async id => ({items: [{productId: 1}]});
const getProduct = async id => ({imageId: 1});
const getImage = async id => {throw new Error("Image ID Not Found");}

const getCartFull = async (cartId) => {
  let cart, products = {}, images = {}, error;

  cart = await getCart(cartId).catch(e => error = e);
  if(error) return [error];

  for (let item of cart.items) {
    products[item.productId] = await getProduct(item.productId).catch(e => error = e);
    if(error) return [error];

    let imageId = products[item.productId].imageId;
    images[imageId] = await getImage(imageId).catch(e => error = e)
    if(error) return [error];
  }

  return [null, cart, products, images];
}

getCartFull(1).then(res => console.dir(res));

const getCart = async id => ({items: [{productId: 1}]});

const getProduct = async id => ({imageId: 1});

const getImage = async id => {throw new Error("Image ID Not Found");}

const getCartFull = async (cartId) => {

let cart, products = {}, images = {}, error;

cart = await getCart(cartId).catch(e => error = e);

if(error) return [error];

for (let item of cart.items) {

products[item.productId] = await getProduct(item.productId).catch(e => error = e);

if(error) return [error];

let imageId = products[item.productId].imageId;

images[imageId] = await getImage(imageId).catch(e => error = e)

if(error) return [error];

}

return [null, cart, products, images];

}

getCartFull(1).then(res => console.dir(res));

Method 3: Custom Exception Wrapper

This method is inspired by Dima Grossman’s post.

const catcher = (promise) => {
  return promise.then(data => {
    return [null, data];
  })
  .catch(err => [err]);
}

const getCart = async id => ({items: [{productId: 1}]});
const getProduct = async id => ({imageId: 1});
const getImage = async id => {throw new Error("Image ID Not Found");}

const getCartFull = async (cartId) => {
  let cart, products = {}, images = {}, error;

  [error, cart] = await catcher(getCart(cartId));
  if(error) return [error];

  for (let item of cart.items) {
    [error, products[item.productId]] = await catcher(getProduct(item.productId));
    if(error) return [error];

    let imageId = products[item.productId].imageId;
    [error, images[imageId]] = await catcher(getImage(imageId));
    if(error) return [error];
  }

  return [null, cart, products, images];
}

getCartFull(1).then(res => console.dir(res));

const catcher = (promise) => {

return promise.then(data => {

return [null, data];

})

.catch(err => [err]);

}

const getCart = async id => ({items: [{productId: 1}]});

const getProduct = async id => ({imageId: 1});

const getImage = async id => {throw new Error("Image ID Not Found");}

const getCartFull = async (cartId) => {

let cart, products = {}, images = {}, error;

[error, cart] = await catcher(getCart(cartId));

if(error) return [error];

for (let item of cart.items) {

[error, products[item.productId]] = await catcher(getProduct(item.productId));

if(error) return [error];

let imageId = products[item.productId].imageId;

[error, images[imageId]] = await catcher(getImage(imageId));

if(error) return [error];

}

return [null, cart, products, images];

}

getCartFull(1).then(res => console.dir(res));

Which to Choose?

Method 1 is just plain yuck. Method 2 is decent, I prefer Method 3 for readability.

5 years ago Short URL Comments

Programming

Nov

What’s with Redux, ReduxSauce, Thunk, and Sagas?

Nov 26, 2019

What is Redux?

A library to create and manage data objects (aka state objects) based on the flux pattern.

Actions

Are requests to a store to take an action.

Example:
{ type: ADD_TODO, text: ‘Build my first Redux app’}

Action Types

An enum of allowable action types.

Reducers

Are handler functions for actions that apply the action payload.

myReducer = (state, action) => nextState

ReduxSauce

Is a library to make Redux more DRY. In doing so though, it makes the code less readable imo.

Thunk and Sagas

Calls to actions are synchronous. This means that action handlers cannot fetch data or have side effects. Thunk and Sagas solve this desire.

Reasons for: More powerful Redux can handle most of your biz logic
Reasons against: If not done carefully, you will end up with Redux spaghetti

Thunk

Thunk is an extended reducer which can (1) return a promise, and (2) actions are allowed to be called from within the promise (aka side-effects). For example, you can have an action which first sets a loading field = true in the store, fetches data, then updates the store when done.

Sagas

Sagas is like Thunk, but allows for action handling to be interrupted using generators

How to access object attributes based on a variable in Typescript

Nov 08, 2019

Typescript is obscurely particular with accessing attribute keys on objects that lack a generic signature. Adding generic signatures reduces type-safety though.

Here’s a Typescript-friendly way to verify an attribute exists in an object, and then access that attribute.

// implicitly typed object
const myObj = {
  Hello: "world"
};

const myObjKey = "Hello";

// The commonly recommended way to check if an attribute exists,  
// which throws a no signature lint error Element implicitly 
// has any type (TS7053) in Typescript
//
// if (myObj[myObjKey]) {
//     ...
// }

// The 'in' way, which Typescript likes
if (myObjKey in myObj) {
  // Now that we've confirmed the attribute exists, it's
  // type-safe to recast myObjKey and access it as an attribute
  console.log(myObj[myObjKey as keyof typeof myObj]);
}

// implicitly typed object

const myObj = {

Hello: "world"

};

const myObjKey = "Hello";

// The commonly recommended way to check if an attribute exists,

// which throws a no signature lint error Element implicitly

// has any type (TS7053) in Typescript

// if (myObj[myObjKey]) {

// ...

// }

// The 'in' way, which Typescript likes

if (myObjKey in myObj) {

// Now that we've confirmed the attribute exists, it's

// type-safe to recast myObjKey and access it as an attribute

console.log(myObj[myObjKey as keyof typeof myObj]);

}

This post originally posted at https://blog.smartlogic.io/accessing-object-attributes-based-on-a-variable-in-typescript/

5 years ago Short URL Comments

Programming/Uncategorized/Web-Dev

Mar

Drupal 7: Converting a text field to a long text (aka textarea) field

Mar 20, 2015

Realize later on that text field you created needs to actually be a long text field? You’re not alone.

After doing some research, I found zero complete solutions. The ones I found leave problemattic remnants in the database, which can cause hard to diagnose issues such as restricted field length. See references.

Luckily for you, the drush script below will do a more complete conversion.

Thanks go out to the references though, for getting me started.

<?php

/**
 * Change a field from textfield to textarea
 * Unlike other guides online, this one actually corrects the blob values
 * Run this using drush: `drush scr <filepath>`
 */

$field_name = "field_test_text_field_2";

$rows = db_query("SELECT id,data FROM {field_config} WHERE field_name = '{$field_name}' ")->fetchAll(PDO::FETCH_OBJ);

foreach ($rows as $row ){
 $row->data=unserialize($row->data);
 unset($row->data['settings']['max_length']);
 $row->type="text_long";
 drupal_write_record("field_config", $row, "id");
}

// Update field_config_instance
$rows = db_query("SELECT id,data FROM {field_config_instance} WHERE field_name = '{$field_name}'")->fetchAll(PDO::FETCH_OBJ);

foreach ($rows as $row ){
 $row->data=unserialize($row->data);
 $row->data['widget']['type']='text_textarea';
 unset($row->data['widget']['settings']['size']);
 $row->data['widget']['settings']['rows']=3;
 drupal_write_record("field_config_instance", $row, "id");
}

// Update the field table
db_change_field("field_data_{$field_name}", "{$field_name}_value", "{$field_name}_value", array(
 "type" => "varchar",
 "length" => "20000",
));
db_change_field("field_revision_{$field_name}", "{$field_name}_value", "{$field_name}_value", array(
 "type" => "varchar",
 "length" => "20000",
));

// Clear caches.
field_cache_clear(TRUE);

<?php

/**

* Change a field from textfield to textarea

* Unlike other guides online, this one actually corrects the blob values

* Run this using drush: `drush scr <filepath>`

$field_name = "field_test_text_field_2";

$rows = db_query("SELECT id,data FROM {field_config} WHERE field_name = '{$field_name}' ")->fetchAll(PDO::FETCH_OBJ);

foreach ($rows as $row ){

$row->data=unserialize($row->data);

unset($row->data['settings']['max_length']);

$row->type="text_long";

drupal_write_record("field_config", $row, "id");

}

// Update field_config_instance

$rows = db_query("SELECT id,data FROM {field_config_instance} WHERE field_name = '{$field_name}'")->fetchAll(PDO::FETCH_OBJ);

foreach ($rows as $row ){

$row->data=unserialize($row->data);

$row->data['widget']['type']='text_textarea';

unset($row->data['widget']['settings']['size']);

$row->data['widget']['settings']['rows']=3;

drupal_write_record("field_config_instance", $row, "id");

}

// Update the field table

db_change_field("field_data_{$field_name}", "{$field_name}_value", "{$field_name}_value", array(

"type" => "varchar",

"length" => "20000",

));

db_change_field("field_revision_{$field_name}", "{$field_name}_value", "{$field_name}_value", array(

"type" => "varchar",

"length" => "20000",

));

// Clear caches.

field_cache_clear(TRUE);

References:

http://www.pixelite.co.nz/article/convert-existing-textfield-textarea-drupal-7/
http://www.up2technology.com/blog/converting-drupal-fields/

10 years ago Short URL 11 Comments

Uncategorized

Jan

Have FTP but no ssh? Web Shell to the rescue!

Jan 23, 2014

There are many times a web shell can come in handy, such as running a non-shell OS or if you have FTP but non SSH. Web shell to the rescue! The top three I could find are b374k-shell, ajaxshell, and shellinabox. b374k-shell is my favorite, because it is all-around better than ajaxshell, and it doesn’t require compilation like shellinabox. So enter b374k-shell a php web app that emulates some core capabilities of a shell. Here is my review.

Features:

A web-app that is a self-contained php file
Password protected – stores a hash of your password within the php file
Secure if you have https configured
basic shell
file browser, with options to
- upload
- edit
- download
- create
- delete
- rename
- hex view
- compress
- decompress
- copy
- paste
- chmod
- limited bulk operations
process manager
system info browser
php/python/ruby/perl/gcc evaluator
db shells

Limitations:

Can’t sshfs
Bulk upload/download
Basic editor with no syntax highlighting
Works on mobile, but isn’t optimized for mobile

Conclusion: It isn’t as good as ssh, but it’s super cool and can do everything you need it to for web development.

11 years ago Short URL Comments

Web-Dev

ftp/ssh/web shell

Jan

Best options for SSHFS on Mac OSX

Jan 07, 2014

Thank heavens for SSHFS! SSHFS allows me to locally mount remote linux/unix filesystems. This allows me to create and edit remote files using all of my native software! Sadly, the documentation for SSHFS options are weak, and the default options never work well for me. I’ve used SSHFS nearly every day for the past 3 months, and here is my recommendation for options for OSX:

nohup sshfs -ofollow_symlinks,allow_other,no_readahead,noappledouble,nolocalcaches <user>@<server>:<remote folder> <local folder>

1	nohup sshfs -ofollow_symlinks,allow_other,no_readahead,noappledouble,nolocalcaches <user>@<server>:<remote folder> <local folder>

nohup – makes the connection more reliable
follow_symlinks – optional, but is necessary if you want symlink folders to work
allow_other – let’s you assume file priviledges of the remote user
no_readahead, noappledouble, nolocalcaches – reduces overhead and makes Finder work MUCH faster

BONUS Want to make SSHFS work beautifully with SSHFS? Check out this teaser:

If you want this, follow these instructions:

Create a mount folder
In the folder, create a script with the extension “.command”
Add this to the script:

SCRIPTDIR="`dirname $0`"
cd $SCRIPTDIR/../
nohup sshfs -ofollow_symlinks,allow_other,no_readahead,noappledouble,nolocalcaches <user>@<server>:<remote folder> <local folder>

SCRIPTDIR="`dirname $0`"

cd $SCRIPTDIR/../

nohup sshfs -ofollow_symlinks,allow_other,no_readahead,noappledouble,nolocalcaches <user>@<server>:<remote folder> <local folder>

Allow the script to be executable. I usually do this from the terminal by typing:

chmod +x <path to script>

1	chmod +x <path to script>

Now when you double click the script, the folder will turn into your remote folder. To go back, simple click the eject icon next to the folder.
Profit.

11 years ago Short URL Comments

linux/osx/ssh/sshfs/unix

Jun

Making Sketch Animation Gifs 101

Jun 06, 2013

Have you ever seen those commercials which feature sketch animation, like the Numbers Never Lie commercial during the Super Bowl? You may have also heard it called video scribing, fast hand drawing, or sketch cartoon video. Building on this style of animation, I wondered how hard it would be to do a similar effect on a tablet. Even cooler, what if I made a sketch animation GIF to use as a loading page animated GIF?

To start, I needed an app that would allow me to draw and turn my strokes into a video. I started by searching google for sketch animation tablet apps, but the results were just plain old animation apps. No good. Digging deeper, I remember that teachers make sketch animations all the time for online classes. So instead of looking for teaching apps, and voila! I found two apps: ScreenChomp and Educreations. They both appeared to offer what I needed: video recording of a drawing, aka sketch animation. Teacher’s have been using sketch animation for years! Note: I tried ScreenChomp first and it worked, so I didn’t try Educreations.

Now the next challenge: how to make a GIF from the sketch animation video. There are web services out there that will do this for a fee, but 1) I wanted to learn how to do it myself and 2) I wanted a transparent background. I heard you can use Movie Maker some how, but having a Mac I decided to use the iMovie method.

Here is my method: I used this awesome tutorial to convert the video to gif using iMovie and GIFfun, then used GIMP to make the background transparent. To make the background transparent, I went through every frame/layer of the GIF to 1) add an alpha channel, 2) Select the background using the color selector tool, then 3) Edit->Clear. When you save, make sure you set the animation speed to ~20ms. This is quite tedious, but you could automate it using a GIMP script if you were so inclined.

And that’s it! Here is my animated sketch GIF with transparent background!

11 years ago Short URL Comments

Design

design/drawing/fast hand drawing/gif/sketch cartoon video/video/video scribing

The Dombro Show

Three Ways to Handle Exceptions with Async Functions

Method 1: Try/Catch

Method 2: Catch Callback

Method 3: Custom Exception Wrapper

Which to Choose?

What’s with Redux, ReduxSauce, Thunk, and Sagas?

What is Redux?

Actions

Action Types

Reducers

ReduxSauce

Thunk and Sagas

Thunk

Sagas

Further Reading

How to access object attributes based on a variable in Typescript

Drupal 7: Converting a text field to a long text (aka textarea) field

Have FTP but no ssh? Web Shell to the rescue!

Best options for SSHFS on Mac OSX

Making Sketch Animation Gifs 101

jQ.Mobi 1.0 vs. jQuery Mobile

Initial thoughts with the jQuery Mobile Framework

How and when to use python’s lambda