Forem: Amelia Ruzek

Scale Design Systems with Web Components

Amelia Ruzek — Sun, 10 May 2020 01:38:12 +0000

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.

Why does it matter?

Because web components do not rely on a framework, they are portable, free to evolve with a scaling application, maintain backwards compatibility, and may grant some level of future-proof stability. Web components are also supported by all major front-end frameworks which can save money if an app stack were updated or acquired by another company and converted. From a design perspective, a reusable and standardized component system can save time. Baked-in styling regulation also reduces styling bugs. In addition, the semantic readable code that custom elements create leads naturally to greater accessibility and scaled software management.

Resources to get started

If you haven’t any experience with design systems and component based design methods, I recommend reading through the following:

https://bradfrost.com/blog/post/atomic-web-design/

https://designsystemsrepo.com/

If you’re ready to get started and build some web components today, I recommend heading over to https://open-wc.org/ . The prepackaged bundle comes with all of the libraries that make writing web components super fun including LitElement, Storybook, and a collection of testing tools.

How To Use Git: A Beginner’s Guide

Amelia Ruzek — Sun, 10 May 2020 01:34:17 +0000

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:

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.

Git is not GitHub.

One of the most common misconceptions that I see with inexperienced developers is mistaking git as a shorthand nickname for GitHub. Git is not GitHub.

GitHub is a social cloud platform to contribute code, submit bugs, read about software, and share projects. Experienced developers understand that it includes git as a feature, but if you don’t understand git, you might simply store projects in GitHub repositories without understanding how to use the platform with the git feature. I have seen beginners use GitHub as a cloud library of projects to download and upload, and never use the git feature.

Git is something that can be used without GitHub. It can be used on its own on your desktop or with other cloud repository tools such as GitLab, Azure, JIRA, etc…

Git is not a desktop application.

It is software, but it’s different type of software. Unlike Microsoft Word or Adobe Photoshop, git is not something you can double click an icon and open up the program. However, you can download a variety of tools that will allow you to open something like this — a graphical user interface (GUI) — that helps you visualize what you are doing with the software.

This is important to distinguish because I’ve heard from some people that git is hard to figure out, only to learn later that they were simply using a complicated GUI. When I tell them that they can switch to a different GUI to visualize it differently, it blows their mind.

Imagine it this way, you can use the internet in Firefox, Chrome, Safari, etc… it’s still all the same internet, but you are using a different GUI to interact with it. Git is similar. In fact, you can use git without any GUI using just the command line / terminal.

Git is not a “save” tool.

I’ve heard git described as a way to save code. Say that to any beginner and they’ll give you the side eye like …

“um… can’t we just Ctrl-S save our files?”

Git is a version tool. It allows you to go back in time to find a file as it existed in a previous version, but it does much more than that. Unlike the view history tool in programs like Photoshop, Git doesn’t restrict you to a single timeline. You can create as many timelines as you need — each with its own history that you may travel through at any time. What’s more is that you can merge different histories from different timelines into a new file.

“But, I don’t get it. Why would I ever need that? It sounds like it’s over complicating things for no reason. I don’t make that many mistakes that I would want to go back in time to fix.”

Git is not a personal tool for individuals.

You can and should use it in your personal projects, but the primary audience that benefits from git the most is teams of developers.

This is how it works. When teams of developers work on a project, they want to work on the same folder and files — at the same time. Imagine this scenario without git. Developers might each copy and paste the folder onto their desktop and then start working. But, how would they combine all of the folders back together again? What would happen if one developer wrote code that breaks another piece of code? What if developers overwrite the same code in the same place?

“What about real-time collaboration apps like Google Docs? Why can’t developers use something like that?”

What happens when you want a team of developers to write the same section in 5 different ways at the same time? What happens if you want one developer to test or refactor a breaking new feature, but want the others to work on the original code in the meantime?

Git solves these issues for teams because each team member can work on his own separate timeline history (branch) and then automatically merge with his or her team’s code later.

“Ok, but if each team member has their own branch, remind me why using it on my own would be helpful?”

Git is not just for fixing things.

Git is also helpful for iterating on something that already exists.
Yes, you could copy and paste your folder each time you want to experiment with new tools and open source software that you found, but once you start using git instead, you might like how easy it is to quickly switch between branches and merge into your master project certain things but not other things.

Git is not hard.

You can do this! There are really only a few steps to start using git today.
First, Download a GUI. While I usually use the one built into Visual Studio Code, GitHub Desktop might be easiest for beginners.

Create a Repository, Clone a Repository, or Pull an Existing Repository
Write Code & Commit with quick message about what you did
Push your changes back to the software
Create a new Branch and repeat steps 2 and 3
Merge your branch to the Master and submit a pull request for the team to review.

