DEV Community: Steffen Pedersen

AngularJS Recap in 2 Minutes

Steffen Pedersen — Tue, 14 Jan 2020 18:43:37 +0000

I recently got a new job 🎉 One of the first projects I am going to work on is build with AngularJS. I will for that reason look into the old framework.

I have a few years back worked on projects build with AngularJS. It is not completely new to me. I will try to keep this article really short and more like an overview of the main topics. If I miss a important topic, then please comment below.

2-Way Data Binding

2-Way data binding is the synchronization between the model and the view. When data in the model changes, the view reflects the change, and when data in the view changes, the model is updated as well.

<input type="text" ng-model="hey">
<span>{{ hey }}</span>

Directives

Directives are either an attribute ng- or a HTML tag <custom>, that tells the library to do something to a DOM element. Most of the directives in AngularJS are starting with ng- where ng stands for Angular.

Expressions

Here we can access variables and functions from the scope. This could be interpolation bindings like <span title="{{ header.title }}">{{ header.title }}</span>.

Modules

Modules are containers for the different parts of your app including controllers, services, filters and directives.

var myAppModule = angular.module('myApp', []);

<div ng-app="myApp">
    ...
</div>

Controllers

This is here all the business logic behind views are being defined. The $scope in this example is basically the binding between the controller and the view. The $scope is a dependency and we need to add it as an array ['$scope', ...]. It will work without adding '$scope' with an array [...], but it can fail while minifying the AngularJS code.

myApp.controller('WingardiumController', ['$scope', function($scope) {
    $scope.spell = 'Leviosa';
}]);

<div ng-controller="WingardiumController">
    {{ spell }}
</div>

I know there is a lot more to AngularJS, but this is just a briefing of some main topics. Did I miss something extremely important? Then please comment below.

TypeScript: 6 Pros and 4 Cons (biased)

Steffen Pedersen — Thu, 02 Jan 2020 15:11:07 +0000

In this article I will go over some of my thoughts on TypeScript. It will not be an in depth article, and I will try to keep it as short as possible. Let's start with the pros 🎉

Pros

1. Errors: You are able to detect errors during compile-time. This will give quick feedback and it makes refactoring much easier. It is also helpful when scaling the project.
2. IntelliSense: There is often good support of IntelliSense. This includes autocompletion and autoimports. I also really like, that I am able to get quick info.

Source: Visual Studio Code

3. Adopting: When you are working on existing JavaScript projects, it is really amazing, that you are able to gradually adopt TypeScript. TypeScript is based on JavaScript, so in practice you could just write plain old JavaScript in a .ts file.

"TypeScript is a typed superset of JavaScript that compiles to plain JavaScript." - typescriptlang.org

4. Patterns: I really like, that TypeScript from the start is guiding the user of TypeScript to use structure. When you are writing plain JavaScript, it can easily become spaghetti code. We as developers want to follow some form of patterns and structure. This can be achieved from the start using class, interface, namespace and module, amongst other things.

class Car {
  // Fields

  // Constructor

  // Properties

  // Functions
}

5. Ability to understand: I have talked with people both from frontend and backend. A bunch of people from backend hated JavaScript, but none of them hated TypeScript. I guess it is easier to understand when you are used to work with type heavy languages like Java or C#.
6. Jobs: TypeScript is gaining more and more popularity and more companies are using the language. This gives more job opportunities surrounding TypeScript.

Cons

1. Time: You often need a build environment, and it will therefore take more time upfront.
2. Errors: The error messages can sometimes be misleading, but you should never only just trust the IDE or editor anyway.
~~3. Library support: Not all JavaScript libraries supports TypeScript, but most of them do.~~
4. Learning: Like everything, it takes time to learn. We are only human, and I would not say, that the learning curve is that high, if you already got the basics of programming in place.

Note for con #3: The way I wrote this was misleading. Check out this article. It explains my point 😊

