DEV Community: John Palmgren

How to Make Buttons Stand Out with CSS

John Palmgren — Thu, 03 Mar 2022 15:21:48 +0000

The first thing you’ll notice when you add a button to your website is that you’ve taken a trip back in time to 1999. The default button style is very old-fashioned and I can’t think of a use case where you’d want to keep it as it is. The good news is that there are loads of CSS styles that can make your buttons pop.

Remove Default

The first thing to do is remove the default buttons styles. It’s one of
those things that you might do 100 times, but you still need to
google every time. The CSS on how to remove the default style is
below.



button {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}

This will turn a button that looks like this

into one that looks like this

Color and Size

The next thing to do is to add your own styles. Bold colors with high
contrast text will help the button stand out. You will also probably
want to increase the button’s default size to make it more
prominent and add some padding. A call to action button might look like this.



button {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}

Fonts

Fonts can be another great way to make a button look more attractive. I've added the font Oswald from Google Fonts. I like a bold sans-serif font on a button but you should choose whatever you like. Follow the instruction on Google to add the font to your project then insert font-family: "Oswald", sans-serif; into the button CSS

Border-radius and Box-shadow

So far the button is standing out a lot more but to make it looks like it seamlessly fits into the webpage it needs a couple more elements. border-radius and box-shadow. The border-radius will round the corners of the button. How much you want to do this is up to you. You can just take the sharpness off the edges of the corners or turn it into a full circle. box-shadow as the name suggests will give your button a shadow, which will give it a cool floating appearance. You can do a lot with box-shadow so read more about the properties here



Button {
  background: red;
  color: white;
  border: none;
  padding: 20px;
  font: inherit;
  font-size: 1.6rem;
  cursor: pointer;
  outline: inherit;
  border-radius: 15px;
  box-shadow: 5px 5px 5px #000;
}

Hover and Active

Now our button is looking pretty good, it’s time to add some
functionality. You can add all sorts of styles with :hover for when the button is hovered over and :active for when the button is clicked. Some of the things you might want to do are:

change the box shadow
change shape
change color For our button well change the brightness and box-shadow on hover and add indentation when it's clicked with ::active.



button:hover {
  filter: brightness(120%);
  box-shadow: 10px 10px 10px #000;
}

button:active {
  box-shadow: inset 2px 2px 10px #000;
}

For some awesome examples of what can be done by manipulating :hover and :active check out this website

`::After`

What other fun things can be done with buttons? You can combine ::before and ::after with :hover or :active to add extra content to the button. In the code below I’ve added ::after and :hover with CSS animation to create an underline when the button is hovered.



button::after {
  content: "";
  display: block;
  height: 5px;
  width: 0;
  background-color: #fff;
  transition: 0.1s width linear;
  margin: 0 auto;
}

button:hover::after {
  width: 100%;
}

Now it might be overkill having all of these effects but it shows you what can be achieved.

Accessibility

There are a couple of important accessibility requirements to bear in mind. Please please please use a <button> tag. You can create something that looks and works like a button using <div> and <a> but it doesn’t have the same semantic meaning as a button. This means that screen readers won’t know that it is a button. A button should look like a button. This is not just good for
accessibility but for anyone trying to navigate your site. With all the styles you can add it’s important to remember that it should still be obvious that the element is a button. It should look “clickable”. If it’s ambiguous it will cause confusion which is not great for accessibility or UX. Adding some box-shadow to the button often creates this effect. Make the button easily visible. Much like you want good contrast between text and the background, you also want to give your buttons lots of contrast. It’s also important to show the status of a button. If a button is going to remain depressed after clicking, to show that it is active, consider adding a border or underline so that it can’t be missed. This is important if the button shows the status of something rather than if it’s just to submit a form, for example. Compare:

Is a Web Development Bootcamp Worth it in 2022?

John Palmgren — Thu, 24 Feb 2022 14:31:52 +0000

What is a Bootcamp?

A Bootcamp is a course that runs over a short period of time -- often around 3 months. It is normally full-time and intensive, with self-study also required (although part-time options are sometimes available). It is taught by industry experts with an emphasis on giving you the skills you need to land a job.

Types of Bootcamps

There are lots of different boot camps that exist, all with their pros and cons. If you are considering doing a Bootcamp then research is key. below is a list of some of the types of boot camps that you can take.

Commercial

The most common type of Bootcamp is a regular commercial Bootcamp. Normally set up by a group of individual programmers or by a company wishing to deliver a service. There is usually a large upfront cost for this but there is a lot of variation so make sure to do your research.

Job Guaranteed

Another increasingly common type of Bootcamp is a job-guaranteed Bootcamp. As the name suggests, they will guarantee that you get a job as a result of completing the course. If you don't get a job within a certain amount of time you will not have to pay for the course. These Bootcamps may be more selective about who they let on the course as they want to make sure everyone has the potential to become employed by the end of it. There are two types of job guaranteed Bootcamps, ones where you need to pay upfront, and will be refunded if you are not able to get a job and ones where you only pay when you get the job. Clearly, there is less risk with the second option.

