Adobe HTML Panels Development
What you need to know & where to find it?

TrevorAdobe Extensions0 Comments

So your are or you want to be a "HTML Panels Developer". What do you need to know to be successful and where can you find the answers? Well your number one resource, Google. When you have a question use your favorite search engine and go for it. Often the search will come up with a result from Stackoverflow, more often than not these results are very useful.
(See below for the HTML extensions specific links.)

Need to knows:

Git
When you start a project after you've created your empty project folder you need to do a git init. What is git and why is it so important? Git tracks the changes you make to the files in the project. It can show you them and revert to them and a very lot more. There is a huge amount written on git, I have a book of about 500 pages on it, but what you need to know is about 1 or 2 pages worth, so don't panic. Once you have done your git commit you want to upload it to an online private repository, this will be useful as a backup and an easy way of getting the extension on other machines. The 2 big ones are Bitbucket and Github. Which is better? See Git Wars and Bitbucket vs Github (by Bitbucket). The general rule of thumb being, for you private repositories Bitbucket allows you to have unlimited number of private repositories for free as long as you are 5 or less users (if you don't know if you are 5 or less users that means you are 5 or less), Github doesn't allow free private repositories, so unless you are paying Github anyway then go for Bitbucket. For your public repositories Github is free and probably the one you want to use (if you have any public stuff). Figuring out how to push your local repository to the remote online one and how to pull it back it not incredibly simple. Your 1st one should take you between 10 minutes and 3 hours, if you pull off your 1st one in 10 minutes your are a genius and if it takes you 3 hours you are thick, so there you go. Your second one should take you no more than 10 minutes even if you are thick Eventually you should be able to do this within 2 minutes. Your text editor should have a several packages available for easy use of git, GitHub and Bitbucket within the editor.

Here's some resources.
Offical Git Docs
Offical Git Book
Guide to Git by Atlassian (Bitbucket)
Hello World by Github
Some would say that I'm cruel for starting the list with Git, I'm doing it to stress it's importance. I have not shown it's importance your find that out as time goes by.
JavaScript
Those coming from Adobe's jsx ExtendScript recognize a static language unchanged from 1999. Today there are major updates to JavaScript coming out every year or 2. I don't know what percentage of the latest JS is covered in ExtendScript but it's very little and you need to learn to fill the gap, it goes without saying you'll have to learn the webside part of js which is not at all covered in ExtendScript. You have to basically be on the ball or you won't understand why your extensions stopped working or why they don't work in previous versions. The CEP team are correctly working to provide updated js versions with each new CEP addition. Node modules are very often written for recent js versions and wont work on older versions, you can often download old versions of the modules for compatibility with old CEP versions. There are many node modules that won't work in the latest form with CEP7 because it's too out of date, these modules should work with CEP8.

There are tons of resources and frameworks for js here's a touch of some of the core references.
MDN (Mozilla) JavaScript Guide
MDN (Mozilla) JavaScript Main Page
MDN (Mozilla) JavaScript Reference
MDN (Mozilla) JavaScript Reference
JavaScript Garden
Eloquent JavaScript
HTML
Well you can't exactly be a HTML developer without knowing a bit of HTML. The good news is it's really simple and majorly documented. One important thing to know is that you should separate your JavaScript from HTML.
MDN (Mozilla) HTML Main Page
MDN (Mozilla) HTML Reference
MDN (Mozilla) HTML DOM
CSS
CSS is about having your pages look pretty. There's the general side of CSS and there's the HTML extensions side of it where you might want the extensions appearance to change, reflecting changes in the host applications (InDesign, Photoshop etc.) appearance. This is pretty simple stuff and I'll give it cursory coverage in my CSTK post in the video hopefully coming out in the next couple of days.
MDN (Mozilla) CSS Main Page
MDN (Mozilla) CSS Reference
CSS Tricks
jQuery
jQuery is your friend It makes putting the functionality into your HTML so much simpler than trying to do without it and it's so simple to learn, you want to do something you just Google "How do you jQuery …" you'll get a result near the top from stack overflow with about 35 answers to your question and you pick the one with the most points or something like that.
jQuery Main Page
jQuery API

A general resource for learning JavaScript, HTML, CSS jQuery and more is w3schools, some people are quite critical of the site as not being that accurate and practicing the best methods, never the less it can be a valuable resource for basic level.
Node JS
Node JS adds on a huge quantity of functionality to your extensions, it puts thousands and thousands of modules at your disposal that have already done the job for you. No you are not going to need thousands of them but you will find some of them really useful. So far example you want your extension to send out emails, you search the npm repository for "email" and you then install that module in your extension (demonstrated in the video) and then to send emails becomes as simple as can be.
Node JS Main Page
Node JS Docs
Markdown
Markdown is a simple mark up format used amongst other things for formating MD files. It's a good practice to include a readme.md in a repository that includes some basic information about the repository. See the Markdown Cheatsheet
Text Editors
There are several very good text editors. Brackets, Sublime Text and Atom are popular ones. The all come with thousands of packages you can add to them to make them more useful. Sublime text's (which I use) packages can be found here, whichever editor you are using you should see which are the most popular packages and consider using them. Linters that highlight errors are particularity useful, as are auto formatters and builds. As mentioned above there are git packages for performing the git commands and indicating the lines where changes have been made in the file (and what the changes are) since previous commits. David Deraedt's CC Extension Builder for Brackets and for Sublime Text are well know modules for those editors that can be used for creating standard extension folder structures containing standard files which can be customized to ones needs. Learning the tricks of your text editor and it's packages can improve your coding standard and speed tremendously.

Other Resources:

Pod Casts 📺
Here's a couple of useful podcast collections on general development topics, the are well worth watching.
Sayanee's build podcast it includes a list of resources and file downloads for each topic.
Hendrik Swan's Tagtree library it also includes resources and code snippets.
Adobe Extensions Development Links 🔗
Adobe's all new Extensions: Add ons Development Forum it's currently so new that it's not open to the public yet but it should be within a few days
Adobe Resources
Adobe-CEP/Samples
Trevor's Creative Scripts CEP Posts
Trevor's JSX.js
Davide Bebarranca's HTML Panels Series
Kris Coppieter's Blog
Victoria Nece's HTML5 Posts
Olav Martin Kvern's Change as a Way of Life: Adobe CC Extensions
A short guide to HTML5 extensions by Hallgrimur Bjornsson
APIs for Adobe Products

Leave a Reply

Your email address will not be published. Required fields are marked *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Please show you are a human. Time limit is exhausted. Please reload CAPTCHA.