How Do I Keep up with Scala and Java

Steffen Pedersen — Sat, 22 Jun 2019 18:25:01 +0000

For a long time I have been focused on front-end development. I follow a lot of high profile people on social media. I also read blogs and sometimes newsletters. My focus is slowly shifting from front-end to back-end development. At my job, we write a lot of Scala and Java. I really want to become better at these languages.

Do you know any high profile Scala or Java developers?
Can you recommend any good blogs on these languages?

I really want to be better at #Scala. Do you know any good blogs or people to follow? @scaladays
— Steffen Pedersen 🌚 (@mrsteffenp) June 15, 2019

CSS: Now and the Future

Steffen Pedersen — Sat, 15 Jun 2019 18:00:18 +0000

I have earlier on written about why so many developers fear CSS. This is often based on either little to no knowledge or outdated knowledge. Can we help overcome the fear with new knowledge? Let us find out!

CSS Now 🎉

This will be pretty much like a weather forecast. We must first see how the weather is right now. From there we can look into how the weather will be the rest of the week. Okay, maybe this metaphor is too much. You get the point.

The Web Is Everywhere!

Oh no, the days of desktop screens in specific dimensions are long gone. A lot of you have heard about media queries. If you want to attack screens from a certain size, you could do it this way @media screen and (min-width: 600px). But you could also aim for orientation of the screen like this @media screen and (orientation: landscape). And with specific combinations, we could have an Apple Watch as a target! Easy! So we shouldn't really fear, that we have to aim for different devices these days.

Resets

When you work with CSS, you will quickly find out, that the browsers default styling are not the same. There are different ways to deal with those. The two most popular are Reset CSS and Normalize.css. The Reset CSS will wipe out all built-in styling for HTML elements. Normalize.css removes browser inconsistencies for HTML elements. Instead of remove everything like CSS Reset, Normalize.css will preserve some useful defaults. I pretty much always use Normalize.css.

Preprocessors

This was an extremely hot topic a few year ago. A CSS preprocessor lets you generate CSS from an unique syntax with features such as mixins, functions, nesting, inheritance and so on. It will (subjectively) make the code easier to read and maintain. It was a hot topic, and the fire is still burning. We have just gotten used to it being there. We are still using Sass, Less and PostCSS. I myself am very happy for Sass with SCSS syntax and PostCSS. But I kinda see the same story repeating with ECMAScript and jQuery - now with CSS and preprocessors. CSS have now support for variables called CSS custom properties. We will properly see CSS develop in the direction of preprocessors.

Flexbox and Grid

Jøsses (Danish), the fire is getting bigger and stronger! We have properly all heard about CSS Flexbox and CSS Grid. They are both used for layout - but what is the difference? The main difference between Grid and Flexbox is that Grid is two-dimensional and Flexbox is one-dimensional. With grid you can handle both columns and rows and with Flexbox you can either handle a column or a row. The way I see it is, that you should use Grid for the big layout of your page, and that you should use Flexbox for handling the content of your components. Don’t forget that it is super easy centering things with Flexbox nowadays. This example both centers horizontally and vertically.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Architecture

One of the things that developers still are struggling with is file structure of their code base. With Sass you can @import your files, and in that way make a file system. We also now have ITCSS, which stands for Inverted Triangle CSS. It is an architecture that helps you to organize your project CSS files. The concept is that we should not output any CSS in the first 2 layers, then we specify the global selectors and get more and more specific. We then don’t have to make dumb overrides with !important. With this structure, it also gives a good understanding of how the cascading and inheritance work.

CSS Future 🚀

I am by no means a fortune teller. This is just me rambling on. But we know, that the web is spreading to weird devices. We will properly have to deal with that in the future. We are slowly turning towards CSS instead of preprocessors. What will the future bring us? Let us find out!

CSS Properties

