DEV Community: Amy

Make It Work, Then Make it Pretty

Amy — Fri, 17 Jan 2020 19:09:02 +0000

I thought I'd write a small post about something that can both hinder and help a beginner programmer: wanting to write perfect code.

It may come across as obvious when I say this is impossible, we've all heard the saying "don't let perfect be the enemy of good", but it's easy to forget these things when we are in the middle of learning a new language, especially as a beginner. After all, you want to make sure you're doing things the proper way. If not, what's the point in following tutorials and coming to sites like this one if we are just going to ignore the advice we come across. I think what sparked me to write this post was seeing this thread on Reddit. It seems that there must be a balance between clean code and meeting deadlines, whether those deadlines are set by ourselves, an employer or a client.

1. Make It Work, Then Make It Pretty

Okay so I think this short phrase has really helped me out over the last few days, I've been learning a new language and really engaging with the course I'm following. Whilst it's super motivating and nice to follow a structured course, it can also be frustrating to see examples on codepen that are so much cleaner than mine, doing the same job in half as many lines of code. But that's when this saying needs to be remembered! If you find yourself comparing the code to your first project in a new language to something you have found online, remember this.
You're still in the "make it work" phase. They're in the "make it pretty" phase.
You can be forgiven!

2. Practicality

This phrase can also be applied in a practical sense. If you find yourself spending a lot of time on each section of code to make it run as efficiently as possible, that's a good thing, it means you have an eye for detail and don't want to produce projects to a lower standard than what you've personally set. But you might find that separating concerns out, into first getting the code to work and then making it efficient and readable might be a faster way of working. It's usually easier for us to focus on one thing at a time, so it we spend a long time cleaning up code we might lose track of what we were doing in the first place. Dividing up your work flow and accounting for time, perhaps at the end of each session, to tidy everything up could work to your benefit if you have an eye for detail but also have deadlines.

3. Subjectivity

When you're in the "make it pretty" phase, there's a lot you could do to achieve that end. In other words, don't get stuck in a paradox of cleaning up your code, because there's a lot of ways to do things. You can divide code up in quite few different ways and it will still be readable and concise. There is a level of personal preference when it comes to coding: which naming convention you use, which reset you use, which preprocessor you like, which library is better. Find what you like, which does the job for you best and work with it for a while. If limitations come about, do some research, but don't get stuck. These tools are here to make coding easier and more powerful for us, after all.

Thank you for reading! Any comments are appreciated :)

Who Knew Pseudo Elements Were So Great!

Amy — Sat, 11 Jan 2020 20:10:51 +0000

There are a bunch of useful ways to use pseudo elements that are easy to forget about, this pen shows a few ways I commonly use them myself.

Before I get started, here's a link to the codepen that goes along with this post.

I use pseudo elements in all sorts of ways whilst creating websites. Some ways are pretty common, whilst other times it's easy to forget that a pseudo element would be perfect for keeping code tidy. This dev.to post gives 4 ways to use pseudo elements.

1. Make Backgrounds Pretty

Firstly, add a background class, either on the body itself or a div. Depending on your usecase.

<body>
  <div class="background"></div>
</body>

Here, I am going to use the ::after pseudo element to give the background two different colors.

.background {
    background-color: azure;
    height: 100vh;
    width: 100vw;
    z-index: -1;
    position: relative;
}

.background::after {
    position: absolute;
    content: '';
    background-color: cadetblue;
    width: 100vw;
    height: 50vh;
    left: 0;
    bottom: 0;
}

So, the background in this case is set to fill the screen size, and the ::after element is set to take up 50% of the view height, and to stay at the bottom of the .background class.

Notice that the position for the background class is set to relative. This has to explicitly be stated for pseudo elements, or their positioning will be applied relative to the body element. setting the z-index will put the pseudo element behind other elements on the page.

The pseudo element itself, in this case, ::after, must also have content:'' and positioning set to anything other than relative, or it will not appear on the screen. Leave content empty for now, I will give an example using it later on in this post.

Tip: add transform: skewY(NUMBERdeg); to angle the ::after element, it looks pretty cool!

2. Text Styling

This one works on any text, from headers to paragraphs and links.

<h2>The first letter of this heading is different</h2>
<p>The first line of this paragraph is different. Lorem ipsum dolor sit, 
   amet consectetur adipisicing elit. Incidunt pariatur maxime quia ratione 
   dolor est soluta possimus minus quis deleniti ipsum vero, quo vitae dicta 
   mollitia rem eum ab repellendus?</p>

Using the ::first-letter and ::first-line pseudo elements lets us edit specific parts of text on a page, we can get the "newspaper" look with a larger first letter, for example.

h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2rem;
}

h1::first-letter {
    font-size: 1.5em;
}

I'm using 'rem's for the original font-size and 'em's for the pseudo element, this way, it will stay relative to the text size.

The same rules apply to ::first line:

p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
}

p::first-line {
    font-family: bolder;
    color: midnightblue;
}

3. Bullet Points

My favourite way to use pseudo elements is for styling lists. The following list is styled using a ::before pseudo element to change the bullets to look colourful.

First step is to create an unordered list and remove the styling.

<ul>
  <li>Practise CSS stlying</li>
  <li>Use more pseudo elements</li>
  <li>Style this list</li>
  <li>Create beautiful websites!</li>
</ul>

ul {
  font-size: 1rem;
  list-style: none;
}

Removing the standard bullet points means I can add my own and make them look better.

li::before {
    display: inline-block;
    content: '';
    border-radius: 50%;
    height: 0.5em;
    width: 0.5em;
    margin-right: 1em;
    background-color: #ffeb3b;
}

