hacks - freeCodeCamp.org

10 CSS Hacks Every Web Developer Should Know

freeCodeCamp — Wed, 10 Feb 2021 18:34:13 +0000

By Gert Svaiko

While CSS isn’t as widely used as JavaScript, it’s still in the top 10 coding languages, according to Redmonk. Since CSS is quite robust, reasonably easy to learn, and universal across different browsers, it’s popular among website developers.

As it is with every coding language, there are several shortcuts or hacks with CSS that allow you to write cleaner code, improve design elements, and save valuable time. Furthermore, you can directly insert these snippets to your site using a code editor.

It is also important to know that you don’t have to be a senior web developer to use CSS. Data from W3Techs show that CSS is used by 96 percent of all websites, and being able to use CSS to enhance the layout and appearance of a website is integral to the functioning of major open source CMSs like WordPress.

In fact, most of the biggest website builder tools (generally known for promoting a “What You See Is What You Get” or WYSIWYG approach) now allow users to insert custom CSS code.

If you’re new to CSS, freeCodeCamp has an excellent tutorial video on Youtube where you can learn the basics. If you already know the fundamental aspects, then let’s get started with these ten CSS hacks.

1. How to position content in the center with CSS

Placing content in the middle of the screen might be tricky. However, you can use position: absolute to override the dynamic placement and always position the content in the center.

It also works with every resolution across devices. However, always double-check if everything is positioned as you want it and the element looks natural even on smaller screens.

Example snippet:

section {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 30px;
}

2. How to fix an element’s position in CSS

Despite websites being dynamic, you might have some elements that you want to fix in certain positions. You can do so by using the position:absolute script.

However, use this method carefully and test it beforehand on every screen size and resolution so that it doesn’t break your site’s design.

Following this script with a specific position node assures that the element remains in the same position for all users.

Example snippet:

/* suppose you want to fix your sidebar’s position and size */
.sidebar {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 300px;
  height: 150px;
}

3. How to fit images to the page in CSS

There are few things worse than your images spilling over your site visitor's screen. It can absolutely break your site’s design and discourage users.

However, with this simple hack, you can make sure that your images always fit the visitor’s screen regardless of the device they’re using.

Example snippet:

img {
  max-width: 100%;
  height: auto;
}

4. How to edit styles on a single page in CSS

If you have a CMS and want some of your posts to look different than others, you can use a custom class to override the site's CSS styles. This ensures that you only tweak a single post page and leave the others as the default.

When you create a post on a WordPress blog it includes the post's id as a class in the body, for example:

Then you could do something like this to change the styling for just that post's page:

.postid-330 {
  font-size: 24px;
  font-weight: 750;
  color: red;
}

Other popular CMSs allow you to add custom classes to individual posts. For example, Ghost lets you mark a post as a featured post and adds a .featured class.

However, if you find yourself using this method a lot, it's best to modify the main CSS style sheet to avoid writing unnecessary code.

And this doesn't just apply to CMSs – if you have a simple website with multiple HTML files, you could apply custom styling to elements throughout your project, and adjust them through the same CSS file.

For example, if you have page with the class .landing:

html>
<html lang="en">
  <meta charset="UTF-8" />
  <title>Landing Pagetitle>
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <link href="css/style.css" rel="stylesheet" />
  <body class="landing">
    <h1>Landing Pageh1>
    <p>My landing page.p>
  body>
html>

And another with the class .about:

html>
<html lang="en">
  <meta charset="UTF-8" />
  <title>About Pagetitle>
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <link href="css/style.css" rel="stylesheet" />
  <body class="landing">
    <h1>About Pageh1>
    <p>My about page.p>
  body>
html>

You could add this to your main style sheet to only adjust the styling on the about page:

.about {
  font-size: 24px;
  font-weight: 750;
  color: red;
}

5. How to consolidate styling in CSS

If you know that you want to add CSS styling to multiple items, then writing these pieces of code out one by one takes time. However, when you separate items with commas and write the CSS style inside, then the style is added to all of them.

This helps you save time and lower your code’s weight because you don’t have to write a similar line of code multiple times.

Example snippet:

