What is command prompt for?

Search for Command Prompt and open the application.

Usually tutorials about web development say something about “terminal” “command line” “command prompt” “bash” “shell” and then say something about “run this command” etc…

The first thing to know is that all these applications are very similar and serve similar functions. There ARE differences, but for a beginner, you don’t really need to worry about it. If you’re on a Windows computer, use Command Prompt as the application.

Sometimes they’ll tell you to download Node.js first, and if you have done so, you’ll probably see another application show up in the search called Node.js Command Prompt.

When I was learning how to use git a few years ago, all of the tutorials had this picture of these lines, dots, and arrows like a metro map. It didn’t make sense, and don’t worry, this is not one of those tutorials.

If you’ve been searching around the web, I’m sure you’ve seen the images. They look kind of like this:

Image for post
Image for post
This is a confusing git illustration

The problem with these illustrations is that while they make sense to someone using git on the regular, they are absolutely positively confusing to someone learning git for the first time.

I think a better place to start is by explaining what git is not. …

Image for post
Image for post
Photo by Clint Adair on Unsplash

If you’ve used front-end web frameworks such as Angular, React, or Vue, you might be familiar with the concept of component-based design. UI/UX software like Sketch, Adobe XD, and InVision include tools for creating component libraries from design systems. But as a design system scales, how can we create a single source of truth to span multiple framework architectures and even non-framework web applications? One answer is to use web components.

What are Web Components?

Web components allow a developer to re-use the function and style of a designed asset such as a button, card, list, icon, etc. Each component is a predefined template that may be used again and again anywhere in the web application or across different web applications, even if they are using different web frameworks and architectures. Web components are not a broad term for the component systems seen in various frameworks. Rather, it is a standardized collection of native web technologies including the shadow DOM and custom elements that provide built-in HTML / JavaScript support for cross-framework and non-framework component-based design. …

Anime.js is an excellent JavaScript animation library that’s easy to use and easy to read. Documentation lists accepted values for properties as unit-less, specific unit, relative, colors, from-to, and function based. However, what might be obvious to some and not so obvious to others is that values can also be JavaScript variables.

Image for post
Image for post
Photo by Clément H on Unsplash

Oh! Of Course!

If a value for a CSS property in anime.js can be a simple variable, the question becomes: how do you pass SCSS into a JavaScript variable?

Good news! There’s a package for that: css-loader

Ok, Now What?

Export it directly from the .scss file and then import your .scss …

Shopping for a computer? Get past the tech lingo with this simple guide.

The technical specifications of desktop computers and laptops usually fall into the following categories: Processor, Memory, Graphics, and Storage. Depending on your needs, you might be either overpaying for something you don’t need, or haven’t set aside the budget for something you do need. Let’s break it down and find out.

CPU Processor Speed

The processor speed measures how many different tasks your computer can accomplish at the same time without slowing. If you keep many programs open at once, you’ll need a higher speed.

Image for post
Image for post
Tip: Sometimes a product title will only list the processor name. Look through technical specs to find the speed as this is the number that matters more than the brand and model name.

Additionally, gaming or graphics programs will often be weighted more than other programs. So, for example, a 3D graphics rendering engine might be worth the same as multiple word processor or music applications. If you’re using your computer regularly for professional creative or gaming careers, I recommend a high tier processor so that you’re able to work on multiple projects at the same time. …

Image for post
Image for post
Photo by Aricka Lewis on Unsplash

Failure happens to everyone, so how do some people bounce back so quickly?

Recently, an interviewer asked me to recall a moment of failure. In a panic, I deflected the question with a story about a time someone had failed me. It was a poor choice, and what I didn’t realize until later was that I was experiencing failure even within that very interview by being unable to think quickly and clearly when presented with a question I hadn’t been prepared to answer. It shouldn’t have been difficult — I fail every day. In fact, both design and web development careers involve continual minute by minute micro-failures that are addressed with debugging, testing, and conversations with others. But no one ever talks about it like that; failure is rebranded as problem solving. …

Image for post
Image for post

I put together a comparison chart of web builders Wix, Weebly, BigCommerce, Jimdo, Volusion, Squarespace, and Shopify. Nothing is linked or sponsored. Information was collected Jan 11, 2019 so be sure to double check with providers as prices and packages may change. Enjoy!

Image for post
Image for post

Drag and drop web builders are everywhere. Visual no-code SaaS start-ups are everywhere. Easy eCommerce hosting sites and free pages are everywhere. Snippets, hacks, free templates, and frameworks are everywhere. Where is the line between a real developer and a fake?!

STOP… You ARE a web developer, and if you’ve been avoiding these tools because you think it’s “cheating,” DON’T.

A real web developer knows where, when, and why to use different tools. Any method of getting a web page on the web is fair game. There are no bad tools, no cheats, and no judgement of your abilities if you choose one tool over another. What’s much more important than what you use is why you use it. …

For absolute beginners and especially for illustrators and designers.

Image for post
Image for post
“A man drawing on an iPad with a stylus” by Dose Media on Unsplash

Set Up Part 1: The Brackets Text Editor

First, download a text editor. I like Brackets (http://brackets.io/) because it’s easy to add plugins and quickly view your project live.

Open Brackets. It will default to the “Getting Started” page. On the far left panel is a file directory. On the far right panel, there’s a lightning bolt and an extensions lego. The lightning bolt lets you see your code as it will appear on a browser. The extensions lego lets you add features to Brackets.

Optional: Click the extensions lego. Search for “Emmet” and install. This is a way to use keyboard shortcuts to write code faster. Search for “SVG Preview” and install. …

Image for post
Image for post
“Erika Archer” From Mixamo

JavaScript isn’t just for websites. You can use it for many other creative projects including…drum roll… Augmented Reality! As a traditional web JavaScript developer, the task might seem a little daunting. You might have no idea how to model a 3D character, let alone animate one, and adding a script to handle events on top of it?!? But yes, you CAN do it. You might be surprised how easy it is.

What’s the IDE here? Where do I even start?

There are a bunch of ways to build Augmented Reality, but if you just want to get your feet wet, I suggest downloading Lens Studio. https://lensstudio.snapchat.com/

Why? Everyone (under 30) has Snapchat — you might already have it on your phone — so it’s easy to test your creations and actually share them when you’re finished. Plus, it’s a stable tool that’s well documented. Bonus, if you love making things, there’s a career in this because many businesses are trying to boost their Snapchat social presence using AR. …


Amelia Ruzek

designer, developer, and student of Digital Media Design @HarvardEXT For consultation or other work requests, check out www.ameliaruzekklein.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store