Funded

Depending on where you are in the world there may be other options available to you. In the UK the government has funded many "skills bootcamps" to improve the employability prospects of people needing to change careers.

what's the alternative?

Degree

There is always the option of going down the traditional route and getting a degree. This is certainly not essential but is one way to get your foot in the door. The upside to this is that you will be able to enroll in a graduate program after finishing your degree, and some employers will only hire people with a computer science degree. The downside (the big one) is that it costs a lot of money. It also takes a lot of time and may be overkill to get your foot in the door as a web developer. That being said, if it's the kind of thing that would interest you anyway, and you've got the time and money, then this is worth considering.

Self-taught

Another popular alternative to going to a Bootcamp is to teach yourself using online resources. There is certainly no shortage of resources, both free and paid. The upside here is that you can get an education in Web Development by spending very little money or even free. The downside is that some employers might not take you as seriously (but if you've got a solid portfolio, that will help). And you lack the format and direction of a formal course. You may also find it harder to make connections with others doing the same thing as you, but there are plenty of opportunities to do so if you look hard enough.

You can also choose to take a Bootcamp style online course. This may help give you a format of what to study and when, which is one of the hardest parts of self-study, but it will lack the in-person feedback you can get from a Bootcamp or degree.

My experience

I spent most of a year learning Python before switching and teaching myself web development for another year. After that, I joined a funded Web Development Skills Bootcamp.

I have enjoyed the journey of teaching myself. I find the thrill of learning and building new things satisfying in itself. That being said, it can be hard to maintain motivation when you're doing it on your own. It is also hard to decide what to learn when. There's no curriculum to follow and you have to decide for yourself whether to learn Tailwind vs SASS or, React vs Angular, for instance.

My personal bootcamp experience has been underwhelming. I don't want to put anyone off, and I'm sure this is not a universal experience. It's also worth bearing in mind, as shown above, that there are many different types of Bootcamps. The one I'm on is facilitated by a university and funded by the government as part of the Skills Bootcamp initiative. The program has been put together in a rushed way and there have been some poor staffing choices. There doesn't seem to be the drive to add value in the way I imagine a commercial bootcamp might, where the participants might have paid thousands of pounds to attend. But again, I must stress that this is just one experience and there are many other Bootcamps around.

Is it worth it?

There are many things to consider when deciding if a bootcamp will be worth it for you. Asking yourself the below questions can help you decide if it's for you

What's the cost?

The question at the front of your mind will probably be the cost. No matter how good it is, you need to be sure that you can afford it and that it won't leave you in a worse financial position.

What's the indirect cost?

As well as the advertised price, there are other costs involved. Most Bootcamps run full time which will mean you will either need to leave your job or drastically decrease your hours. This might be the right thing to do, but take into consideration the income you will lose from doing less, or no work. If you can take a career break or a sabbatical, then this will be less of a risk than if you have to quit your job. But you will still need to find a way to support yourself while you study.

Is there a guaranteed job?

Another factor to take into consideration is whether the bootcamp offers a guaranteed job at the end of the course. Make sure to read the terms and conditions carefully to be sure you're actually getting what you think you're getting.

What employers do they work with?

One of the most valuable things about doing a bootcamp is the connections that the organizers have with employers. Before you start a bootcamp, find out what employers they work with and how you'll be able to interact with them. It's also worth asking how they prepare you for employment. Do they teach you how to write a coding resume? Will they invite local employers or recruiters to talk to you about the process?

Do they have experience running Bootcamps?

Are they a new operation or have they been running for a long time? Just because they've been around for a while doesn't mean they'll be better but they would have had more time to iron out any kinks in their operation. If it's the very first time they're running the course then be prepared to be a bit of a guinea pig while they figure out how best to run it. It will also be easier to find out what previous students thought of the course. Have a look around in a few different places for online reviews.

Who are the instructors?

Most bootcamp instructors will be industry experts but it is worth doing a bit of research and finding out what experience they actually have. Although it's tempting to think that the more experience the instructor has the better, the crucial thing is actually how experienced they are as a teacher. Someone can have all the experience in the world, but if they're no good at explaining it to you then you'll have wasted your time. Check to see if the instructors have experience in running previous Bootcamps or another teaching role.

Do you know the basics?

While lots of Bootcamps will say that you don’t need prior coding knowledge, you will be doing yourself a huge favor if you learn a bit before you start. That way you'll be able to hit the ground running when you start the bootcamp and use the first few days as a recap on what you've learned. I would recommend looking for some free tutorials on YouTube or a site like freeCodeCamp. Learn some HTML and CSS and if you've got time learn the basics of how JavaScript works. This will give you the best possible head start for your bootcamp.

Hopefully, this article has helped you decide if a bootcamp is right for you. Bootcamps are often very expensive. Even if it's free you're paying with your time and lost income. But the potential rewards for completing a bootcamp are also great. It can give you more credibility when applying for jobs, allow you to network with other programmers, and turbo-charge your learning.

What's the difference between var, const and let

John Palmgren — Fri, 11 Feb 2022 17:59:41 +0000

The quick answer:

var has a different "scope" and it's normally better to use const and let
const is for variables that will not be updated
var is for variables that will be updated

Var

Before const and let the only way to declare a variable was with var. The sope of var -- where it can be accessed after it's been defined -- is global and function. So if it is defined outside a function it is globally scoped and available anywhere in the program. If it's defined in a function then it is function scoped and only available in that function. const and let on the other hand are block scoped. They are available in whatever block they are defined in. A block is anything inside curly brackets {}

The use of var can be confusing in blocks such as for-loops where you can inadvertently update the global scope, when you only want to update the block scope. For example

for (let i = 0; i < 5; i++){
  console.log(i) // 0/1/2/3/4
}
console.log(i) //undefined

for (var i = 0; i < 5; i++){
  console.log(i) // 1/2/3/4
}
console.log(i) // 5

For this reason it is preferable to use const and let over var

const

When you assign a value to a variable using the const keyword you tell JavaScript that you won't assign a new value to it. If you try, you will get an error.

It is worth remembering that while you can't update const with a new value, you can still change the content of the variable. This is the case in objects and arrays. The below is valid

let

Use let when you will need to update a variable later in your program. You still can't reassign a let variable once it's been declared. For instance you couldn't use let cat = "mogy" and then let cat = "felix" but you can update the variable with cat = "felix".

Unlike with const, you an initialize a variable with let without assigning it a value. The variable will then be undefined until you update it with a value

let number // number is undefined
number = 5 // number is 5

Understanding truthy and falsy in JavaScript

John Palmgren — Mon, 07 Feb 2022 18:12:47 +0000

We know that variables in JavaScript can hold a Boolean value of true or false. As well as this, other JavaScript values equate to truthy or falsy. What does this mean? Variables that don’t have a Boolean data type are still treated in a similar as true or false. There are 7 falsy values in JavaScript and everything else it Truthy

Falsy

The 7 Falsy values are

false
0
0n: zero as a BigInt
“”: empty string
null
undefined
NaN

We can check that the values are treated as false by assigning some falsy values to variables. Then using the ! operator we can console log if the statement is not true. Here we say if not test1 and not test2 and not test3 log "falsy".

const test1 = "" // empty string
const test2 = 0 // zero
const test3 = parseFloat("hi") // NaN 

if(!test1 && !test2 && !test3){
  console.log("falsy")
} // logs falsy

Truthy

Truthy values are everything that’s not in the above list. We can use similar code as above to check. You can see that even empty objects and arrays are truthy

const test1 = "hi" // non-empty string
const test2 = 2 // non-zero number
const test3 = {} // empty object

if(test1 && test2 && test3){
  console.log("truthy")
} // returns truthy

The truth is out there: truth vs truthy

It is important to bear in mind that truth and truthy are not the same thing. As is also the case for falsy and false. While an if statement will work the same whether something is true or truthy, if you were to use === to check the equality the results would not be the same.

const test1 = "hi" === true // test1 is false
const test2 = 2 === true // test2 is false
const test3 = [] === true // test3 is false

If you need to you can turn falsy results to false and truthy results to true using !!. While "hi" is truthy !"hi" is false not falsy. Therefore !!"hi" is the opposite of false and is true, not truthy.

Applications

There are many use cases for truthy and falsy values. It can be very helpful when dealing with user input and catching errors as you can check whether something is null, undefined or NaN. You can also use it to check that a submitted form field is not blank as empty stings are falsy. There are of course plenty of other ways to do this but it is a useful thing to know.

What is JavaScript Strict Mode?

John Palmgren — Thu, 03 Feb 2022 15:30:55 +0000

What is Strict Mode?

Strict mode is a way to make JavaScript errors more obvious. It can make the code more optimized for performance and prevent some security vulnerabilities.

You can get away with a lot in JavaScript. The language is very forgiving and many errors or things that could lead to errors are ignored. This can make it an easy language to learn because you're is not bombarded with syntax errors. But it can cause problems further down the line.

Strict Mode is a way to make JavaScript throw errors when it sees these mistakes which makes it easier to debug code and write better code in the first place.

Invoking strict mode

To invoke strict mode, use the syntax "use strict"; or 'use strict';

Strict mode can apply to a whole script or individual functions. For scripts, write "use strict" at the top of the script. For functions, you would put "use strict" at the top of the function body.

function example() {
    "use strict"
    return "this is an example function"
}

Modules and Functions in JavaScript are automatically in strict mode.

How it works

converting mistakes into errors

Regular or "sloppy mode" JavaScript will allow a number of mistakes to pass by without causing any error messages. As mentioned earlier, this can make debugging difficult if your code stops working as you intend it.

One of the things strict mode stops you from doing is assigning a variable without using the const let or var keywords. In regular JavaScript, this would create a variable in the global scope and would continue to work. However, it's not the behavior we want. It creates the risk that you could misspell a variable and accidentally create a new variable.

      let number = 10;

      //misspelled variable will create new global variable
      // where the desired behavior is to update number variable
      numbr = 20

      console.log(number) //10

      "use strict"

      let number = 10;
      numbr = 20 // throws error

      console.log(number) //only error output shown

Another mistake that won't show up in regular JavaScript is assigning a value to a non-writeable variable. An example of a non-writeable variable is NaN. A mistake like NaN = 10; will only throw an error in strict mode. Another example of this would be undefined = "string".

Strict mode Will also prevent you from setting properties on primitive values. A primitive value is data that is not an object and has no methods. There are 7 primitive data types:

string
number
bigint
boolean
undefined
symbol
null

Setting a property on a primitive would look like

      "use strict"
      true.string = "hi" // typeError
      "string".update = 10 // typeError

Some other mistakes that strict mode will turn into errors:

Trying to delete an undeletable property
Having the same names in a parameter eg function myFunc(a, a, b) {...}
Prefixing numbers with a 0. Find out why here

Optimizing variable use in JavaScript

Strict mode prevents certain actions which can lead to the code being less optimized. The JavaScript compiler is often able to say in which location each variable is stored. The variable name is mapped to its definition. This creates more optimized code. However, there are properties in JavaScript that make this impossible. Strict mode prevents these.

`with`

Strict mode prevents the use of the with property. with makes the properties of an object available as local variables in the statement.

      const myObject = { 
        title: "don't make me think", 
        author: "Steve Krug" 
      };

      with (myObject) {
        console.log (`this book was written by ${author}`) 
        // This book was written by Steve Krug

      }

Using with is not recommended because any variable inside the block might relate to a property of the object or a variable in the surrounding scope. Because this can only be evaluated at runtime it prevents the code from being optimized. For this reason, using with in strict mode will throw an error.

`eval`

Like with, eval makes optimizing javascript code difficult. eval is a function that takes a string and evaluates it as JavaScript code.

cont x = 5
eval("x + 5") // 10

The problem with eval (apart from its security vulnerability) is that it can introduce a variable into the surrounding scope. This means that code inside the eval function can change or override variables outside the function. And because JavaScript cannot check this until runtime, it can cause inefficiency.

In strict mode, any variables created in eval only exist within that function.

    eval("x = 5")
    console.log(x) // 5

    "use strict"
    eval("x = 5")
    console.log(x) // ReferenceError

Simplifying `eval` and `arguments`

In Javascript eval and arguments behave in ways that you might not expect. Mozilla says of the two:

Strict mode makes arguments and eval less bizarrely magical. Both involve a considerable amount of magical behavior in normal code: eval to add or remove bindings and to change binding values, and arguments by its indexed properties aliasing named arguments.

By using strict mode, eval and arguments are treated more like normal keywords

Making JavaScript more secure

JavaScript can be manipulated in the browser so that a person's private information can be accessed. JavaScript can prevent this from happening by partially transforming the JavaScript before it is run. However, if the code is not written well, this can take a lot of resources at runtime. Strict mode forces you to write JavaScript that will be more secure.

Without strict mode, it could be possible to access the global object from a function. This can then be used to manipulate JavaScript in ways that present a security risk. This has to do with the this value that is passed to the function. Because strict mode prevents this from being forced into an object, and if unspecified it will be undefined, malicious actors will not be able to access the global or window object. Read more about this here

Another security vulnerability in functions that strict mode sets out to fix is in JavaScript extensions. Using the extension .caller when a function is being called, will reveal the function that called it, and .arguments shows its arguments. This can allow access to potentially unsecured arguments through "secure" functions. If anyone tries to access .caller or .arguments in strict mode code the result will be a TypeError

New Keywords

In strict mode, there are some extra reserved keywords. These are words that are likely to be used in future versions of JavaScript. Their inclusion acts to ease the transition into newer versions of JavaScript. Some of these are:

implements
interface
package
private
protected
public
static
yield

For extra information on strict mode and more technical explanation on what it does, you can see the Mozilla documentation

Advanced array methods: array.forEach array.filter & array.map

John Palmgren — Wed, 02 Feb 2022 15:43:07 +0000

array.forEach, array.filter & array.map are array methods which take functions as arguments. Below we will look at how they work.

forEach

.forEach will loop through an array and perform an action (execute a function) for every iteration in that loop. This is how it works:

let string = "My tech stack is:"

const technologies = [" Mongo DB,", " Express.js,", " React.js,", " Node.js"]

technologies.forEach(myFunction)

 function myFunction (item) {
    string += item
}

Result

In the above example, we loop through each item in the array and call myFunction on each item. myFunction then adds each item to the string.

As with all of the array methods in this blog, it is common to use anonymous functions.

technologies.forEach((item) => {
  string += item
})

We could also do this with a for of loop but it may not be as easy to read. Although there are some small differences in how they are carried out, it's just personal preference as to which one to use.

Another way to do the same thing

for (let i of technologies) {
  string += i
}

forEach also takes some additional optional arguments: index and array

technologies.forEach((item, index, arr) => {
  string += index[arr]
})

The index provides the current index of each item in the array and the array provides access to the whole array on each iteration. The above example will provide the same output as before: the index will be 0 on the first iteration, 1 on the second, and so on, and the array will be the whole array. In this example index[0] === "Mongo DO"

Filter

The filter array method will loop through every item in the array, check it against a condition, and return a new array with items that meet that condition. Here is an example:

const numbers = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

function myFunction(item) {
  return (item < 10)
}

const lessThan10 = numbers.filter(myFunction)

Result

The function myFunction is executed for every iteration in the loop and each item is checked against the condition in the function. If it "passes" the condition, in this case being less than 10, then it is added to the new array lessThan10. Don't forget that you need to return the condition in your function.

As before, this can also be done with a for loop but it does take more code to write out.

const newArr = []

for (i of numbers) {
  if (i < 10) {
    newArr.push(i)
  }
}

Filter can also take the optional arguments: index and array. As with forEach this gives you access to the current index and the whole array on each iteration of the loop.

function myFunction(item, index, arr) {
  return (arr[index] < 10)
}

const lessThan10 = numbers.filter(myFunction)

Map

Map iterates through each element in an array and calls a function on each iteration. This can be used to make a change to each item in the array.

const numbers = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

function tenX(item) {
  return (item * 10)
}

const biggerNumbers = numbers.map(tenX)

Which of course gives us 0, 10, 10, 20, 30, 50, 80, 130, 210, 340

You can use the function passed to map to manipulate the array in any way you like, making it useful for creating elements to add to the DOM. In the below example there is an array of strings. The map method calls a function which creates a new <div>, creates a class and adds it to an existing element in the DOM. This is done for each item in the array.

array.forEach, array.filter and array.map are great ways to manipulate arrays in JavaScript. They are easier to read than for loops and often involve writing less code. This is particularly true if you are trying to do something more complex with the arrays.

How to become a web developer in 2022. What I've learned from teaching myself web development.

John Palmgren — Tue, 01 Feb 2022 18:41:34 +0000

Teaching yourself web development has never been easier. There are hundreds of free courses, free books and bundles of content on YouTube. There are also reasonably priced resources and some very expensive options like Bootcamps. You can go from not knowing what a variable is, to getting your first job, without having to leave your house. Yet, learning to become a web developer is not easy. It will take hundreds of hours and dedication to push through those inevitable periods of low motivation. If you're not taking a formal course like a Bootcamp or a degree you will also need to create your own learning pathway, by selecting the skills that you think are valuable and deciding how much time to spend learning them. It will always be a case of trial and error and there is no perfect way to do this.

Learning to learn

It sounds obvious, but if you're about to embark on the journey of teaching yourself web development, you're going to have to learn a lot. Any job advert will have a list as long as your arm with all the technologies they want their devs to know. The quote by Abraham Lincoln is overused but no less relevant here:

"Give me 6 hours to chop down a tree and I will spend the first 4 sharpening the axe".

It's worth spending time before you get started to think about how you learn. Do you absorb information better if you read it or hear it? Do you learn by doing or by making notes? I learn best by listening to people so I've got the bulk of my knowledge from online courses, YouTube and podcasts rather than books and blogs.

This is absolutely not essential to becoming a good developer but I find understanding the learning process really interesting. If you're interested too a couple of my favorite books on the topic are Peak Performance and Talent Code

Don't jump ship

This is a tricky one. If you start learning something and you're really not enjoying it, then trying something else might be the right thing to do. However, no matter what you're learning, you're going to go through stages where what you're doing seems hard, or boring, or irrelevant. The grass is always greener on the other side, as they say, and it's all too easy to decide what you actually need to learn is C# or Ruby or TypeScript. Chose a programming language and stick to it. Once you've developed a certain level of proficiency you can learn more. That's not to say that you should never change your mind but give it a lot of thought before you do.

Don't go too deep

While It's important to pick a language and stick with it, to be a web developer you will need many strings to your bow and you'll need to build a broad base of knowledge. For this reason, you don't want to become an expert on one technology before you start learning something else. It's great to have deep knowledge but you don't need to know absolutely everything about CSS (you never will) before you start learning JavaScript; and you don't need to be an expert in JavaScript before you start learning React. Learn the basics, get some practice, then learn something new. Just remember to keep going back to it and adding to your knowledge.

Learn the easy stuff first

I should say learn the easier stuff here. It should be hard enough to hold your attention and avoid you getting bored. What you want to avoid is getting so excited that you throw yourself into the really hard stuff, and end up stuck and demotivated after a few weeks. It's worth saying that everyone is different and we all have our own ways of learning so if this is what works for you then go ahead. That being said, you'll get a lot more done in the long run if you do something which you find enjoyable at a pace that you can maintain.

A few years ago I was interested in Machine Learning and instead of using pre-built tools to build some cool stuff I decided that I first needed to learn all the linear algebra and multivariate calculus that I might need to build a machine learning program. Needless to say, I didn't carry on with it for more than a couple of months.

If you're really into learning algorithms and design patterns or reading through documentation then do that but if you're not then start by building stuff and having fun.

The Tutorial Trap

Many people have written about the tutorial trap. This is where you get stuck watching tutorials but never seem to make any progress. If you feel like you forget
everything you learn as soon as you learn it, you may have fallen into the tutorial trap.

Here's the thing: It's actually very hard to just listen to tutorials and code along and actually remember what you've learned. If you're starting completely from scratch then it might be useful to watch a tutorial and code along line by line. If you're not, then it's best to use tutorials to introduce yourself to a topic or find one when you're stuck but just try and figure it out on your own the rest of the time.

We learn best when what we are attempting is challenging enough to keep us interested but not so challenging that we have no way to do it. Watching too many tutorials and just coding along isn't challenging enough (unless you're completely new to the topic). A far better way to learn is to start doing projects. If you don't think you know enough to start doing projects yet, you can build a simple web page after spending a few hours studying HTML.