CSS is getting stronger than ever. They are adding new properties and values all the time. A new value that I am waiting for to be supported better is display: contents. I love the idea behind this value. display: contents causes the children of an element to appear as if they were direct children of the element's parent. We are then ignoring the element itself. This is especially useful on list elements. I am also waiting for properties like conic-gradient() and media queries level 5. It has so many new features like light-level.

Variable Fonts

I am not a font expert, but this sounds really cool. Variable fonts enables different variations of a typeface to be incorporated into a single file. Then you don't have to have separate font files for every weight or style. We can customize the fonts with font-variation-settings that allows values like wght (weight), wdth (width), ital (italic), slnt (slant/oblique) and you can customize in different other ways. You can look at this guide.

.container {
  font-weight: 400;
}

.container {
  font-variation-settings: 'wght' 400;
}

.container {
  font-variation-settings: 'wght' var(--weight);
}

CSS Houdini

Okay, this is really interesting. Houdini CSS is basically a new collection of browser APIs, which allows you to gain more access to your browser’s CSS engine. We can access these APIs through JavaScript. This new concept is a new W3C task force, whose ultimate goal is to make browser support issues go away forever. Houdini CSS currently has 7 APIs, that each will deal with a specific problem. I know little to nothing about this, but I will definitely try it out!

These are my own little thoughts about CSS. I don't know everything about it. But I like to hand out some knowledge nuggets 🐔

If you are not doing what you love, you are wasting your time.
— Steffen Pedersen 🌚 (@mrsteffenp) June 10, 2019

Thank you for your time!

If you liked this, then please ❤️ and follow me on Twitter.

Why Most Developers Fear CSS

Steffen Pedersen — Sat, 08 Jun 2019 20:55:43 +0000

When I started at my job, we where two front-end developers at my team. It was me and a senior front-end developer. Then the senior front-end developer quit his job, I was the only front-end developer at my team. And it was fine. I did my job, and there was no harm. We had some job interviews, but we did not meet the right fit. The time went by, and then it hit me: I was the only one knowing anything about our front-end. The bus factor was at one, which is not a good number in this case. Why? If I get hit by a bus, the project will be in a bad situation.

I then talked to my boss, and we came to the agreement, that we all should be responsible for the front-end. The work could be done in pair programming. At least until we would find the right match. I thought that was a great idea. I had a total burnt out from working alone on the front-end.

We then presented the idea, and the first reacting was fear from the other developers. The fear was mostly concerned about CSS.

HTML and CSS is for losers 🙄 We should all use Microsoft Word.
— Steffen 🖤 (@mrsteffenp) June 8, 2019

Why do developers fear CSS?

I talked to the other developers about why they fear CSS. The first thing brought up was cascading 😵 What if they make changes to one class, that will effect five hundred other elements?

The next thing brought up was support of browsers 💻 What if they implement something, that isn't supported in some browsers?

The final thing was building something from the ground up 🏡 What if they make something, that isn't solid and doesn't look good?

Cascading 😵

This is one of the biggest fears. When other developers are talking about this, I guess they are talking about many things. It is both importance, specificity, source order and how properties inherit from different rules. The styling can be specified in many different places, and it can interact in complex ways. This is why CSS is so powerful, but it is also the reason why, it can be confusing and difficult. The cascading can be a devilish thing, if you don’t know the rules of how selectors can overrule other selectors 😈

Importance

This is a well talked subject. We all know, that it is (in most cases) bad to use this little helper. This is because !important will always win 🏆

Specificity

Specificity is basically a measure of how specific a selector is. Like, inline styling is the most specific, then #id, then .class, and then the element. From there, the specificity can be measured in a million different ways. If you have doubts, you can use a specificity calculator.

Source order

Source order is basically that later rules will win over earlier rules. If you write a selector with a property and a value, and then later on write the same selector with the same property - but with a different value. What will then happen? 🤓

Inheritance

