DEV Community: Maya Gershovitz

Make your Github profile into your calling card

Maya Gershovitz — Fri, 23 Oct 2020 06:43:01 +0000

In recent years, it has become increasingly common for programmers to attach a GitHub profile to their resume. Using GitHub as a portfolio is especially significant for Junior developers (as most of them would tell you). But it’s not just for Juniors - many experienced developers also cultivate an active GitHub profile filled with personal projects, open-source contributions, etc.

Indeed, GitHub is a great place to store your work and keep track of code versions. Having said that, it was clearly never designed to be used as a portfolio. Git is a tool, and GitHub provides all of Git's functionality, as well as many other convenient options. However, like many other work tools, it is not welcoming to visitors who have come to view your profile.

Sorry, Octocat, it's not personal!

A few months ago, GitHub released the Profile-Level README: a new feature that should help make a GitHub profile more beautiful and friendly. I found out about this ingenious feature on Twitter back in July. And here, a hop, skip, jump, and one global pandemic later, I got around to creating my own profile README.

What is a Profile-Level README?

README files are basically description files written in Markdown, which is a language for creating lively web pages from simple text files. It is customary to add such files to Git projects, in which you can explain and give important context to anyone who uses or contributes to the project.
A Profile README file is one that can be uploaded to your GitHub to explain and give important context about yourself.

In practice, this feature allows us to create a README file that will become the new home page of our GitHub.

How can you use a Profile-Level README?

The purpose of such a homepage, in my opinion, is to direct visitors who reach your GitHub profile to where you want them to go.

For example, if you are looking for a job and have uploaded some projects to your GitHub, you can create a profile page where you will write that you are actively looking for a new position, detail a bit about the roles you have filled in the past and the technologies you’ve worked with, and provide a link to the project you are most proud of. Those who are interested will, of course, be able to reach other projects, but you’ll want them to start with the highlights.

Here's an example of a style that I liked:

Alternatively, if you do not have one specific project you want to promote, and instead want to show that you have contributed to open source projects, you can add links to them as in this example:

From what I have seen, a lot of developers use their GitHub profile as a kind of LinkedIn with a technical focus. Projects details, programming languages, new fields they are currently learning about, and of course, prominent links to their Twitter, a professional blog, YouTube channel, or any other technical content they create.

In this GitHub repo, you can see many examples of GitHub profile pages and get ideas: https://github.com/coderjojo/creative-profile-readme

To illustrate how much of a difference this change makes, I want to show you my own personal GitHub, before and after creating a profile page.

On the old page, you can see some projects, personal details, and some statistics.

On the new page, you can see my silly sense of humor, where I work, two blog references, and a nice project I did (with a GIF!). There is no doubt the new page looks better and is also a more accurate representation of me, both personally and professionally.

In the meantime, I have created a minimal design on my page with some links and icons, but if you browse the internet, you will see that people have done some truly crazy designs, which are very eye-catching. Anything that will help you stand out is excellent.

How to create a Profile-Level README?

It's super simple! Go to your GitHub, and create a new repo with the exact same name as your username. When you're done, you'll see this nice message from GITHUB:

Now, you can edit the README file created in the repo using Markdown. This README file would be the homepage of your GITHUB profile. There are many Markdown guides online that will help you create headlines, insert images and GIFs, or anything else (note that it is not possible to insert scripts on these pages). Intellij, the editor I use, has a plugin for previewing Markdown files. If you use an editor that does not have a suitable plugin, you can design your profile with the help of dedicated sites that do the same.

One crucial note to remember is that any change you make to your README file immediately becomes part of your profile page, so you should only push to Git when you like the result.

Ok, now go ahead, get creative, make beautiful GitHub pages, and don't forget to share your creations!

CSS art or: How, at 32, I finally learned how to draw

Maya Gershovitz — Thu, 30 Jul 2020 20:22:39 +0000

I want to open this article with a confession. My name is Maya, I'm 32 years old, and I can't draw. At all.

Fun fact: I'm so bad at drawing that at the beginning of the COVID-19 lockdown, when everyone was playing Draw Something, I started a dedicated channel in the office Slack for sharing my shockingly-bad paintings, all for the purpose of raising morale. In other words, "We may be housebound, but at least we can draw a house."

All in all, I felt just fine with this particular flaw. We all have our strengths and weaknesses, and I have no complaints about mine. But then I discovered CSS art.

CSS art is the art of drawing on an HTML page using colored boxes. It has been around for years, So I don't know why I only just discovered it! From the moment it happened, however, I started seeing CSS paintings everywhere. On Twitter, Facebook, and everywhere in between, I saw cute, impressive, sophisticated, and sometimes just plain silly drawings.

The reason I got so excited about CSS art was that in addition to being beautiful, it spoke my language -- code. When all I have in my hand is a pen and paper, I know nothing good will come of it. But when I can use code, I know I can make amazing things. A painting that can be coded sounded promising.

So, I decided to look into the subject. Was it possible? Would CSS art allow me to make something cute that I can look at proudly, knowing I created it (other than my son, of course)?

Ready to explore!

Photo by Katya Austin on Unsplash