Learn things other than programming

As I mentioned earlier, if you want to get a dev job there's a whole list of technologies that you need to know. But some of the most important skills are ones that you don't get while staring at a code editor. Soft skills are very important for any coding job. Good verbal and written communication and the ability to work well in a team will go a long way in helping you land your first tech job.

As well as soft skills, knowing some of the big picture stuff can make you into a more well-rounded programmer. Knowing some computer science and web fundamentals is always good. Also, having a basic understanding of how SEO works and things like Agile project management, which is often used by tech companies, will certainly not hurt. There are plenty of free introductory courses for all of the above.

Be consistent

Here's another book recommendation: Atomic Habbits by James Clear. In his book he talks about how taking some small positive action every day compound over time to make a big impact. This is a great way to think about your coding journey. Doing all-nighter coding sessions is fine if that's how you work but teaching yourself to be a developer is a marathon not a sprint. Being able to turn up and work consistently, no matter whether you're in the mood or not, will determine how successful you'll be.

Join a Community

How do you stay consistent? You need to share your journey with other people. Teaching yourself to code takes a long time and the best way to stay motivated is to have a community around you that is doing the same thing. There are lots of ways to connect to a community: many online courses have forums where you can connect with people. Some courses even have pre-build communities on platforms like discord and you can jump right in and get to know people. There's also Twitter and other social media. Just make sure that you're spending time with people who are constructive and want the best for you.