/* suppose you want to add a solid border around your caption element, image, and paragraph element */
.caption, img, p {
  border: 2px solid #000000;
}

/* you can also limit the selection using selectors */
p.white-text, div > p.unique {
  color: white;
  font-size: 24px;
}

6. Visited link styling in CSS

The default style of visited links that users have clicked on might not work great with your current site’s style. You can use CSS code to tweak how the links look before and after visitors have clicked on them.

You can then match these with your site’s overall style to create a unique experience.

Example snippet:

a:link {
  color: #ff0000; /* the unvisited link is red */
}
a:visited {
  color: #ee82ee; /* the visited link turns violet */
}

7. Hovering effect delays in CSS

The :hover selector is a CSS pseudo-class which allows you to create a hovering effect. However, you can further stylise this by adding a transition element to delay the hovering effect.

While it looks neat, it also creates a sense of movement in the users’ eyes, further drawing attention to the element.

Example snippet:

.entry h2 {
  font-size: 48px;
  color: #000000;
  font-weight: 750;
}

/* Next, add a delay to the hover effect */
.entry h2:hover{
  color: #f00;
  transition: all 0.5s ease;
}

8. How to disable text wrapping and add ellipsis in CSS

If you’re tight on space for your text, you might need to cut it short to fit other elements. Sure, you can manually tweak each of the text elements, but that takes time and some trial and error.

What you can do instead is combine overflow, white-space, and text-overflow to create a natural break in the text that’s easy on the eyes.

The following example sets the limit on the text width, hides the overflowing part, disables the text wrapping, and adds an ellipsis (...) to indicate there’s more text for the users.

Example snippet:

.product-description {
max-width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

9. Initial letter stylizing in CSS

The stylized initial letter or drop caps have been used in book and magazine design for a long time. It works by grabbing the readers’ attention and getting them interested in reading the first line.

While you may think that this style has aged, you can also design it to look modern and still capitalize on the psychological effect it creates for your visitors. Furthermore, drop caps option is also written into the CSS language, so you can effortlessly use it and give your paragraphs a new look.

Example snippet:

p:first-letter {
  display: block;
  float: left;
  margin: 5px;
  color: #000000;
  font-size: 60px;
}

10. How to reset CSS styles

Last but not least, you might need to override all the default styling attributes across different browsers for your design to work flawlessly.

Each browser has its own style sheet, with built-in default styles, and this can sometimes be a problem when you’re trying to make your website look consistent on all browsers.

You can use a comprehensive CSS reset from Eric Meyer which covers almost all bases. However, you can also achieve a minimal reset result, which you can borrow from Jeff Starr:

* {
  vertical-align: baseline;
  font-weight: inherit;
  font-family: inherit;
  font-style: inherit;
  font-size: 100%;
  border: 0;
  outline: 0;
  padding: 0;
  margin: 0;
}

And there you have it, ten hacks to make your CSS code look neater, decrease your coding time, and add visitor-friendly elements.

Thanks for reading!

I’m a writer passionate about digital marketing, web development, and cybersecurity. You can reach me on LinkedIn here.

You might also enjoy some other articles I have written:

Image Credit

Hacks for Creating JavaScript Arrays

freeCodeCamp — Wed, 18 Jul 2018 22:59:31 +0000

By Glad Chinda

Insightful tips for creating and cloning arrays in JavaScript.

_Original Photo by [Unsplash](https://unsplash.com/photos/FXFz-sW0uwo?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" rel="noopener" target="_blank" title="">Markus Spiske on Creating Arrays: The Array Constructor

Here is a simple code snippet showing the use of the Array constructor.

From the previous snippet, we can see that the Array constructor creates arrays differently depending on the arguments it receives.

New Arrays: With Defined Length

Let’s look more closely at what happens when creating a new Array of a given length. The constructor just sets the length property of the array to the given length, without setting the keys.

From the above snippet, you may be tempted to think that each key in the array was set to a value of undefined. But the reality is that those keys were never set (they don’t exist).

The following illustration makes it clearer:

This makes it useless to attempt to use any of the array iteration methods such as map(), filter() or reduce() to manipulate the array. Let’s say we want to fill each index in the array with the number 5 as a value. We will attempt the following:

We can see that map() didn’t work here, because the index properties don’t exist on the array — only the length property exists.

Let’s see different ways we can fix this issue.

1. Using Array.prototype.fill()

The **fill()** method fills all the elements of an array from a start index to an end index with a static value. The end index is not included. You can learn more about fill() here.

Note that fill() will only work in browsers with ES6 support.

Here is a simple illustration:

Here, we have been able to fill all the elements of our created array with 5. You can set any static value for different indexes of the array using the fill() method.

2. Using Array.from()

The **Array.from()** method creates a new, shallow-copied Array instance from an array-like or iterable object. You can learn more about Array.from() here.

Note that Array.from() will only work in browsers with ES6 support.

Here is a simple illustration:

Here, we now have true undefined values set for each element of the array using Array.from(). This means we can now go ahead and use methods like .map() and .filter() on the array, since the index properties now exist.

One more thing worth noting about Array.from() is that it can take a second argument, which is a map function. It will be called on every element of the array. This makes it redundant calling .map() after Array.from().

Here is a simple example:

3. Using the Spread Operator

The spread operator (...), added in ES6, can be used to spread the elements of the array, setting the missing elements to a value of undefined. This will produce the same result as simply calling Array.from() with just the array as the only argument.

Here is a simple illustration of using the spread operator:

You can go ahead and use methods like .map() and .filter() on the array, since the index properties now exist.

Using Array.of()

Just like we saw with creating new arrays using the Array constructor or function, **Array.of()** behaves in a very similar fashion. In fact, the only difference between Array.of() and Array is in how they handle a single integer argument passed to them.

While **Array.of(5)** creates a new array with a single element, 5, and a length property of 1, **Array(5)** creates a new empty array with 5 empty slots and a length property of 5.

var array1 = Array.of(5); // [5]
var array2 = Array(5); // Array(5) {length: 5}

Besides this major difference, Array.of() behaves just like the Array constructor. You can learn more about Array.of() here.

Note that Array.of() will only work in browsers with ES6 support.

Converting to Arrays: Array-likes and Iterables

If you have been writing JavaScript functions long enough, you should already know about the arguments object — which is an array-like object available in every function to hold the list of arguments the function received. Although the arguments object looks much like an array, it does not have access to the Array.prototype methods.

Prior to ES6, you would usually see a code snippet like the following when trying to convert the arguments object to an array:

With Array.from() or the spread operator, you can conveniently convert any array-like object into an array. Hence, instead of doing this:

var args = Array.prototype.slice.call(arguments);

you can do either of these:

// Using Array.from()
var args = Array.from(arguments);

// Using the Spread operator
var args = [...arguments];

These also apply to iterables as shown in the following illustration:

Case Study: Range Function

As a case study before we proceed, we will create a simple **range()** function to implement the new array hack we just learned. The function has the following signature:

range(start: number, end: number, step: number) => Array

Here is the code snippet:

In this code snippet, we used Array.from() to create the new range array of dynamic length and then populate it sequentially incremented numbers by providing a mapping function.

Note that the above code snippet will not work for browsers without ES6 support except if you use polyfills.

Here are some results from calling the **range()** function defined in the above code snippet:

You can get a live code demo by running the following pen on Codepen:

See the Pen QxeXzm by Glad Chinda (@gladchinda) on CodePen.

Cloning Arrays: The Challenge

In JavaScript, arrays and objects are reference types. This means that when a variable is assigned an array or object, what gets assigned to the variable is a reference to the location in memory where the array or object was stored.

Arrays, just like every other object in JavaScript, are reference types. This means that arrays are copied by reference and not by value.

Storing reference types this way has the following consequences:

1. Similar arrays are not equal.

Here, we see that although array1 and array2 contain seemingly the same array specifications, they are not equal. This is because the reference to each of the arrays points to a different location in memory.

2. Arrays are copied by reference and not by value.

Here, we attempt to copy array1 to array2, but what we are basically doing is pointing array2 to the same location in memory that array1 points to. Hence, both array1 and array2 point to the same location in memory and are equal.

The implication of this is that when we make a change to array2 by removing the last item, the last item of array1 also gets removed. This is because the change was actually made to the array stored in memory, whereas array1 and array2 are just pointers to that same location in memory where the array is stored.

Cloning Arrays: The Hacks

1. Using Array.prototype.slice()

The **slice()** method creates a shallow copy of a portion of an array without modifying the array. You can learn more about slice() here.

The trick is to call slice() either with0 as the only argument or without any arguments at all:

// with O as only argument
array.slice(0);

// without argument
array.slice();

Here is a simple illustration of cloning an array with slice():

Here, you can see that array2 is a clone of array1 with the same items and length. However, they point to different locations in memory, and as a result are not equal. You also notice that when we make a change to array2 by removing the last item, array1 remains unchanged.

2. Using Array.prototype.concat()

The **concat()** method is used to merge two or more arrays, resulting in a new array, while the original arrays are left unchanged. You can learn more about concat() here.

The trick is to call concat() either with an empty array([]) as argument or without any arguments at all:

// with an empty array
array.concat([]);

// without argument
array.concat();

Cloning an array with concat() is quite similar to using slice(). Here is a simple illustration of cloning an array with concat():

3. Using Array.from()

Like we saw earlier, **Array.from()** can be used to create a new array which is a shallow-copy of the original array. Here is a simple illustration:

4. Using Array Destructuring

With ES6, we have some more powerful tools in our toolbox such as destructuring, spread operator, arrow functions, and so on. Destructuring is a very powerful tool for extracting data from complex types like arrays and objects.

The trick is to use a technique called rest parameters, which involves a combination of array destructuring and the spread operator as shown in the following snippet:

let [...arrayClone] = originalArray;

The above snippet creates a variable named arrayClone which is a clone of the originalArray. Here is a simple illustration of cloning an array using array destructuring:

Cloning: Shallow versus Deep

All the array cloning techniques we’ve explored so far produce a shallow copy of the array. This won’t be an issue if the array contains only primitive values. However, if the array contains nested object references, those references will remain intact even when the array is cloned.

Here is a very simple demonstration of this:

Notice that modifying the nested array in array1 also modified the nested array in array2 and vice-versa.

The solution to this problem is to create a deep copy of the array and there are a couple of ways to do this.

1. The JSON technique

The easiest way to create a deep copy of an array is by using a combination of [**JSON.stringify()**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) and [**JSON.parse()**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse).

JSON.stringify() converts a JavaScript value to a valid JSON string, while JSON.parse() converts a JSON string to a corresponding JavaScript value or object.

Here is a simple example:

The JSON technique has some flaws especially when values other than strings, numbers and booleans are involved.

These flaws in the JSON technique can be majorly attributed to the manner in which the JSON.stringify() method converts values to JSON string.

Here is a simple demonstration of this flaw in trying to **JSON.stringify()** a value containing nested function.

2. Deep Copy Helper

A viable alternative to the JSON technique will be to implement your own deep copy helper function for cloning reference types whether they be arrays or objects.

Here is a very simple and minimalistic deep copy function called **deepClone**:

Now this is not the best of deep copy functions out there, like you will soon see with some JavaScript libraries — however, it performs deep copying to a pretty good extent.

3. Using JavaScript Libraries

The deep copy helper function we just defined is not robust enough in cloning all the kinds of JavaScript data that may be nested within complex objects or arrays.

JavaScript libraries like Lodash and jQuery provide more robust deep copy utility functions with support for different kinds of JavaScript data.

Here is an example that uses **_.cloneDeep()** from the Lodash library:

Here is the same example but using **$.extend()** from the jQuery library:

Conclusion

In this article, we have been able to explore several techniques for dynamically creating new arrays and cloning already existing ones, including converting array-like objects and iterables to arrays.

We have also seen how some of the new features and enhancements introduced in ES6 can enable us to effectively perform certain manipulations on arrays.

We used features like destructuring and the spread operator for cloning and spreading arrays. You can learn more about destructuring from this article.

Clap & Follow

If you found this article insightful, you are free to give some rounds of applause if you don’t mind.

You can also follow me on Medium (Glad Chinda) for more insightful articles you may find helpful. You can also follow me on Twitter (@gladchinda).

Happy hacking…