Repeat again and again. Eventually you’ll get the hang of it, and wonder what all the fuss was about. Git is pretty cool!

How To Use Command Prompt

Amelia Ruzek — Sun, 10 May 2020 00:52:41 +0000

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. That’s fine — either one is fine.

Does white text on a black background make you feel like you’re definitely going to accidentally break your computer?

Click on the thumbnail icon at the top left of the application, then select properties.

Move to the colors tab and make it pink or purple or customize it any way you choose, then click “ok”

Help

Next up, type help. When you do this all of the default commands will be shown like a little dictionary.

If you’re planning to use Command Prompt for web development, then the only important commands listed here are cd and maybe mkdir.

The other commands you’ll use are additional ones that you download such as the node command, git command, and either yarn or npm commands.

Try it out

Ok, let’s try out cd first. The help dictionary said that cd will display the name of the directory or change the directory. What it doesn’t say is that cd only moves forward through directories. To move backward, you’ll need to use cd..
Since usually Command Prompt defaults to the directory of your Windows user profile, you’ll probably see something like this:

C:\Users\yourName>

Type cd.. and it will change to
C:\Users>

Then type cd yourName to move it back to the directory that you were in.

Open that same directory using File Explorer (the folder GUI). Click through the folders/directories. Do you see “Users” and the folder “yourName”? Keep the File Explorer open on one side, and on the other side user Command Prompt to type mkdir HelloWorld
Wow! There’s a new folder there now called “HelloWorld”

Wait…why does Command Prompt exist? What’s the point?

Websites used to take a really long time to set up. But with custom commands that you can download like the way that Node.js downloads the custom command npm , you can create websites and other things really quickly.

If you’ve already downloaded Node.js, you can type npm -l to see its dictionary of additional commands.

These commands are very useful for when you are downloading packages of existing scripts and helper frameworks for web development.

Not sure where to start?

I’m guessing you’re here because you know some basic HTML, CSS, and JavaScript, and you’d like to become a front-end developer, but all of the tutorials about frameworks and scripts have command line in their tutorials.

If that’s you, and you’re looking for an easy framework to learn, I recommend starting with Vue.

Follow these instructions https://cli.vuejs.org/guide/installation.html to get started, and good luck! You can do this!!

From zero to lead UI developer

Amelia Ruzek — Mon, 16 Mar 2020 01:58:37 +0000

As I was sharing some dev advice today, I paused. "How did I get here?" "What did I learn first?" This is my journey:

TL;DR? Scroll down to the recap.

High School

Nothing. I never took so much as an Intro to Computers course. I didn't know that web development was a job. I didn't know that any of this was an option.

College

I didn't decide on a major until halfway through my Junior year. By then, I had taken so many slack-off classes like Comic Book Illustration, Creative Marketing, and African Weaving that the only ONLY way to graduate on time was to declare a Graphic Design major. I don't usually admit that, but yes. It was an accident. My senior year I needed 3 courses in computer "stuff" to fulfill my major. So this brings us to the very first time I coded anything in "Web Design 101" The class focused on the design part, but I did get a very basic intro to HTML and CSS. I thought it was pretty cool and wanted to learn more, but for whatever reason the Computer Science course in "Web Development" required a prerequisite of "Java I" and "Java II" which... I took. So then I knew basic Java. So at this point, I realized that I actually loved this and wished I had been a Computer Science major, but what could I do... I was in my last semester, so I took that "Web "Development" class and learned the basics of JavaScript and PHP

Summer after College

I started hearing a lot about JQuery and I guess I sort of taught myself a few basics.

First Few Jobs

I worked in marketing doing design stuff, but I kept wanted to learn more about programming things. I remember attempting to learn Ruby on Rails and starting to learn the basics of using a terminal for the first time. I found out about this thing called HUGO and made my first markdown static site. I also used GitHub for the first time even though I had no idea how to use git. I didn't have any foundation to my knowledge. It was all just bits and pieces --articles and YouTube.

First Web Design Job

I think I should note that my graphic design job sometimes wanted me to design for web, and through that experience I got some exposure to the basics of Agile and JIRA. Also this was the first time that I found out about tools like Sketch and Zeplin and the concept of modular design and also the first time I had heard of React. I wanted IN.

Back to School

I went back to school and took an intro to web technologies class - this time at a graduate level... at Harvard. Everything I had ever learned was taught in the first 2 weeks. Let me repeat that. EVERYTHING I HAD EVER LEARNED ABOUT WEB WAS TAUGHT IN THE FIRST 2 WEEKS. I realized that I knew nothing, but I was excited to learn. So then I learned again, but more in detail HTML, CSS, JavaScript, JQuery, and PHP. But in addition, I learned about JavaScript Libraries --that such things as NPM and CDN exist--and about JavaScript templates, Data Queries, JSON, and the basics of hosting.