There are, of course, also offline communities that it is worth being a part of. Keep a lookout for tech meetup groups in your area. It will not only help you stay motivated but it's a great way to network and meet people already in the industry.

CSS variables: What are they and how to use them

John Palmgren — Wed, 26 Jan 2022 13:55:09 +0000

What are they

CSS custom properties aka CSS variables allow you to define a property in a variable that you can use over and over again. There are a number of use cases for this: often you will use the same colors for a brand or a particular theme. The big benefit of using variables for commonly used properties is that if you need to change it further down the line you can simply change the variable. This will save you from having to find everywhere in your code that you used that property.

How to use them

Apply the variable to an element

You first need to declare what element it should be applied to. You can apply it to any element but it is common to apply it to the root element so it can be used anywhere in your CSS (global scope). Use the :element {} syntax to select the element. You can choose any name for your variables but they are case sensitive.

:root {
  --bg-color: #4B6CDB;
  --text-color: #fff;
}

Calling the variable

You can call the variable by using var(). Instead of putting in the property name call the variable name inside the var function

.myClass {
  background-color: var(--bg-color)
  color: var(--text-color)
}

CSS Hacks: What is ::before and ::after?

John Palmgren — Tue, 25 Jan 2022 15:47:35 +0000

::before and ::after are CSS pseudo elements. They can add content before or after that element. This is the syntax

