The main idea of today's exercise is that we looked at the noConflict implementation in Accounting JS, and wrote a new version that was simpler.
Read MoreMastering Javascript Fundamentals: noConflict (Part 1)
Summary:
noConflict is a common technique to allow dual-use of the same variable name, useful with libraries.
Mastering Javascript Fundamentals: LibrarySystem (Part 3)
Summary:
We can see the same if/else logic in Accounting JS that we used in with sandwichLibary.
The idea is that it dynamically detects if you are using a given system, and then runs implementation code specific to that system
If there is no system, the last resort is to simply attach the library to the Window object.
Reading: "Remote: Office Not Required" by Jason Fried of 37signals
A year ago a read another book by Jason Fried, Rework, and it transformed my thinking about how approach my career and work. The year since reading that book has been the best year of my career by every important metric. So I decided to try another book of his called "Remote: Office Not Required".
Jason Fried is the founder of 37signals, creators of Basecamp, Ruby on Rails, and other great collaboration tools. His impact on the industry is undeniable.
In this book he lays out the argument for why Remote work is the future of work, and why businesses to fail to embrace it put themselves at a serious disadvantage.
Here are some snippets from the book that stuck with me:
Read MoreMastering Javascript Fundamentals: LibrarySystem (Part 2)
Summary
When building a library, we don’t know if the developer prefers to create a global variable on the window object for every library, or use librarySystem.
To solve this, we can create an if/else statement that checks to see if librarySystem exists.
If librarySystem exists, we call the librarySystem function.
If librarySystem doesn’t exist, we attach sandwichLibrary directly to the window object.
Mastering Javascript Fundamentals: librarySystem (Part 1)
Summary
Attaching libraries to the window object is a good way of reducing the number of global variables (and potential naming conflicts).
But if you have 100 or 1,000+ libraries, you would still have a lot of global variables.
There is another approach that allows us to expose a single global variable, such as "librarySystem", which is a function that lets us grab libraries by name, and create new ones.
Specifically:
1. Create: librarySystem('libraryName', function() { /* return library */});
2. Use: librarySystem('libraryName'); ==> returns library object
Mastering Javascript Fundamentals: Scopes, locals, closures, globals
Summary:
Functions can always remember the variables they could see at creation.
They can see variables defined inside the function.
They can see variables defined in enclosing functions.
Fundamentals
Mastering Javascript Fundamentals: IIFEs and sharing data
"Get the fundamentals down and the level of everything you do will rise" - Michael Jordan
Today I'm starting something new on this blog. This year, one of my goals has been to master javascript fundamentals. I've created projects in the past using Javascript, Objective-C, Swift, and Ruby - but because my goal was always to build something, I never built a rock solid foundation of knowledge. I would google and hack my way to solutions, but my speed and enjoyment suffered by the fact that I hadn't mastered the fundamentals.
In design, I have such an intuitive understanding of the principles, best practices, and tools - that I'm able to move quickly and happily from problem to solution. I want this fluid sense of mastery in code as well.
What I'm doing about it: Since December 2017, I've set the goal of 1 hour of learning Javascript everyday with the goal of mastering the fundamentals. Sure, I've missed days along the way as work requirements demand extra time, etc. - but I've done my best to stick to this regimen and it's paying off.
How I'm learning: I do 1 hour of video lessons from Watch and Code every day. If you're interested in learning Javascript in a way that goes beyond basic tutorials and gives you a foundational, practical knowledge without relying on frameworks - I'd highly recommend it. I've learned a lot of skills on the internet, and this is without a doubt one of the best programs I've found.
As I move forward with documenting my progress on this blog, I'll be keeping my notes on the blog to force me to clarify my understanding (to the point of being able to explain it). If you're reading these posts, please keep in mind that these are just my notes, and I'm not an expert (yet!). If your goal is also to master the fundamentals of Javascript, please head over to Watch and Code and start your journey there!
Anyway, that's what's going on here now - so I'll just jump in to today's notes:
Premium Membership Course
Chapter 5: AccountingJS
Lesson 4: IIFEs and sharing data
We use IIFEs so we can hide variables from the rest of the program, so we can avoid potential conflicts
Read MoreReading: "Principles" by Ray Dalio
I just finished Ray Dalio's book "Principles". Ray has an incredibly meticulous way of examining things - he sees everything in life and work as a machine that can be studied and optimized.
The way he sees the world is fascinating and enlightening, and this is one of those books that bends your thinking a bit after reading it.
His core principle is that you want to pursue meaningful work and meaningful relationships through an idea meritocracy and radical transparency.
He strongly believes that the best way of making decisions is through an idea meritocracy. Disagreements are put to a believability-weighted vote, where peoples' votes count differently depending on their expertise in the topic at hand.
He also talks a lot about "radical transparency" in work and in life. The main idea here is that people don't keep their opinions to themselves, and that people need to be open and honest in their dealings with one another in order to maximize the chances of making the right decisions and moving together effectively.
For example, if an employee thinks a manager did a poor job of running a meeting that day, the employee is supposed to tell the manager that they did a poor job, and the manager should (ideally) take this as actionable feedback without getting egos involved.
I'd be so interested to observe a day at Bridgewater's offices to see what the culture and dynamic is like. A group would have to buy into this philosophy completely and fearlessly in order for it to work as intended. I imagine that a lot of feelings could be hurt in this kind of environment if people fail to understand that criticism is for their benefit and not a sign of their standing in the company.
Ray goes into detail about his philosophies in designing effective teams and organizations. One key takeaway for me is the importance of understanding what you know and what you don't know - what you're good at and what you're not good at. When you're clear about these things you can deliver maximum value where you are strong, and where you are weak, you can identify other people who are strong in those areas and you can leverage their expertise.
He also gets into some interesting philosophical territory in talking about the best way to approach life and work. I like his perspective that there's no right answer - everyone needs to decide for themselves. For example, some people want to change the world, and others prefer to savor life - there's not necessarily a right answer. I would argue that the two don't have to be mutually exclusive, the those in one camp would do well to explore the other from time to time.
Dalio stresses the importance of understanding the past, because if you have enough historical data, most things you encounter are "just another one of those", and you'll be better equipped to deal with them.
It's a big book filled with a lot of stories and detailed explanations of his philosophies. He often talks about things from first principles, which can make for some robotic-sounding analysis of even the most seemingly simple topics - but this way of dissecting concepts is crucial to Dalio's way of thinking. He can analyze a concept with excruciating detail, but he can also draw simple and plainly-stated conclusions. This alternating between macro and micro-level thinking is important to his ability to see any given thing as a machine that can be optimized: you move to macro-level thinking to clearly define what you're going to optimize for, and then you move to micro-level thinking to decide how you're going do it - all the while documenting your decision-making process so it can be measured at the results phase, and then re-optimized.
Ray is an intense character with common-sense appeal. Overall I'd highly recommend this book for anyone who is interested in learning "thinking frameworks" that can be applied to any field.
You can buy Principles on Amazon here.
Reading: "As A Man Thinketh" by James Allen
Aside from the outdated (the book was written in 1902) and cringe-worthy use of the word "man" to refer to all of human kind, this short book is a good reset button for the mind. Something to bring your thoughts into alignment with your goals.
The basic message is that your inner thoughts shape your outer world and circumstances. Of course this concept can be extrapolated to form an outlook that ranges from practical and disciplined to wacky and mystical - but the core idea is valuable in optimizing your mental patterns to match your goals.
Here are a few of my favorite quotes:
"Until thought is linked with purpose there is no intelligent accomplishment. With the majority the bark of thought is allowed to drift upon the ocean of life. Aimlessness is a vice, and such drifting must not continue for him who would steer clear of catastrophe and destruction.
...
A man should conceive of a legitimate purpose in his heart, and set out to accomplish it. He should make this purpose the centralizing point of his thoughts...he should steadily focus his thought-forces upon the object which he has set before him. He should make this purpose his supreme duty, and should devote himself to its attainment, not allowing his thoughts to wander away into ephemeral fancies, longings, and imaginings. This is the royal road to self-control and true concentration of thought. Even if he fails again and again to accomplish his purpose (as he necessarily must until weakness is overcome), the strength of character gained will be the measure of his true success, and this will form a new starting-point for future power and triumph."
"Thoughts of doubt and fear never accomplished anything, and never can. They always lead to failure. Purpose, energy, power to do, and all strong thoughts cease when doubt and fear creep in."
"Men do not attract that which they want, but that which they are. Their whims, fancies, and ambitions are thwarted at every step, but their inmost thoughts and desires are fed with their own food, be it foul and clean".
Shotty featured in Product Hunt's book: "Best Product Launches of 2017"
I received some exciting news today from Product Hunt: Shotty is featured in their new book "Best Product Launches of 2017", alongside lots of other great products including products from Apple, Tesla, Facebook, Google, and more.
I learned an important lesson with Shotty: if you see a problem that you know how to fix, fix it! In a world of 7 billion people, someone else will surely have the same problem and they'll be thrilled to learn that a solution exists.
You can download Product Hunt's book, "Best Product Launches of 2017" here.
Image Credit: Moviesque.com
How Jerry Seinfeld taught me to finish projects
"Ideas are like rats in your house. You can sit there watching them run around, or you can choose one, and step on it until it's dead."
This is a paraphrased quote from Jerry Seinfeld that I heard once and it changed the way I pursue creative projects.
As creatives our heads are often filled to the brim with ideas. Ideas about how to improve the world around us. Ideas about new aesthetics we'd like to experiment with. Ideas about new projects to begin, etc.
We all know somebody who always has some Big New Idea™, but the next time you see them, they've simply conjured up another Big New Idea™ rather than pursuing the last one.
Just pick a rat and step on it.
Do not pick up your foot until it's dead.
Don't worry about whether the project is too small, or too big.
Pick a project. Start it. Finish it. Repeat.
One of my favorite articulations of this way of thinking.
I'd highly recommend studying Jerry Seinfeld's career as inspiration for your own. Much like designers or artists, we often (mistakenly) assume that these people have some gift. "Well of course he became a famous comedian, he's a funny guy".
But Jerry Seinfeld became the best in his field through pure discipline and determination. When you hear him talk about crafting a joke, you see he has a meticulous process - a structured way of thinking that he applies to his art over and over again. He learned this process from studying people he admired, and from good old fashioned practice. It reminds me so much of the way good designers work. When you've put in the hours, you see the patterns that others don't. You have a process that you can depend on to get you to the results you're after.
- Jacob
Tutorial: How to add a trendy diffused shadow hover state to buttons in Squarespace.
In this tutorial, I'll show you how to customize the buttons in a Squarespace site by adding an animated hover-state effect. This hover state will invert the colors of the button and add a trendy diffused drop shadow underneath the button to give a sense of depth - as if the button is floating above the page behind it.
Copy and paste my CSS and be done in a few seconds, or go through the tutorial step-by-step to pick up skills that will help you add your own customizations in the future.
Read MoreHow to design a great user onboarding experience
User onboarding is an art and science that deserves a lot of attention and care. First impressions can make or break your relationship with your user, and as a designer it's your responsibility to be a gracious host to everyone who walks through the door.
A few guiding principles:
Move users to their first "moment of success" as quickly as possible.
Decide what moment in your user experience stands out as a moment of success. For example, one of the first moments of success for a new user on Facebook would be adding their first friend.
This moment of success is where you need to guide your user to. Do this as quickly and pleasantly as possible.
Teach users both WHY to use your product and HOW.
Assume a new user is about 50% sold on why they should use your product. They're giving it a try, so they must be at least partially convinced, but onboarding is a great time to seal the deal and show the user why they need your product in their life.
Once they're convinced about the "why", they need to know how to use your product. Of course the user interface should be as intuitive as possible, so as to require as little explanation as possible - but a little guidance can go a long way in helping people orient themselves in your product. Do some user testing to identify places where people get stuck in the user experience, and to identify ways you can reduce confusion.
Convey the personality of your brand and product
Just like the lobby in a hotel conveys the general vibe of the hotel, your user onboarding experience will inevitably convey the personality of your product. Think about how you want your users to feel, and use language and visuals that evoke that feeling.
- Don't be boring
- Be friendly
- Establish trust
- Get to the point
For example, in Shotty, the app needs permission from the user to access the folder where their screenshots are stored. This could be done in a very transactional and functional way, but instead, we used it as an opportunity to do a few key things:
- Welcome our users into the app and be friendly
- Describe the end benefit ("To display your recent screenshots") that will result from taking this action
- Give a single, clear call-to-action.
Talk to your users and refine the experience over time.
By consciously designing an effective and enjoyable onboarding experience, you'll be making a massive improvement to your product. But you won't get it perfect the first time. Be sure to revisit this crucial part of the user experience from time to time with the goal of making it even better. Think of yourself as filing away friction points that are snagging people on the way in. Go through the experience yourself. Watch other people go through the experience. Ask lots of questions.
Investing in this part of the user experience is always worth it because not only does this impact every user the first time they use the product, but it also shapes their perception of your product and brand long-term.
If you'd like to see a detailed analysis of some of the best onboarding experiences, head over to useronboard.com to see how companies like Slack, Snapchat, Instagram, Pinterest, and others have designed their user onboarding experiences.
Made on Earth: Koh Phi Phi
I'm continuing to enjoy getting back into video production as a hobby. I used to do a lot of video production and motion graphics in 2011-2014, and am rediscovering my love for it. I think a lot of the concepts I've learned in design can be applied to video. Ultimately, both disciplines are a practice in creating an experience for another person, and giving them a certain feeling. To me, it's all about playing with someone's attention. With video, or in product design, someone has trusted you with their attention, and you have a responsibility to take care of it and give them the best possible experience.
In this video, I take care to change the shot every two seconds, and to keep the video short and sweet. I want the viewer to be left wanting a just a little bit more with each shot, and with the video as a whole. I don't want to dwell on any shot too long because it gets stale, and attention fades.
It also helps that Koh Phi Phi is a gorgeous island with impossibly blue water.
The tag at the end says "Made on earth." and is something I'll be talking about in a future post. I had fun designing the logo, making the period earth-blue, as a reference to Carl Sagan's Pale Blue Dot monologue.
This little blog now has readers in over 50 countries. Just wanted to say thanks.
I've been growing this site day by day since March 2017. In just 5 months it's been amazing to see the response of people visiting the site, reading and sharing articles, and contacting me personally. Now this little blog has readers from 51 countries and counting.
I believe strongly that creativity cannot happen in a vacuum, and that the internet provides an incredible opportunity for ideas to flourish and propagate unhindered by physical location, cultural barriers, and national borders.
As I type this post on a rainy day in Yangon, it's amazing to think about the growth I've experienced this year both creatively and personally. As a freelance designer, I'm finding that my creative barriers continue to fall away the more I step out of my comfort zone and live life as fearlessly as I can, using every new experience as a learning opportunity.
I'm committed to continue finding ways to deliver value through the skills I've worked hard to develop, and to making that value easily accessible online for others to share and reciprocate. It's been incredible to talk to people from so many different places around the world simply because we share a passion for creating things. Collaboration is the only way forward and I'm excited to continue to deliver value in as many ways as I know how.
- Jacob
Shotty Hits #2 on Product Hunt. #1 Trending in 'Design Tools'.
Shotty (my little app that gives you faster access to your screenshots on Mac) is on Product Hunt today and hit #2 (and #1 Trending in Design Tools)! The response has been overwhelmingly positive, and it's great to see so many people talking about how it solves their problem.
If you have a second, jump over to Product Hunt and give Shotty an upvote!
Tutorial: Create pie charts in Sketch with the Sketchy Pies Plugin
Creating a pie chart in Sketch can be surprisingly tedious. Luckily, the Sketchy Pies plugin can help you make basic pie charts a little bit faster. See how it works in this quick tutorial.
Read MoreDesigning For Fairness: Why Not Use Avatars In Courtrooms To Minimize Racial Bias?
Can we use technology to minimize the racial bias in the courtroom?
Read More