The most important part to remember here is to display the pseudo element as an inline-block. To make them round, I applied a border-radius of 50%.
Therefore, no matter the size of the block, the border radius will adjust. After that, the margins are used to move the bullets away from the list.

Lists can also be styled using shapes as bullet points. My example uses a hex reference, a list which can be found here. This is where the conttent property is used.

li::before {
  display: inline-block;
  content: '\25B8';
  margin-right: 1em;
  color: #ffeb3b;
}

4. Make Links Fun

Using a ::before or ::after pseudo element to style links can add a nice flare to the hover or focus state. By scaling the X axis from 0 to 1 over a transition, a smooth underline is created. Here's the code.

a {
  text-decoration: none;
  transition-delay: 0.4s;
  position: relative;
}

a::after {
  position: absolute;
  content: '';
  height: 2px;
  width: 100%;
  bottom: -2px;
  background-color: #fafafa;
  transition: transform 0.5s ease-in-out;
  transform: scaleX(0);
}

Now all I need to do is tell the pseudo element to scale up when the link is hovered over or focused on.

a:focus::after, a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

Transform-origin tells the transform where to start, changing this can create different effects.

Thank you for reading! I've been using pseudo elements a lot recently and thought I'd share the usecases I have for them. There are more, and if anyone has any interesting or obscure uses for pseudo elements, let me know!

What I've Learned About Remote Work

Amy — Thu, 02 Jan 2020 13:31:31 +0000

Over the last few months, I have learnt a lot about working remotely through making mistakes, falling into bad habits and having to correct them. I no doubt have a lot more to learn about working from home, but for now, here's my small collection of tips and pointers for getting started with remote work.

Discipline = Freedom

I heard this a lot, i thought it was a bit cliché but it wasn't until I started working on freelance projects that I realised just how important it was. The first website I made was for my Dad's business, a static website consisting of 5 simple pages, yet it took me about a month to complete. Of course, this can in part be understood, it was the first project I had committed myself to, my web development skills have improved a lot since then through sheer practise. But it was also because my schedule was all but non-existent. Most nights I was awake until 2 a.m., which in turn meant I had no morning routine and was tired if i woke up earlier than 10 a.m.

I wanted my evenings back. I knew I loved frontend development, but I missed spending time with my friends without feeling guilty that I hadn't got my work done for that day.

this meant even the decision to close my laptop by 8 p.m. everyday vastly improved my routine. I had to become a bit tough on myself. I haven't finished my work today? It can be completed tomorrow. I can always wake up a little earlier to get in some extra work. Better that than sitting at a desk in my room whilst my family watches that film tonight that I've wanted to watch for weeks.

Don't get me wrong, sometimes when I'm in the flow and I know I can finish a project that night if I just keep coding for a couple more hours, I'll give myself the time. But these late nights are few and far between, besides, the evidence suggests that a consistent sleep routine and healthy breakfast does wonders for focus and productivity. Here's a link to Joe Rogan's Podcast about the importance of sleep with Matthew Walker, an expert on the subject.

Work/Life Balance

This one goes hand in hand with the previous tip. As you can probably tell, my work/life balance was all over the place. I'd do nothing but write CSS for days in a row and then realise I hadn't spent any quality time with my girlfriend, played video games or taken time to relax and recharge.

This is pretty common for me, and I think it's the same for a lot of people. When we become interested in something new, like web development, we can become a little obsessed. I wanted to learn everything I could, I'd watch tutorials about CSS layouts all day, I'd read countless articles before bed about why this text editor is better than that one. Sometimes, i'd find myself doing these things when I was out with friends or family for dinner... that is unhealthy!

Sure, understanding CSS layouts is important for frontend design, and choosing the right text editor for you will speed up your work flow, I'm not disputing the importance of learning and researching your field of study, I just want to highlight finding a balance, because watching just one more video or reading one more article won't drastically improve your development skills, but it can easily eat away at your free time. Add the video to your Watch Later playlist, bookmark that article and call it a day.

Make Beginning Easy

I'm going to focus now on some tips for kickstarting good remote work practises, and losing the bad habits. It's all well and good to want to have a healthy work/life balance, but getting started with a good morning routine when you've been staying up all night for weeks now can be hard. The saying goes a good day starts the night before, so lets start there.

I use TeuxDeux for daily ToDo planning, I can see my lists for the next few days, what I don't finish that day moves to the next day automatically and I usually leave the tab open on my tablet to quickly tick off what I complete. Having my ToDos easily available helps me start my day. Whilst I use Notion and Google Calendar also, a quick, simple ToDo app is where i'd suggest beginning when it comes to organising your day.

Often, mental effort acts as a barrier to entry for having a productive day, so leaving your workspace tidy, having a few things on your ToDo list ready for the next day, and even leaving your laptop open rather than closed makes the process of beginning easier. The less physical resistance to beginning work, the less mental resistance too.

Simplicity is Your Friend

In the same vein, if your work process is simple whilst still being effective, you will find it makes remote work a lot easier. I mentioned Notion earlier - it is a great app, it's powerful, tidy and I like it for project management, but I've found it to be too complicated for general note taking and ToDo lists. It takes too long to open on my phone if I want to write an idea down quickly or check off a completed task. I like to use a smaller application for these things.

Since I store my projects in Notion, I can easily get distracted with side projects I'm working on just because I see them when I open the app, to avoid this, using a separate application in the day for general note taking is useful.
Before I finish for the day I log everything I need to into Notion, which helps me to stay organised.