.class::after {
  content: "some content"
}

This can be used with pseudo classes to add content when an event occurs. In the example below text is added when there is a hover event.

The ::before and ::after pseudo elements can also be added with no content content:"" and can be used to add styles to the document. The below example shows how you can add a border when hovering with ::after and the transition property.

What else can you do with ::before and ::after? Leave a comment below

CSS Pseudo Selectors: What's the difference between :first-of-type and :first-child

John Palmgren — Mon, 24 Jan 2022 12:59:44 +0000

first-of-type and first-child are very similar pseudo selectors and will often target the same element. When they don't it can be confusing, so let's look at what they do.

First Child

first-child will look only at the first child element. In example one below .example-one div:first-child {} will select the first div. If we were to try that with example 2 and write .example-two div:first-child {} it would select nothing. This is because the first child is not a div, its a <h1>

<section class="example-one"> 
    <div></div>
    <div></div>
    <div></div>
</section>

<section class="example-two">
<h1>Hello World</h1>
<div></div>
<div></div>
</section>

First of Type

When you use the first-of-type pseudo selector it will select the first child element that matches that type. Consider the same code as above but with first-of-type.

example-one div:first-of-type {} will still select the first <div>. This is because it's the first child and the first of type.

example-two div:first-of-type {} doesn't select nothing, like it did with first-child but selects the second child which is the first element of type <div>