Inheritance in CSS is both simple and tricky. It can be explained in this way: Some property values applied to an element will be inherited by the element's children, and some won't. Doesn't that sound great? 😵 CSS properties like font-size and color do inherit, and properties like margin and padding don’t inherit. I guess that you will have to use common sense in this one. If margin would be inherited, it would cause a huge mess! You could use MDN as reference.

Browser support 💻

Unless your client is a company that only support Internet Explorer 6, you shouldn’t worry that much. Most users are using modern browsers with great support of CSS. If you feel insecure whether you should use a specific property, then you can check it out at caniuse. If a browser doesn't support the property, but you really want to use it, then most browsers @supports the CSS at-rule of the same name. Then you can make a fallback solution.

@supports (display: grid) {
  div {
    display: grid;
  }
}

Building something from the ground up 🏡

This is mostly about the communication between designers and developers. The communication is not always that great. Sometimes the ambitions of the designers can be too high in relation to the company's wallet and the developers' skills - or what is actually possible.

The point is, that we as developers should be more integrated in the design process, so we all can fell comfortable with the outcome. With that being said, if the developer feels comfortable with the design, then it will be easier building it from the ground up.

I hope this wasn't a bunch of nonsense. I just really want to tell other developers, that doesn't work with CSS on a daily basis, that CSS isn't magic ✨

Thank you for your time!

If you liked this, then please ❤️ and follow me on Twitter.

Stay Healthy as a Developer

Steffen Pedersen — Sun, 02 Jun 2019 21:03:04 +0000

This is a personal guide for staying healthy. It is by no means an official guide, and I am by no means an instructor or trained to teach in this field.

I started working full time as a developer a few years ago. Since then, I have become more weak and have got a small belly. I have seen several of my colleagues getting back problems. I do not want that! I will in this simple personal guide show a training program, calorie intake and a meal plan. I hope this can inspire a few developers to start getting healthy habits.

Remember, your mental & physical health comes first 🤕❤️ #DeveloperCommunity
— ✨✨ Steffen ✨✨ (@mrsteffenp) June 1, 2019

Training Program

Here is my training program with exercises, that I am currently doing. I am myself somewhat of a beginner. It is therefore a good idea to focus on the basics, and to perform the exercises properly. This will by far provide the best foundation in the long term.

Monday	Wednesday	Friday
Squats	Deadlifts	Squats
Pendlay Rows	Pull-ups	T-bar Rows
Bench Press	Incline Press	Chest Dips
Overhead Press	Upright Rows	Overhead Press
Skull Crushers	Zottman Curls	Kick Backs
Standing Calf Raises	Lateral Raises	Seated Calf Raises
Cardio	Cardio	Cardio

These exercises are inspired by Buff Dudes. You could of cause find another training plan, that suits you better. I also improvise on some exercises. I usually go 5 x 5 on each exercise and around 30 minutes of cardio. I often do the cardio on other days.

A few months back I worked out in the morning before work. I am not really a fan of that, because it can take some energy off work. Now I am doing it after work, and it actually works 😉

Calorie Intake

What you eat is crucial, if you want a healthy lifestyle. It is important to know your calorie intake, and the amount of calories you need to eat to maintain your current weight. From there you navigate whether you want to build muscle or lose fat. I want to build muscle and maybe loose some fat 💪🏻🐷. I am not fanatic, and this is a learning process. It is also important to know the balance of protein, carbohydrate and fat.

My personally maintaining calorie intake is about 2800 calories a day. Here I will add 500 calories, so it will be around 3300 calories a day. Maybe I won't go that far because of my small belly. People have different numbers based on age, weight and activity levels. Don’t forget to use a TDEE calculator.

I will use a split of 40% carbohydrates, 40% proteins and 20% fats. I will eat lower carb, because my body reacts quite quickly to it. It is important to point out that all numbers are indicative.

Meal Plan

I find pleasure in having a specific plan to follow to achieve my goals. I will try to follow a plan, but not be totally strict about it.

