
Euclid’s algorithm finds the largest number that divides evenly into two numbers – the greatest common divisor (GCD). The Greek mathematician Euclid published the algorithm in his work, Elements in 300 BC.
Continue readingEuclid’s algorithm finds the largest number that divides evenly into two numbers – the greatest common divisor (GCD). The Greek mathematician Euclid published the algorithm in his work, Elements in 300 BC.
Continue readingI recently decided to re-enter the “real world” after freelancing for three years. My very first interview was at InVision. It did not go well, to say the least. The coding test focused on common algorithms in JavaScript, and I bombed. After receiving the polite rejection email, I asked the recruiter for feedback from the hiring team so I could improve.
Continue readingFor the past several months I have been working on a new Adobe Illustrator extension to make the functionality of IconJar available as a panel. In order to manipulate the IconJar data – which is stored in JSON, I needed to create “Plain Old JavaScript Objects” (POJsO?) with getters and setters. Rather than type out the same lines of code over-and-over, I decided to create a command-line utility to quickly create the JavaScript classes for me.
Continue readingQuickly and easily generate JavaScript models (POJsO –
Plain Old JavaScript Objects) from a JSON object with getters & setters, data type validation, including single
item classes and collections.
json-to-js-model
can be used as an import in
a Node project or as a command-line utility. The tool takes a JSON description file of key -> value pairs and
generates a JavaScript model with getters and setters.
{
"identifier" : "C60ED43C-FB42-4321-AAA4-2CD344CB2B91",
"name" : "girl-in-ballcap",
"tags" : "ballcap,girl,in",
"file" : "girl-in-ballcap.svg",
"licence" : "",
"date" : "2019-06-13 07:36:28",
"width" : 0,
"height" : 0,
"parent" : "F19A7973-0CB3-4751-B74F-E2AF0F9B2AF4",
"type" : 0,
"unicode" : "",
"__primaryKey" : "identifier",
"__parent" : "parent",
"__type" : "item",
"__className" : "Icon"
}
{
"identifier" : "E50143AB-F36E-4CA9-852A-46E83B1C3928",
"name" : "Set Three",
"parent" : "B4FF6C41-534D-40CE-B5FF-6BFBB21E5471",
"date" : "2020-01-22 20:48:51",
"licence" : "",
"sort" : 2,
"enabled" : true,
"children" : [],
"__primaryKey" : "identifier",
"__parent" : "parent",
"__children" : "children",
"__type" : "collection",
"__className" : "IconSet"
}
json-to-js-model
can figure out which
properties your class should have, but it needs some help understanding how your classes work together. For this
reason, you will need to add some very basic meta properties
to your JSON. Properties that begin with
two underscores __propertyName
are private and used by json-to-js-model
to determine how
to prepare or link the classes. There are only five (5) pre-defined private properties:
You can use your actual JSON data to create the classes
or you can code up schemas that are identical to your JSON data but include only sample data.
Specifies the name of the primary key field such as ID,
identifier, GUID, etc. This is not the value of the field, it is the name of the field.
Specifies the name of the parent field. The parent
field connects items and sets (collections) via a primary key. The __parent
should be set on the single
item and should point to the __primaryKey
of the collection.
Specifies the field on the collection which will
contain the array of single items. This is the name of the field, not the value of the field.
__children
should be set on the collection definition, not the item unless items can also be
collections such as in a multi-level hierarchy.
The type can be either item
or
collection
and tells json-to-js-model
which JavaScript class template to use.
Specifies the name of the class to be created.
In most cases, json-to-js-model
can figure
out what the intended type is, including dates (using Date.parse()
). If you encounter an error in
json-to-js-model
‘s type detection, you can explicitly declare the type by appending it to the field
(property) name with double colons firstName::string
or birthday::date
or
age::number
. json-to-js-model
will honor the declared type over all other considerations.
It will also strip the type declaration from the final property name so you won’t end up with
firstName::string
in your JS class.
DO NOT add type delcarations to meta
properties (those with two underscores at the beginning of the name).
NB : On the roadmap I plan to add
complex type validations like url
, email
, etc. The best way to learn how to use the
package is probably looking at the files in test
, in particular the definitions
. The
markup is very simple and easy-to-understand. It’s just JSON with a few extra properties to tell the parser how you
intend for your classes to be connected.
{
"identifier::string" : "C60ED43C-FB42-4321-AAA4-2CD344CB2B91",
"name::string" : "girl-in-ballcap",
"tags::array" : ["girl", "ball cap", "baseball"],
"file::string" : "girl-in-ballcap.svg",
"licence::string" : "",
"modified::date" : "2019-06-13 07:36:28",
"width::number" : 0,
"height:number" : 0,
"__primaryKey" : "identifier",
"__parent" : "parent",
"__type" : "item",
"__className" : "Icon"
}
Notice that you can pass as many file paths as you
want. The file paths point to the JSON description
files for the classes to be created.
node cli.js ./path/to/item.json ./path/to/collection.json
const jsonToJsModel = require('../index');
console.log(new jsonToJsModel('Icon.json', './output').getOutput());
console.log(new jsonToJsModel('IconSet.json', './output').getOutput());
That is a legitimate question and I wish I
could write it all in ES6, but I primarily built this tool for my own needs building Adobe CEP (Common
Extensibility Platform) extensions for Adobe Illustrator. Since CEP is an older technology, it does not
always support ES6. Each Adobe product has a different extension API. Some use UXP (XD, for example) and
others (most) use their own implementation of CEP which is based on CEF (Chromium Extension Framework).
So in order to be able to use the tool for my work
building Illustrator and Photoshop extensions, I had to generate ES5 classes instead of ES6. This is, however,
alpha code and the plan is to update the package itself to use only ES6 and to generate both ES6 and ES5
output.
generateUUID()
do notA JavaScript extension for Adobe Illustrator to create a contact sheet from a folder of SVG files. The script allows you select a folder of SVG files and imports and arranges them in a grid pattern as a contact sheet. You can specify the page width and height, number of columns and rows, and the scale of the imported files.
I am a freelance developer and your donations help me continue to create free resources. You can donate to this project using the button below. Every bit helps.
To use this script, you will need to copy the entire Contact Sheet folder to your Illustrator scripts folder, then restart Illustrator. Follow the steps below to install.
NOTE : changing the default configuration can break the Contact Sheet utility. Proceed with caution.
You can change many of the default settings such as the location of the presets and log files, Illustrator version compatibility, etc., by editing the config.js file in the download.
This script is offered AS-IS without any warranty or guarantees of any kind. You use this script completely at your own risk and under no circumstances will the developer and/or distributor of this script be held liable for damages of any kind including loss of data or damage to hardware or software. If you do not agree to these terms, do not use this script.
I don’t like performing tedious, time-consuming tasks, especially when those tasks are non-revenue generating, which means they take time away from things I could be doing to increase revenue. The most time-consuming and tedious task I have to perform over-and-over is creating contacts sheet previews of my icons. The problem is that every marketplace has different requirements for preview image sizes and so a new contact sheet has to be created for each marketplace.
Continue reading
When I’m working on my icon designs, I often have 4-5 Adobe Illustrator documents open at a time during a work session. Since icon design involves creating large collections of tens, hundreds, or even thousands of icons, I have them broken up into multiple files but find I need to copy a lot of icons between files.
While working on a project for work today, I encountered a problem that I apparently have never encountered before. What I thought was a very simple function call in jQuery turned out to be a bit more complicated. I needed to removed an HTML element from a string representation of an HTML snippet. jQuery doesn’t quite behave the way I expected and I had trouble finding a solution.
Continue readingI can’t begin to count the number of times I have coded the same search field with the default value “Search…” in it and so that when the field receives focus, the text is cleared but magically reappears when the field blurs. Every time I code it I know I should save that snippet of code somewhere but it is always faster to just write it anew each time. Well, no more. I finally got around to writing jQuery plugin to allow me to add the focus/blur default value toggle to any field. I have very creatively named the plugin ‘Defaultify’.
Continue reading