What's the difference?

There can be only one element that matches the first-child pseudo selector. This is because every parent element only has one element that is the first in that list.

For every parent element, there can be many fist-of-type elements. Every element that is the child of a parent element can be selected with the first-of-type pseudo selector.

Flexbox complete guide for beginners

John Palmgren — Fri, 21 Jan 2022 14:42:22 +0000

What is flexbox?

Flexbox is a property that you can use in CSS that will position any child elements in accordance with a few simple rules. What does this mean? Well instead of spending a lot of time positioning elements with margins, position absolute and float you can just tell flexbox how you want all the elements to be displayed and let it take care of the hard work for you.

How does it work?

Flexbox Axis

Flexbox aligns the item in the flex container on either the main or the cross axis. Think of these as lines going from the top to bottom of the page and from left to right. The direction in flexbox can also be set to either row or column. If the direction is row then the main axis runs from the left to right of the page and the cross axis runs from top to bottom. If the direction is set to column then its the other way round: the main axis runs from top to bottom and the cross axis runs from side to side. Don't worry if this all sounds very confusing, as you start playing around with flexbox it will be easy to figure out.

Display

The first thing you need to do is give your parent element a display property of flex

.example {
    display: flex
}

or for an inline element display: inline-flex

Flex direction

You can now specify a flex direction. This has to do with, you guessed it, the direction your elements line up. Let's create some numbered <div>s.