It’s worth mentioning that my personal history with CSS is a bit complicated. I’m a BackEnd developer, and I am not particularly artistic. So, even when I do write a front-end feature, I always leave the design part to someone else. A few years ago, a friend who is an amazing frontend developer took pity on me and made me a cheat sheet. It was a collection of basic explanations about the different elements of CSS and how they relate to each other. That was the first step toward becoming a little less afraid of CSS.

Two years ago, my friend Daniella and I built a WordPress site for a nonprofit organization. When we started dividing the work between us, I aimed to avoid any CSS work, as usual, and leave the job for the real expert. Luckily, Daniella convinced me this would be a great opportunity to experiment and learn more. I can't say I became a CSS master by the end of the project, but I definitely learned to enjoy the web page design process, which included moving elements, playing with colors, and obsessing over precision, distances, and margins.
Thanks to that project, when I decided to create a blog for myself, I chose to do so on the WordPress platform. I wanted to control the look of my blog and be able to change its design as I saw fit. And indeed, it’s an ability of which I take advantage frequently.

To sum it up, my knowledge of CSS is basic, but I'm not afraid of it anymore. In my experience, this is all it takes to start using new technology.

So, how do you get started?

One evening, I sat down at my computer and looked for a beginner's guide to help me into the world of CSS art. After a bit of searching, I found this course. I only did the first lesson, but I was impressed with it. This is a light hatred and friendly course, and it’s suitable for complete novices.

I started watching the tutorial video, and at the same time, created a new codepen project and started to work on my own drawing. The tutorial in the video uses a basic drawing of a panda as a demonstration. Since I wanted to create something unique, I chose to draw something else. After a quick mental search of all the cute animals I knew, I chose to do a penguin because its symmetry seemed the easiest to reproduce. I worked through the first lesson and did my painting in about two hours. At the end of the evening, I finished creating the sweet penguin found in the main photo of this post.

The work on the drawing was super fun and exceptionally satisfying. One of the hardest aspects of being a backend developer is that my work doesn’t include immediate feedback. Frontend developers can see tabs and graphs come to life in front of their very eyes. In contrast, backend developers have to settle for knowing the app is extracting information a little differently now or working faster than before. Don't get me wrong, I love my work. I think it’s the best job in the world, but sometimes you just want to write a few lines of code and get a cute penguin in return.

Another amazing element of working on the drawing was to see how moving a few pixels right and left affects the expression of my penguin. A small change in the proportions of the eyes relative to the body turns him from an innocent penguin into an evil monster. Creating CSS art allows you to move elements around and play with proportions until everything falls into place. Plus, you can do this without deletions, without keeping track of multiple layers and without really knowing what you're doing. It's fun.

This little penguin wants to be your friend.
This little penguin is up to no good.
This little penguin doesn't know what's going on.
This little penguin is not even sure he's a penguin.

So, did I convince you that CSS art is worth getting into?

If so, here are the main lessons I’ve learned:

Pay attention to the correct placement of elements inside each other, in a way that makes it easy for you to change all related objects at once. For example, in the case of the penguin, the white pupils are elements within the black eyes, so they change in relation to them. When the eyes move, they move with them. It greatly simplifies the creation process, saving you from changing a million elements at a time.
Do not obsess over getting every detail just right. It is best to push forward, leaving the final adjustments of the proportions and colors until the end when you’ve got the full picture. At that point, it's much easier to understand what works and what doesn't.
All elements in your CSS picture are square or circles. If you see something that looks more complex than that, it's a sign that it combines a few elements. You should think about the basic shapes you want to use in advance and understand how complex they are. For example, my penguin's face looks a bit like a heart. Ambition is good, but you should determine in advance how ambitious the project you chose will be.
Just get started and don't be afraid. It's fun and easier than it looks!

And for a cherry on top, here’s an idea for a project.

A few days after I created my penguin, I felt like challenging myself with something a bit more complex. To do this, I chose the beautiful logo of my company: BigPanda.

Working on the logo was significantly more difficult than creating my penguin. The shape of the panda's face is a nine-sided polygon. To build the polygon, I had to combine two triangles and three trapezoids, all created using border manipulation. In retrospect, I discovered there was a much simpler way to create the shape I needed. Despite this, I am glad I did it the hard way, as it allowed me to learn and improve my skills.

My Pure CSS BigPanda Logo

Official BigPanda Logo

When I finished, I thought the final result was beautiful and decided to share it in our office Slack channel (I have the loveliest, most supportive team in the world, so why not enjoy it?).
When Gal, one of my teammates, saw the logo I made, he led me to two very shocking revelations.

First, there is a feature in CSS called clip-path. Using clip-path allows you to create a huge variety of shapes in CSS, which would have saved me about two hours of work. Gal recommended this site he uses for creating clip paths, and I will definitely use it for my next project.

*After checking again, I discovered the clip-path explanation in fact appeared in the last few minutes of the lesson I linked above, and I missed it. Oops! Another important tip is to complete lessons if you want to get all the information.

Secondly, there is a repo of company logos created with pure CSS in GitHub. I think it's a really cool idea. I love it when people create projects that encourage others to be more creative, in turn.

I encourage anyone looking for an idea for an interesting CSS art project to create her company logo and put it in the repo, as there are so many other companies not represented there!

Good luck to everyone, go forth and create!

This post was originally published in my tech blog (Hebrew)!

Read it at https://algoritmim.co.il/2020/06/07/learning-to-draw-with-css-art/.