Breakfast ☀️

Food	Protein	Carb	Fat	Calories
Skyr	27,5	10,0	0,5	158
Protein	21,0	3,0	22,5	117
Müsli	3,3	18,0	2,0	109
Honey	0,0	7,5	0,0	30
Muffin	18,2	31,6	14,5	266
Total	70,0	70,1	39,5	678

At breakfast I will around 250g skyr, 30g müsli, 10g honey and two healthy muffins. Skyr is an Icelandic cultured dairy product. It has the consistency of Greek yogurt, but a milder flavor. We eat it a lot here in Denmark.

Snack 🍽

Food	Protein	Carb	Fat	Calories
Banana	1,4	29,7	0,4	125
Almonds	2,5	2,6	5,9	69
Total	3,9	32,3	6,3	194

I usually eat a banana and some almonds at work.

Lunch 🍽

Food	Protein	Carb	Fat	Calories
Chicken	24,0	1,5	1,9	119
Egg	8,1	0,6	6,5	93
White rice	3,5	36,6	0,4	169
Vegetables	0,9	6,0	0,2	27
Chili mayo	0,2	1,9	1,8	26
Total	36,6	46,6	10,8	433

At lunch I will eat 200g chopped chicken with some white rice, egg, vegetables and a tablespoon chili mayo.

Afternoon 🍎

Food	Protein	Carb	Fat	Calories
Muffin	18,2	31,6	14,5	265
Total	18,2	31,6	14,5	265

In the afternoon I will eat two healthy muffins.

After workout 💪🏻

Food	Protein	Carb	Fat	Calories
Protein powder	42,0	6,0	45,0	234
Total	42,0	6,0	45,0	234

After workout I will eat two scoops of protein powder.

Dinner 🍽

Food	Protein	Carb	Fat	Calories
Dinner	40,0	30,0	10,0	550
Total	40,0	30,0	10,0	550

Dinner will differ, but I will try to keep it around these numbers.

Late night 🌙

Food	Protein	Carb	Fat	Calories
Skyr	27,5	10,0	0,5	158
Protein	21,0	3,0	22,5	117
Müsli	3,3	18,0	2,0	109
Honey	0,0	7,5	0,0	30
Muffin	9,1	15,8	7,3	132
Total	60,9	54,3	32,3	545

I just love my skyr and muffins 😬

Total 📈

Subject	Protein	Carb	Fat	Calories
Daily	271,7	270,9	158,4	2900
Energy balance	38,8	38,7	22,6

My numbers are not perfect. I will try to adjust them along the way. Maybe I will add or subtract calories.

Supplements

I use a few supplements to optimize my exercise and my overall mood with vitamins, but without being fanatic. I use protein, BCAA, Vitamin D and Omega-3. BCAA is definitely not a must!

I really want to point out, that this is just my take on being healthy. My main goal is to get stronger. Maybe yours is more focused around mental health.

Thank you for your time!

If you liked this, then please ❤️ and follow me on Twitter.

What is subgrid?

Steffen Pedersen — Sat, 01 Jun 2019 18:15:18 +0000

I hear the buzzword everywhere lately. I would really like to know the use case from actual developers.

Can anybody explain to me what subgrid is? #CSS #DevDiscuss #DeveloperCommunity
— ✨✨ Steffen ✨✨ (@mrsteffenp) May 31, 2019

Increasing the Bus Factor on Frontend

Steffen Pedersen — Tue, 28 May 2019 13:08:16 +0000

ℹ️ This is an article, I wrote last year on Medium.

Right now, as I am writing this, I am the only frontend developer on my team. This means that I am unofficially responsible for all frontend and it also means, that it is not tested very well. It may sound livable, but it can be dangerous in the long run if one team member works with a specific area.

It has been like this since another frontend developer got a new job. He was by the way also a senior developer. Now all frontend issues has my name on it, and that is really not the best way of managing the work of a team. What if I also get a new job? Then the team is in a very bad situation.