<section class="flexbox">
  <div>
    <p>One</p>
  </div>
  <div>
    <p>Two</p>
  </div>
  <div>
    <p>Three</p>
  </div>
  <div>
    <p>Four</p>
  </div>
</section>

.flexbox div {
  background-color: blue;
  color: white;
  margin: 2px;
  width: 100px;
  height: 100px;
}

.flexbox {
  display: flex;
}

The default for flexbox is flex-direction:row. You can set this explicitly or leave it as default.

Set flex direction to row reverse and you will see the order of the <div>s reversed

The other two direction properties are flex-direction: column; and flex-direction: column-reverse;. As the name suggests this will order the contents of the container into a column in normal or reverse order.

Flex Wrap

The Flex Wrap property defines what should happen when the size of the container is reduced so that the children no longer fit in it. When you have flex-wrap: nowrap; the items will not drop onto the next line if they run out of space, instead, they will first reduce their width and then stop being visible in the viewport.

flex-wrap: wrap; on the other hand simply pushes the children onto the next line.

And flex-wrap: wrap-reverse; will do the same thing but populate the bottom line first

Justify content

Here's where flexbox comes into its own. Instead of spending hours with CSS positions only to add an extra element and find that it no longer works, with justify content you can position elements in relation to each other with just one property. Let's have another look at our <div>s to see how it works

justify-content: flex-start;

justify-content: flex-end;

justify-content: center;

justify-content: space-around;

justify-content: space-between;

justify-content: space-evenly;

Align Items

This property determine how items should be displayed on the cross axis. To illustrate this I've made the wrapping div container grey.

align-items: flex-start; Keeps the items aligned to the top of the container

align-items: flex-end; will align the items to the bottom of the container

align-items: center; will center the items horizontally. This is super useful as it's not always easy to do with regular CSS

align-items: baseline; takes the first element in each flex item, and lines things up by the bottom of that element.

align-items: stretch; will stretch the items from the top to the bottom of the container as long as the height property is not set on the items

Align Content

The align content property deals with how the items display when on multiple lines. For this reason, it will only take effect if the flexwrap property is set to wrap and the content is displayed over more than one line.

align-content: flex-start;

align-content: flex-end;

align-content: center;

align-content: space-between;

align-content: space-around;

align-content: stretch;

Flexbox children

Flexbox children are properties which are given directly to the children in the flexbox container and control how they behave.

Order

Order allows you to determine the order in which each element is displayed in the flex container. For example, lets give our <div> number three an order of -1

order: -1;

Now <div> number three is at the front. This is because all items have a default order of 0 so the order is now -1, 0, 0, 0. If we change the order of <div> number three to 1 we will then have 0, 0, 0, 1 and it will look like this.

order: 1;

You can of course give any div any order value and therefore place them in whichever order you wish.

Flex Grow

