Getting paper.js to work in an external file rather than the html file
A basic getting started tutorial for Paper.js.
This week for our class project we got to have some fun and choose a library or tool to integrate with JavaScript. I wanted to create something with a small amount of user interaction and a pleasing visual design. Paper.js was recommended as a framework that is easy for beginners to work with. After looking through the examples and showcase pages, I was sold. My favorite examples are ‘Voronoi’ and ‘Hit Testing’. The tutorials also seemed pretty straightforward and I was excited to try them out.
Paper.js can be thought of as a library or a framework, sort of like jQuery, that you make a reference to before you can use its functions and methods. In order to use it, you need to reference the Paper.js “dictionary” from your HTML file, and then either refer to your external JavaScript file with the <src> property “type=‘text/paperscript’” (instead of “type=’text/javascript’”) in your HTML, or, import the Paper.js information into your external JavaScript file before you call any of the Paper.js functions or methods.
The basic tutorial gives an example with Paper.js code inside of an HTML file. That’s okay for a small amount of code, but the more code we write, the more it makes sense to keep things organized and put all of our JavaScript and PaperScript into external .js files, and keep the HTML file to mostly HTML code. To keep things organized, we want to structure our files like so:
Structure goes into the HTML file. What order do you want the items on the page to appear in?
Styling goes into the CSS file. This is the file that tells us how the items on the page should look.
Actions go into the JavaScript file. This is the file that manipulates the page when we interact with it.
Unfortunately, when I used the Paper.js tutorial example and removed the Paper.js code out of my HTML file and placed it in an external JS file, things got less beginner-friendly. At first, no browser would load anything at all. Then I added in JQuery and tried the Paper.js tutorial’s suggestion of using “with (paper)” at the beginning of my code. I was able to view my file in Firefox and Safari, but not Chrome. In Chrome I was getting a console error saying "XMLHttpRequest cannot load file:... Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource”.
Here is what I did to get everything working together, with my JavaScript in its own JS file. This worked in all browsers, including Chrome, so I could use the Chrome Developer Tools to help myself debug while building my project.
In my HTML file:
Placed my <script> tags at the bottom of the <body>, just before the closing </body> tag.
Loaded jQuery, Paper.js, and my script file that I creating, in that order. I used publicly hosted versions of jQuery and Paper.js, also called a CDN, or Content Delivery Network, rather than copies of these libraries on my own computer.
Gave my script file a property of "type=‘text/javascript’” and worked with it as a JavaScript file rather than as a Paper.js file.
In my JS file:
Placed “paper.install(window);” at the top of my JS file, per the Paper.js tutorial’s first suggestion on “Using JavaScript Directly > Setting Up a Scope.”
Added a “window.onload = function( )” which wrapped around all of the code I was writing. I also added a “console.log( )” message to check that the files were talking to each other as expected.
Created the canvas before adding any other code by using “paper.setup('myCanvasID’);”
Just before the closing bracket for the window.onload function, I included “view.draw( );” - which doesn’t seem entirely necessary, but if it is included, it appears to help speed up the drawing of the items when the page loads.
One other change I needed to make to the Paper.js tutorials was to create a Tool( ) variable that I could place before any mouse or key events.
That’s pretty much it for getting started with the basics. I ran into some other challenges with resizing the browser window and using custom fonts in the Paper.js TextItem, which I’ll cover in a later post.
You can check out the project I made using Paper.js over on http://lindsayelia.github.io/etch-a-sketch/.
We had a guest lecture today by one of the instructors from the Colorado Galvanize campuses. He gave an engaging talk about priming yourself to learn, putting yourself into the best possible state so that you can learn at your optimal self.
Some of this I’ve heard before, but I thought it was a nice way to set the stage for the beginning of our learning adventure over the next few months. Now we all have a few more tools to help us get through when things get uncomfortable.
These are my notes from the talk.
Set the Stage
1. Clear the stage, prime your brain.
we have only so much ‘working memory’ space - can process about 4 things at a time
turn off notifications
write down anything that you need to do later that is distracting you, a place that you know you’ll check later
2. Clarify the what and the why.
what is the objective, what is this thing that I hope to achieve in this next period of time, and the why
the why is the purpose, we are social creatures, we operate best when we have a mission, a reason to do what we’re doing
take a bit of time at the start of doing my homework, for example, to focus on the why, why we’re doing what we’re doing
if operating from a place of fear, you are not going to be operating in a state of flow
fear literally shuts down your frontal cortex, you are operating at less than your potential, it makes us “sub-human” ?
why? not quite sure why this thing is important, but eventually I want to build web apps, or whatever, etc
it’s ok to put small things in context of larger goals, so long as that goal is motivating
3. Prioritize process over product.
it’s the journey, not the destination
sometimes failure is valuable, we can learn from our failures too
pleasure in process, it can be fun to go through the process
quoting Malcolm Gladwell - ‘focused practice’ - all about setting aside time to work on the things you are weak at, the goal is not to become perfect, but rather, to just put in the time
focus on the things you are weak at, not the things you are good at
set aside certain amount of time, I know this is going to be difficult, will spend the next 30 min working on this thing, and I’m going to have fun goddammit, and THAT is success, not whether or not I finish it
when get good at process, will start to produce like a well-oiled factory, really fast
Play
1. Wrestle with it.
like puppies playing with each other (his analogy was playing with your siblings when you’re a kid, but I never did that haha), you know what to expect when they get that look in their eye
when I learn new info, play with it, turn it, twist it, get to know it
when first learn something, have a 2 dimensional view
if can learn something else about it, start to learn about the other angles
eventually develop a clear picture, a 3 dimensional view
another analogy is to chew on an apple, don’t just look at it, bite into it, smell it, taste it, fully experience it
“this is not college. this is a completely different experience"
“there is no such thing as intelligence, only familiarity"
people who are experts on a topic are not geniuses, they are experts because they have spent so much time playing/wrestling with it
2. Take risks. Growth mindset.
if you tell kids that they are smart, they will try to maintain that label by doing easy things that will label them as smart
if you congratulate them on effort, they will take on harder challenges/problems because they want to try hard
fixed - crap, i’m only going to learn 20% of this material
growth - awesome, I got 20% so far and have just 80% left to go
mistakes are an essential part of the learning process
3. Have fun.
people learn best when they feel safe, that they feel they can make mistakes
no “coding in anger”! haha
stop if I find myself yelling at my computer, take a step back to remember that this stuff is fun, I’m making awesome things
only when you are having fun is when you will learn as much as you possibly can
will not enter a state of flow unless you feel safe and competent in what you are doing
we want to set ourselves up for success
by playing, I will get myself there a lot faster
Reflect
1. Self-assess.
Look back at what the what was, that I said I was going to do, how did that go? did I do that?
celebrate if I achieved it,
be honest about what went well and what didn't
maybe I got distracted
try again next time
how did I do with the process? how did I do with making progress towards my objective?
research shows - what moves the needle the most, is when students are able to become their own teachers, when they can assess where they are, what they need help with, here’s how far I still need to go, etc
2. Ask more questions.
creating good questions are essential about the learning process
forces me to identify what I don’t know
write questions out for myself of things I want to learn, know, to find out
Configuring Sublime Text to open files from the CLI
Person First Code Tip: How to configure Sublime Text to open files from within your CLI (terminal or command line).
Why?
The default installation of Sublime Text (a text editing program, used for writing code) gives the option to open files using Sublime Text by typing type a command into the CLI.*
However, it needs to be configured sightly. So it’s really more like 80% installed (for someone like me who is still learning to use the CLI), or 99% installed for experienced developers, or 5% installed for anyone not familiar with using the CLI. Not as useful as 100% installed and ready to go.
*CLI is short for command line interface, or Terminal, or Shell. Depending on what operating system you use, you might call it something different.
How?
Glance at the Sublime Text overview of configuring the CLI command. Don’t worry if it doesn’t make sense. Move on to the next step.
Read this stackoverflow Q&A about this topic and scroll down to the third answer, the one that includes:
“There is a easy way to do this. It only takes a couple steps and you don't need to use the command line too much. If you are new to the command line this is the way to do it.
Step 1 : Finding the bin file to put the subl executable file in
Step 2: Finding the executable file”
Note: the answers in this stackoverflow Q&A may be shown in a different order if you read this blog post at a much later date. I’ve also outlined the steps here below, to use if the Q&A doesn’t make sense to you.
For more help with “Step 1 : Finding the bin file to put the subl executable file in” I searched on the internet for “how to find mac bin file” and came up with these steps, for a Mac:
Check to make sure you have Sublime Text installed on your computer. I’m assuming you already do, if you want to configure it to use the CLI command to open files. On Mac, open Spotlight and search for Sublime.
Open a Finder window
Open the “Go” menu
Choose “Go to Folder…”
This will bring up a new window in which you can type “/usr/local/bin”
That should take you to the folder location where bin lives
Now, open a second Finder window and open up your Applications folder. This is typically found at the same folder level as where your Desktop is locations. You can also use Spotlight to search for your “Applications” folder.
Find the Sublime Text application. Right-click on it so you get a pulldown menu.
Click on “Show Package Contents”. Click into the “Contents” folder.
Click into the “SharedSupport” folder and then into the “bin” folder.
Copy the file “subl” from here and go to your other “bin” folder that we searched for earlier, and paste it into there. You need to make sure to copy and paste it, not move it, and not make a shortcut or alias to it. You can right-click on files or folders to get the “copy” and “paste” options.
Open your terminal and test to see if it works by navigating to a folder with a file that you want to open with Sublime, type “subl” and see if Sublime opens to the folder or file where you are. If it does, that means it is working.
Day 2 - 04.28.15 - Get comfortable with being uncomfortable
Day 2 at Galvanize started out by writing down characteristics of a good developer. I think the number one quality for a great developer to have is empathy. I’d probably say the number one quality for most things in life, is to have empathy for other people - the people you work with, the people you’re working for, and the people you ride the bus with every morning.
I was also reminded of advice that makes me think of the venerable Jillian Michaels (because I heard her say it on tv once and it stuck with me) and also is something that I try to remind myself of from time to time: “get comfortable with being uncomfortable.”
We all do things we believe will be good for us, even if they’re painful, because we’re motivated by the results. I like to take this view towards personal growth, self-help, being a good person, whatever you want to call it, and use it as a constructive way to approach anything new, such as learning an entirely new topic in a few months.
I plan to learn at least one new thing every day for the next 6 months and to spend some of that time furrowing my eyebrows at my computer, being uncomfortable while I figure things out. I’m very much looking forward to it. :) (Or should I say >:| hehe)
In addition to a few inspirational life lessons, today I also learned that people-who-are-not-programmers also use GitHub, and how to configure Sublime Text to open files from with the terminal.
I’ve been using GitHub for the past few years for work, and hadn’t given much thought that it can be used outside of programming-land. Writers, musicians, artists, government organizations, and many others, use GitHub as a place to store, share, and track changes to information. GitHub holds quite a variety of file types. Version control is everywhere!
Day 1 - 04.27.15 - How to remember names for 25+ people in a short amount of time
TIL: first names and quirky details for 25+ people I just met, and will be spending the next 6 months with. For peeps unfamiliar with internet lingo (hi dad!) ‘TIL’ is shorthand for ‘Today I Learned’ (and ‘peeps’ is slang for people).
How does one learn 25 peoples’ names and life stories in just a few hours?
Well, one way is to have everyone stand in a big circle and go around the circle saying the name of each person who came before them, and then their own name, using an adjective to alliterate names. Radical Rebecca, Dynamic Dominic, and Logarithm Laura are just a few of the wonderful people who I met today.
The last person to go repeats everyone’s name and adjective, and by that time, I’ve got most of them memorized. I’m Lover of Animals Lindsay, in case you were wondering.
One of the ways we got to know each other a bit was to stand in two long lines, facing each other about two feet apart, and talk for 30 seconds. Like speed dating but much quicker and without the pressure. Speed friending, I guess? After 30 seconds, a moderator makes a loud noise, and the person at one end of one of the lines moves to the other end, and that entire line shifts down. This is how I learned that I’m not the only person who dislikes loud noises and which favorite foods I could bribe my classmates with. Very useful information.
Our homework for the day included starting a blog (lucky you, reader!) and reading the first half of Zed Shaw’s The Command Line Crash Course. If you’d like to pretend like you’re starring in the 1983 classic WarGames, I recommend giving the command line interface (CLI) a try. You can learn the basics in about an hour and compare it to moving around your computer using the GUI (graphical user interface, aka, windows or folders that most people click on to navigate their computers).
On a Mac, use the Spotlight search to open up “Terminal” (native to all Macs) or download iTerm2 (free). If you use Windows, you can try something from this list. If you use Linux, then I’m guessing you probably don’t need me to tell you how to get to the command line. :)
Person First Code Tip: Personalize your learning.
Instead of using the folder names shown in The Command Line Crash Course, make up names that are interesting to you. For example, I made a top level folder for food, sublevel folders for fruits and veggies, and below that, folders with names like kiwis, peas, carrots, apples, tomatoes. Then when I practiced moving folders around in the CLI, I moved the tomatoes folder back and forth (it’s a fruit, right?). Personalizing exercises to something you like makes them more relevant and memorable. Putting computer lingo into terms you understand will help it stick, and probably make it easier for you to explain to other people too.
I’msoexcited to share that I’m starting at Galvanize School in San Francisco tomorrow. I’ll be spending the next 6 months learning front end web development and working on projects for my portfolio. For those of you who might be unfamiliar with this term, I’m learning skills in order to make amazing, interactive, beautiful, user-friendly websites in just a few months’ time.
Part of me can’t believe I’m actually doing this. Did I really just quit my job to go back to school? Part of me is wondering why I waited so long to do this. It’s been something I’ve enjoyed tinkering with for quite a few years. All of me is excited to start this adventure and enthusiastic to be learning new things. Yaaaassssss.