Normally, this is called the bus factor. It is the number of people in your team who can put your project in a bad situation if they get hit by a bus. Our bus factor on the frontend and the style guide is about 1.25. It is obviously a weird number. Of course, there can’t be 0.25 people. What I mean is, that I know most about frontend and the style guide, but there are a few team members who have looked into the project. The style guide is by the way a project where all frontend is being defined, and where CSS and JS is being outputted from.

I have been frustrated that there hasn't been much help or discussion about our front end. With that in mind, I chose to write an email to our team. I wrote it so I was sure to get it properly formulated.

Hi guys,

I think we should have a talk about the style guide.

Since X said goodbye, I have been alone with frontend development and the style guide. If I get hit by a bus, the team are missing knowledge on this specific area. We can easily continue this way, but I don’t think it’s good for our team, my role in the team or my further development.

I think a solution would be pair programming and more in-depth testing. It might also help if the style guide is going to be a part of the main project. Then it would not be an alienated project. That is maybe for an other discussion.

It is not like the style guide is a whole different world. If you know HTML, SCSS, ES2015 and the architecture ITCSS and naming convention BEM — then you know the most essential.

Knowledge sharing is important, especially when that knowledge depends on one person.

Think about it and we will have a talk soon.

Steffen 😀

We talked about the topic at our Sprint Retrospective. Here we defined some action points, which is something that we can improve on in the following sprint. In this case, it was more pair programming and a presentation of the style guide. The other team members would also do more thorough code reviews. I am also trying to make even more documentation on frontend development. I am right now preparing a workshop on frontend and the style guide.

I would love to hear if you have been in a similar situation. Have you also been alone with a certain part of a project?

Thank you for your time!

If you liked this, then please ❤️ and follow me on Twitter.

My Most Used Git Commands

Steffen Pedersen — Tue, 21 May 2019 17:28:03 +0000

This is not a full guide to which commands you should learn. I just find it inspiring to read about other developers’ habits and work routines. This I would like to contribute to and tell about my most used Git commands.

I honestly don’t have a specific way on typing these commands. I sometimes write the full command. I sometimes replace git with g. And then I sometimes write the full alias. I think it depends on the goal with the command. It is worth mentioning that I am using ZSH with oh-my-zsh.

Main Commands

These are the commands that I use every day - or almost every day.

git add --all
git commit -m “Add this commit”
git push

If you have heard about Git, then you will probably know these three classic commands. I use them pretty much all the time. It is here that it will be nice to use some aliases. gaa, gcmsg “Add this commit” and gp will come in handy!

git checkout develop
git checkout -b my-new-branch

These will switch to an existing branch or a new branch. There is not much new going on here. I often use the full aliases here too - gcd and gcb “my-new-branch“.

git pull --rebase

I always use the option --rebase when I pull from a repository. This will keep my commits nice and clean on the top of the tree. You could use the alias gup. It was a senior developer who taught me the power of rebase.

git rebase <branch>

This will lead us to rebase itself. Remember to rebase! This is especially important if you are doing feature branches. We do not want a half-dead branch, which is a billion commits behind its default branch with merge conflicts up to the throat. Ouch!

git merge <branch>

It is not that often that I need to merge directly from my terminal. In my team at work we use a branching strategy with feature branches. When a branch should be merged into the default branch (or another), then we use a pull request from GitHub — and the GUI at the website is just fine.

git stash
git stash pop
git stash apply stash@{1}

Has your project manager given you a new task, which need to be done quickly? Just throw your current work to the side and focus on the new stuff. It is awesome! I actually don’t use the full alias for this. I am using g instead of git. Maybe it is because I want to be absolutely sure, that I am actually stashing 😀

git status -s
git log

These are the commands that keeps me updated, and I use them about 500 times a day. I use gss, glg or sometimes glol.

Side Commands