Much like flex order, flex-grow is applied to one or more of the children in a flexbox container and will prioritize that child to grow to fill the available width while all other children stay the same size. Let's do that with <div> number three again.

flex-grow: 1;

Flex Basis

This defines the default size of a child element and all other elements will fit in around it. As with any other measurement you can give the size in pixels, rem or percent.

flex-basis: 33%;

Flex Shrink

This sets the order in which items should shrink in the available space. The default value for all flex children is 1. If all other items stay at 1 and you change the value to 0 that element will grow to fill the available space. If you set it to 2 It will shrink, leaving the other items to fill the available space. In this example we'll set <div> two and three to a value of 2

flex-shrink: 2;

Now It's your turn

You have two challenges. The CSS selectors have been provided. Just use flexbox to complete the challenge

Edit the codepen to get the two sections to look like the picture below.

Edit the codepen to center the words one two three and four in the <div>s.

3 Ways to add CSS to your website

John Palmgren — Thu, 20 Jan 2022 15:20:50 +0000

what is CSS

Fashion Fades, style is eternal

YVES SAINT LAURENT

CSS is where we provide the style to our website. It tells the browser how to position the elements on the page, what color they should be, what font to use and almost anything else you can think of which relates to how the website looks.

Inline CSS

You can add CSS directly into the HTML elements. You can do this with the style attribute. It will look something like this.

<h1 style="background-color:blue; color:yellow">Hello World</h1>

A couple of things to be aware of about using inline style

It has the highest precedence. That means, if in the example above, I was to give the <h1> a different style using an internal or external style sheet it would not change the style.
It is not recommended to use this method — particularly in big projects. The reason for this is that it's easy to lose track of which styles you put where and if you want to make a change you have to search the whole document and make each change individually.

Internal CSS

The second way to add CSS is in the <head> section of HTML page. You will need to add it in a <style> tag. Don’t forget that you need to add the selector (h1 / p / body) because you’re not applying it directly to the element. It should look something like this

<head>
    <style>
      body {background-color: pink;}
      p {color:white; font-size:2rem;};
    </style>
</head>

While there’s nothing wrong with using internal CSS it does mean, if you have many HTML pages with similar styles, you will end up writing the same code over and over again in the head of each file. A better way to do this would be with an external style sheet.

External CSS

The most common way to use CSS is to have all your CSS rules in a separate CSS file and link that to any HTML files which will use it. First of all, you want to create a file ending .css where you will write all your CSS code. You may want to call it styles.css. Save this in the same folder as your HTML or a subfolder called styles or something similar. Then in the <head> section of your HTML, you will need to point to that CSS file. Use the format below, assuming your CSS file is called styles.css and it’s saved in your HTML folder

<head>
  <link rel="stylesheet" href="styles.css">
</head>

Here the rel="stylesheet" tells the browser that this is our CSS stylesheet and the href="styles.css" points to where this folder is located relative to the HTML document.

The benefit of using external style sheets is that you can use the href to import it into many HTML documents. An example of where this might be useful is if you have several pages with the same header. You can create the rules in one CSS stylesheet and import it to all the HTML documents with that header.

DEV Community: John Palmgren

How to Make Buttons Stand Out with CSS

Remove Default

Color and Size

Fonts

Border-radius and Box-shadow

Hover and Active

::After

Accessibility

Is a Web Development Bootcamp Worth it in 2022?

What is a Bootcamp?

Types of Bootcamps

Commercial

Job Guaranteed

Funded

what's the alternative?

Degree

Self-taught

My experience

Is it worth it?

What's the cost?

What's the indirect cost?

Is there a guaranteed job?

What employers do they work with?

Do they have experience running Bootcamps?

Who are the instructors?

Do you know the basics?

What's the difference between var, const and let

The quick answer:

Var

const

let

Understanding truthy and falsy in JavaScript

Falsy

Truthy

The truth is out there: truth vs truthy

Applications

What is JavaScript Strict Mode?

What is Strict Mode?

Invoking strict mode

How it works

converting mistakes into errors

Optimizing variable use in JavaScript

with

eval

Simplifying eval and arguments

Making JavaScript more secure

New Keywords

Advanced array methods: array.forEach array.filter & array.map

forEach

Result

Another way to do the same thing

Filter

Result

Map

How to become a web developer in 2022. What I've learned from teaching myself web development.

Learning to learn

Don't jump ship

Don't go too deep

Learn the easy stuff first

The Tutorial Trap

Learn things other than programming

Be consistent

Join a Community

CSS variables: What are they and how to use them

What are they

How to use them

Apply the variable to an element

Calling the variable

CSS Hacks: What is ::before and ::after?

CSS Pseudo Selectors: What's the difference between :first-of-type and :first-child

First Child

First of Type

What's the difference?

Flexbox complete guide for beginners

What is flexbox?

How does it work?

Flexbox Axis

Display

Flex direction

`::After`

`with`

`eval`

Simplifying `eval` and `arguments`