I was hooked. I had to take another class. I decided on a class that went even more into detail with JavaScript through a processing library called p5.js. This was my introduction to the concept of Object-Oriented JavaScript.

My next two classes were intensely focused on advanced HTML and CSS where I learned about how to correctly use floats, flexbox, CSSGrids, and CSS Variables, and that there are many many more tags and selectors than I will ever remember and also I learned about SASS and SVG as code for the first time.

But what about React?

Yeah, so I did still want to learn React, so on my own I made an attempt. Two attempts. Three attempts. Four attempts to sit down and just LEARN it. I was about to give up, when I read that Vue was easier. So I took a deep breath and... learned all the basics of Vue in a single week. I was excited!

New UI Job

So then I landed my first official UI design job. The second month that I was there, they wanted this interactive prototype thing and they said I could use whatever tools I wanted. So I thought it would be a fun opportunity to put my new Vue skills to the test. And that's when I learned Vue again at an intermediate level and became much more proficient with the terminal. I also got a chance to learn how to use the anime.js library. When I was finished, my team was like "lol, you're not a designer, you're a developer" and then I was a UI developer. And this was around the same time I just learned about how to actually use git

But this story has only just begun

My boss says, "so this software team is planning on using Angular, but we've got our other software team using React, they asked if you can provide UI as web components?" and I was like "Yes, Absolutely!" without any idea about what a web component was. After a bit of googling, I had Open-WC installed. So then I quickly learned about web components and how to use lit-element previous versions known as Polymer and packages and Storybook and Karma / Mocha testing. But then I needed a place to put all of this stuff, so my work told me to use Azure DevOps and soon I was writing automated test scripts in YAML, package version control scripts, and pipelines to an Azure cloud service.

The team had some existing designs that needed to be converted into a web components, so then I did some investigation and wrote my first Node.js script. They also wanted a documentation site about their design system and I learned how to use Vuepress static site. Then I became the lead UI developer, and that's kind of where I'm at right now. It's hard to remember everything. I might be missing something. ¯_(ツ)_/¯

RECAP Order that I learned stuff...

Basic HTML
Basic CSS
Basic Java
Intermediate Java
Basic JavaScript
Basic PHP
Attempt at JQuery
Attempt at Ruby on Rails
Using a Terminal for the first time
Basic HUGO (markdown static site)
Basic GitHub use
Basic Agile Method
Basic JIRA use
Concept of Modular Design and Development
Intermediate HTML
Intermediate CSS
Intermediate JavaScript
Intermediate JQuery
JavaScript Libraries (NPM / CDN)
JavaScript Templates
Data Queries
JSON
Basics of Hosting
p5.js
Object-Oriented JavaScript
Advanced HTML
Advanced CSS
SASS
SVG as code
Attempt at React
Basic Vue
Intermediate Vue
Anime.js
Comfortable with the terminal
git
lit-element (previous versions known as Polymer)
setting up package.json files
Storybook
Karma/Mocha unit testing
Azure DevOps
YAML scripting
package version control systems
basics of Azure cloud service
Basic Node.js
Vuepress (markdown static site)

Conclusion

Everyone learns at their own pace and in a different order. Don't compare yourself with me or anyone else. As long as you know more than you did yesterday, you're doing fine. Never stop learning.

P.S. I think the Java from college helped me a lot actually. It set up a lot of concepts for me like variables, types, parameters, encapsulation, abstraction, inheritance, polymorphism, private and public classes and variables, shared network of code, development environments, etc...

How to Use SASS/SCSS in the Anime.js Animation Library

Amelia Ruzek — Sun, 01 Sep 2019 21:15:24 +0000

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. Anime.js might not accept SASS directly, but does accept JavaScript variables.

Oh! Of Course!

If a value for a CSS property in anime.js can be a simple variable, the question becomes: How to Pass SCSS into a JavaScript Variable.

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

npm install --save-dev css-loader

Ok, Now What?

Export your variable directly from the .scss file using the css-loader syntax and then import your .scss into your JavaScript!

// variables.scss
$white-color: #ffffff;

:export {

whitecolor: $white-color;

}

//your js file
import variables from variables.scss

anime ({
...
color: variables.whitecolor;
...
})

And Finally
You have a JavaScript variable that can be added as a value for your css properties in your anime.js animations!

Searching for the Name of an Instructional Tool

Amelia Ruzek — Sun, 01 Sep 2019 21:14:26 +0000

I remember coming across a tool that allowed instructional designers to code up something and record with audio into a video, but it wasn't actually a video because the student could pause the recording at any point and change the code on the screen as if it were an interactive text editor instead of a static video. What is this tool/website called? I'm making attempts at googling it, but no luck so far.