These are the commands that I use occasionally.

git push --force-with-lease

This is one of my strange darlings. But why don’t I just use --force? First of all, it is an extremely dangerous command and a huge no-no when using shared branches. It is because it will overwrite the remote repository with whatever you have locally. This can be dangerous if other contributors of the repository have pushed in the meantime. I have mostly used --force-with-lease after a rebase. This is because it works like a safety belt. This article has a great example.

git for-each-ref — sort=-committerdate refs/heads/

This is actually a command, that I found a few months ago from David Walsh. The command will list the most recently worked on branches from top to bottom. It is so cool!

git reset --hard

And if everything goes like 💩, you can always reset the project.

Thank you for your time!

If you liked this, then please ❤️ and follow me on Twitter.

How To Avoid Long BEM Modifiers

Steffen Pedersen — Sun, 19 May 2019 10:37:48 +0000

Before we begin, we should all get on the same page.

What is BEM? 🤔

First of all, BEM is a naming convention. In my opinion, it makes the CSS easier to read and understand. It makes it easier to scale and generally more easy to work with. BEM is an abbreviation of the overall concept. The elements of the structure is Block, Element and Modifier. The description of the examples are inspired by the official guide.

Block

This is a standalone entity that has its own meaning and purpose. The block is .button.

.button {
    display: inline-block;
    padding: 1em;
}

Element

This should be a part of a block that has no standalone meaning and purpose. It should be semantically tied to its block. The element is &__text.

.button {
    display: inline-block;
    padding: 1em;

    &__text {
        font-size: 1em;
        font-weight: 400;
    }
}

Modifier

This should be a flag on a block or an element. Here we are able to change appearance or behavior. The modifier is &--bold.

.button {
    display: inline-block;
    padding: 1em;

    &__text {
        font-size: 1em;
        font-weight: 400;

        &--bold {
            font-weight: 700;
        }
    }
}

One of the most important rules is, that you can’t have an element inside an element and you can’t have a modifier inside a modifier.

What is the problem? 🤔

With BEM modifiers the naming convention can result in very long selectors. This can damage the readability.

We could make modifiers like this:

.button {
  &.--small {
    height: 2em;
  }
}

In this way we could do this <button class="button --small"></button>.

Instead of this:

.button {
  &--small {
    height: 2em;
  }
}

Which results in longer selectors <button class="c-button c-button--small"></button>.

It would make it easier to get an overview, when reading the outputted code. We just need not to make classes named --modifier outside of a block. That would also be weird.

What do you think? 🤔
What could break this idea? 🤔

Thank you for your time!

If you liked this, then please ❤️ and follow me on Twitter.

My Favorite Ways of Centering With CSS

Steffen Pedersen — Fri, 17 May 2019 15:20:10 +0000

My Favorite Ways of Centering With CSS

Back in the day, I thought that centering with CSS was really tricky. Often, I made it much more complicated than it is. There are many ways to do it depending on the specific situation. These are my favorite ways of centering both horizontally and vertically.

Position absolute

The first method or approach is the absolute positioning. We know the height and width of the child and we can then use margins with a negative value of half the width or height of the child.

.absolute.parent {
  position: relative;
}

.absolute .child {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -110px;
  margin-left: -110px;
}

Transform translate

But what if you don't know the height or width? Then you can use the transform property with a negative translate of 50% in both directions. There you have it!

.translate.parent {
  position: relative;
}

.translate .child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Flexbox

Something that I came across later on is the flexbox approach. It's genius! You just need to define two properties with center - which is justify-content and align-items. That's it! You could also write flex-end if you wanted the element at the bottom right corner. Flexbox is actually really really fun.

.flexbox.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

If you know other ways of centering elements, please write a comment below.

Do you use another approach? 🤔
Do you use Sass mixins or other cool things? 🤔

Thank you for your time!

If you liked this, then please ❤️ and follow me on Twitter.