DEV Community: Simon Köhler

All the good Domain Names are Gone..?!

Simon Köhler — Fri, 22 Sep 2023 02:18:22 +0000

It doesn't seem that long to me, but I registered the first domain (cyrcus.com) in 2002 and started building websites. I don't want to say "everything was better in the past", but can you imagine what a huge choice of top level domain names we still had back then? Apart from the fact that in the beginning the internet was much more experimental, carefree, animated and colorful.

I'm annoyed today that I wasn't forward-thinking enough. Some really good domain names were available back then that I wish I had today. The bad part is that most of these awesome short and generic .com domains aren't even in use. They simply bob along without content until someone comes along who pays a utopian price.

Then there are sites like directory[dot]com. I know the owner fleetingly for many years, but he never seems to want to do anything really useful with this great domain.

Domains that are properly used:

login.com (I would really like to know the price, it's for sale, too!)
developer.com
javascript.com
coder.com
html.com
templates.com
snippets.com
ceo.com
nerd.com
frontend.com
marketing.com
freelancer.com
backend.com (since it's "backend.com" it doesn't need a frontent ;))

Domains that are cool but already taken and totally abandoned:

coding.com
programmer.com
css.com
webspace.com
webmaster.com

Of course, today there are many other domain extensions, but if we are honest: Most of the good and short generic names have all been bought by the big players by now. There is hardly anything left to create short domains with 3-4 characters that make any sense. At least if you consider that Google and other search engines still prefer .com .net or country specific domain extensions like .de or .es.

For example, if I create a domain "costaricabusiness.club" and then it goes viral advertising. How would people pronounce it? Costa Rica business dot club, right? That's weird, I think. Maybe I'm too old though, haha. I just think "Costa Rica Business Club Dot Com" sounds much cooler....

Many people are also still used to the "old scheme", and are far from knowing all the domain extensions. So if I want to start a new project in 2023, I really need to take my time and think carefully about which .com domain I may need to create with hyphens or filler words to best represent the project.

What are your experiences with domain name search?

I would be especially interested in the opinion of the younger generation born after 2000, when the best .com domains were already all "on sale" or "in use". What are your favorite domain extensions? Do you prefer to hyphenate domain names to then use .com, or do you just go with another extension that isn't as tried and true?

What are your best .com or .net alternatives?

Stop the Invasion of Fake Followers

Simon Köhler — Tue, 29 Aug 2023 13:31:46 +0000

Over the past few weeks I've been getting more and more followers on DEV.TO out of the blue. First I thought it was thanks to my last articles, but quickly I realized that almost all new followers are fakes.

Or how come that you get only 1-2 reactions on a post with 318 "followers"???

If you look at this screenshot of my follower dashboard, you can see what's going on.... "Why do they all have bw profile pictures and weird names," I thought.

They steal our time, and mess up the reputation of DEV.TO, because of their greed for money.

It really annoys me, and wastes my time as a professional developer who wants to make a valuable contribution here. So here is a list of accounts that are clearly SPAM, and a list of accounts that appear to be real users. Some I leave out because I can't tell if they are real or fake.

Here are the fakes and spammers among my followers (Report them, too!):

@influencer
@ccjsytesse
@renneford294
@moshermax45
@maciasver578
@realsbet
@tenexch

.... I am stopping here with the list.. read below.

And here my (hopefully!) REAL Followers who deserve to be mentioned:

@jesscsommer (Software Engineer)
@pbrodz (Microsoft Engineer)
@amin1234 (says he wants to learn PHP, that's fine...)
.... I am stopping here with the list.. read below.

I got tired and dissapointed

So while scrolling through my follower list and checking each one, I realized with great disillusionment that almost all of my 318 followers are fakes, spammers or some companies that want nothing more than to generate backlinks or sales.

This is really very sobering. I didn't continue the list...

I bring decent traffic to DEV.TO...

.......and it could become much more, but... I don't know.

If the statistics are correct at all, I have generated over 20.000 views from Google on the platform over the time.

DEV.TO definitely has some good ranking and that's also because it's done pretty well. I apreciate the clean and easy structure of the website.

BUT the SPAM issue is a big issue. It makes me think about 2 important things:

should I keep trying to post quality content here?
should I keep considering to advertise here, or will my Ads only be seen my spammers???

Maybe the @devteam can help making these decisions?
What is your opinion? Write it in the comments, if you're real!

4 Expert Tips: How to work with Bootstrap like a Pro

Simon Köhler — Sat, 26 Aug 2023 19:19:17 +0000

Some love it, some hate it. Working with a framework is not everyone's cup of tea. The Bootstrap framework is often said to be cluttered or that all websites end up looking like Bootstrap. I would like to clear up these prejudices.

This is why I love Bootstrap

It is proven and browser compatible
The documentation is very good
It is modular and flexible
It is very widespread
It's very good for fast mockups
Development is consistent

Some Background Info

I started working with CSS/HTML and Web Design professionally when it came on the market. That was a while ago! The first website I created was at cyrcus.com. That was 21 years ago back in 2002!

I've been using Bootstrap since version 3 and have hardly used any other framework in the last few years.

Here are my 4 Expert Tips

1. Use SASS instead of just pure CSS

You could easily embed the Bootstrap framework into your website via a CDN link, and then override the styles using a custom CSS. But this is the method that rather beginners use.

Note: I still do that sometimes to simply create a Mockup for a new project, OR when I need a really simple interface for a backend application.

However, professionals compile the Bootstrap SASS files themselves and thus have full control over the output.

A good and simple app for beginners with SASS is Scout App. Read more about the Bootstrap SASS files here.

2. Use only the components you need

If you already use SASS, you can go one step further and use only certain components of the framework. This increases the performance of your website, since you don't have to load styles for loading bars, for example, if you never use loading bars.

In the following screenshot you can see a SASS file from my website. Here I commented out the components I don't need. This reduces the size of my CSS file from 274 kb to 238 kb. In my case it's not much, but if you have a lot of traffic it pays off. If you need only a few components, e.g. for a simple landin page, you can reduce the file size a lot by including only what you need.

3. Use as many Bootstrap Classes as possible

The Bootstrap framework offers a lot of smart classes to position content or to design it according to the "mobile first" principle. Therefore, you should get used to using these classes whenever possible.

Example: Custom Class VS Bootstrap Class

In the example you can see a comparison between bootstrap classes and custom classes. The HTML markup for the custom class is smaller, of course, but you have to include unnecessary CSS code. Especially if you need breakpoints for display on different devices, the custom CSS gets big fast.

But let's look at the next tip later, which deals with this topic in more detail.

<style type="text/css">
    .custom{
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #cfe2ff;
        padding: 1.5rem;
        margin: 0.25rem;
    }
</style>

<!-- Bootstrap Classes -->
<div class="d-flex align-items-center justify-content-center bg-primary-subtle p-4 m-1">
    <div class="text-center">Bootstrap Like a PRO (Bootstrap CSS)</div>
</div>

<!-- Custom Class -->
<div class="custom">
    <div>Bootstrap Like a PRO (Custom CSS)</div>
</div>

In many projects I've created over the years, only the fonts and colors were replaced, or a few values in the variables were overwritten. I hardly ever use custom classes for spacing or colors anymore. Only for special application purposes, or custom components, adjustments have to be made.

Contrary to many claims: Yes, you can build a Bootstrap website that doesn't look like Bootstrap standard anymore, even without writing your own CSS!

You just have to know HOW.

4. Extend the Bootstrap Classes

Another professional method to save file size, organize codes and increase performance is to extend the bootstrap classes with SASS.

Let's say you wanna create a Custom Button

You can easily create a new CSS class (.btn-custom or whatever...) in your SASS file where you included Bootstrap, and extend it with numerous Bootstrap classes. I don't say with "all" classes, because some cannot be extended due to their structure in the framework.

SASS Code for the Custom Button

// Create custom button by extending the built in classes
.btn-custom{
    @extend .btn-outline-light;
    @extend .text-danger;
    @extend .fw-bold;
    @extend .fs-3;
}

HTML Code for the Custom Button

<a class="btn btn-custom" href="#">CLICK ME</a>

Bootstrap, specifically SASS does not create a new class with lots of code, but adds your custom class to the rendered CSS.

The rendered CSS looks like this:

.btn-outline-light, .btn-custom {
  --bs-btn-color: #f8f9fa;
  --bs-btn-border-color: #f8f9fa;
  --bs-btn-hover-color: #000;
  // More entries...
}

Conclusion

Now you have 4 valuable expert tips to make your Bootstrap project more performant. I will surely post more articles about Bootstrap optimization, so stay tuned!

If you want to get more tips that I don't post on the web, sign up for my free newsletter now: https://simonkoehler.com/newsletter

Thanks for your time and feel free to post a comment with any questions.

Twitter X Logo for Bootstrap Icons

Simon Köhler — Thu, 24 Aug 2023 20:25:13 +0000

I just needed the new Twitter X Logo now for a project that uses the Bootstrap Icon Library. So I created a workaround that should work until the logo is officially included in the Bootstrap Icons.

With this CSS snippet, you can use the new Twitter X Logo in your project. The downside: it's a quick and temporary solution, and therefore you have to resize the icons manually. The default size is 16x16 pixels.

How does it work?

To make it as simple as possible, I simply created a new CSS class "bi-twitter-x". I previously converted the SVG Twitter X logo into a string, which I shortened for the article. You can find the full code in the CodePen. The image is used as background image and is always squared using the CSS property "aspect-ratio". Therefore only the height has to be adjusted to scale the logo.

/* New Class: bi-twitter-x */

.bi-twitter-x:before{
  content:'';
  background-image: url('data:image/svg+....);
  background-size: cover;
  height: 16px;
  aspect-ratio: 1 / 1;
}

Sizing is not easy, because it's not a web font (yet)

I have added some custom size to fit the logo to the size of the headlines. You can adapt these classes to your project if you like.

/* Example: Standalone logo sizes */

h1 .bi-twitter-x:before,
.fs-1 .bi-twitter-x:before{
  height: 40px;
}
h2 .bi-twitter-x:before,
.fs-2 .bi-twitter-x:before{
  height: 32px;
}
h3 .bi-twitter-x:before,
.fs-3 .bi-twitter-x:before{
  height: 28px;
}
h4 .bi-twitter-x:before,
.fs-4 .bi-twitter-x:before{
  height: 25px;
}

CodePen Twitter X Logo for Bootstrap Icons

Do you like my Stuff?

Thanks for reading! (100% human written mthrfckrs!)

UPDATED: Bootstrap 5.3.0 Navbar Multi Level and Mega Menu with Dark Theme!

Simon Köhler — Mon, 14 Aug 2023 07:48:54 +0000

I have updated my famous (over 30.000 views) Bootstrap Multi-Level Navbar codepen, so that everybody can use it now for their latest Boostrap 5.3 projects. It also includes a small JavaScript function to switch between light and dark theme!

As the digital world keeps evolving, it's essential to stay ahead of the curve. That's why I'd like to invite you all to subscribe to my expert newsletter where I delve deep into the latest trends, updates, and tips in the tech space: https://simonkoehler.com/newsletter

Simple Bootstrap Lightbox

Simon Köhler — Sun, 03 Jul 2022 20:33:12 +0000

Just a simple lightbox with Bootstrap that uses Animate.css for image animations, and imagesLoaded to preload images. No jQuery, lightbox script or additional CSS is needed, just some pure JavaScript. All styles and positioning of elements were implemented using pure Bootstrap classes.

Using the Bootstrap standard classes

The example is to show that you can build a quite functional lightbox without an additional lightbox plugin, using the Bootstrap standard classes and scripts.

Of course, you can still optimize it a lot and create your own CSS animations with a few simple steps, for example, to save the use of Animate.css.

Libraries I have used, with great thanks to the respective developers

Bootstrap 5 Framework
https://getbootstrap.com/
ImagesLoaded
https://github.com/desandro/imagesloaded
Animate.css
https://animate.style/
Picsum Photos
https://picsum.photos/

Your feedback is appreciated

If you like this Simple Bootstrap Lightbox, feel free to leave your feedback. Also, I'm always very happy when others can use my work as the basis for great projects.

What would you improve, add, or do differently?

More Stuff

My website
https://simon-koehler.com

Let's connect on GitHub
https://github.com/koehlersimon

MASK.CSS
https://koehlersimon.github.io/maskcss/

Beautiful Masonry Gallery with Bootstrap and Unsplash Random Photos

Simon Köhler — Sun, 19 Jun 2022 22:17:43 +0000

This beautiful gallery combines the Bootstrap framework with Masonry, Animate.css and random photos from Unsplash.

I needed an example for a client, where after each call to the gallery, a certain number of random images are loaded, and also the image sizes are determined randomly.

What could be more obvious than tapping into an image database, I thought. While researching, I came across picsum.photos and their API.

But first, here's the working example:

VIEW PEN IN FULLSCREEN MODE

What happens under the hood?

Load list with images in JSON format
Preload images with ImagesLoaded, then hide preloader
Dynamically generate Bootstrap HTML with JavaScript
Set CSS classes for Animate.css with delay on each image
Put everything in a cool shape with Masonry

Pure Vanilla

No JavaScript library is used for the gallery. Everything is 100% JavaScript. For me personally, jQuery has had its day anyway.

No additional CSS so far...

So far, no additional CSS has been used, except for a few small inline styles to control the animations. Imagine what you can do with this gallery and some extra CSS! You could make it look really cool, and add a lightbox if you want.

Libraries I have used, with great thanks to the respective developers

Your feedback is appreciated

If you like this Bootstrap Masonry Gallery PEN, feel free to leave your feedback. Also, I'm always very happy when others can use my work as the basis for great projects.

What would you improve, add, or do differently?

More Stuff

Sign up for my Newsletter!

https://simonkoehler.com/newsletter

PHP Developer

https://simonkoehler.com/php-developer

TYPO3 Freelancer

https://simonkoehler.com/typo3-freelancer

MASK.CSS - Mask images and DIVs with ease

Simon Köhler — Wed, 08 Jun 2022 22:15:13 +0000

The other day I needed some vector shapes to mask images for a theme project. First I played around intensively with the CSS property "mask-image" and then I decided to release a small library.

DEMO | CONTRIBUTE

What does MASK.CSS do?

MASK.CSS works in any website, and is not bound to any framework. Although it also works great with Bootstrap. You just need to include the "mask.css" file, and make sure all vector graphics are stored in the right place.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/koehlersimon/maskcss@master/mask.css">

Once you have MASK.CSS included, you can mask objects like images and containers by adding a few simple classes.

<img class="mask mask-circle mask-repeat mask-size-10" src="img/canyon.jpg" alt="masked image">

Demo on Codepen

Get involved!

If you have original ideas for new vector shapes, join the GitHub project. I welcome any contributor who brings new ideas and improvements to MASK.CSS!

UPDATED: Bootstrap 5.1.1 Navbar Multi Level and Mega Menu

Simon Köhler — Fri, 01 Oct 2021 18:32:09 +0000

Advanced Bootstrap 5 Navbar component with multi-level menu, megamenu, animated hamburger button and custom web fonts. Easy to use and NOW compatible with Bootstrap version 5.1.1!

Sign Up Form like Instagram with Bootstrap 5.1.0

Simon Köhler — Tue, 17 Aug 2021 14:14:28 +0000

A simple example of a sign-up form similar to Instagram's sign-up form using Bootstrap 5, which predominantly uses Bootstrap's built-in classes, as well as floating labels for form fields.

Here's the compiled HTML:

<section class="py-4">
  <div class="container">
    <div class="row d-flex align-items-center justify-content-center">
      <div style="max-width:420px;">
        <form action="#" class="bg-white border py-4 px-5" method="get">
          <div class="text-center mb-3">
            <i class="fab fa-bootstrap fa-5x text-secondary mb-2"></i>
            <p class="text-muted fw-bold">
              Sign up to see photos and videos from your friends.
            </p>
          </div>
          <div class="mb-3">
            <a class="btn btn-primary d-block bg-gradient" href="#"><i class="fab fa-facebook"></i> Log in with facebook</a>
            <p class="my-3 text-center or">
              OR
            </p>
          </div>
          <div class="form-floating mb-3">
            <input class="form-control" name="email" placeholder="Mobile Number or Email" required="" type="email" /><label>Mobile Number or Email</label>
          </div>
          <div class="form-floating mb-3">
            <input class="form-control" name="fullname" placeholder="Full Name" required="" type="text" /><label>Full Name</label>
          </div>
          <div class="form-floating mb-3">
            <input class="form-control" name="username" placeholder="Username" required="" type="text" /><label>Username</label>
          </div>
          <div class="form-floating mb-3">
            <input class="form-control" name="password" placeholder="Password" required="" type="password" /><label>Password</label>
          </div>
          <div class="mb-2">
            <button class="btn btn-primary fw-bold w-100 bg-gradient" href="#" type="submit">Sign Up</button>
          </div>
          <div class="small text-center">
            By signing up, you agree to our Terms , Data Policy and Cookies Policy.
          </div>
        </form>
        <div class="bg-white py-4 px-5 text-center border mt-4">
          <p class="m-0">
            Have an account? <a href="#">Log In</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

CSS

Here is the only used additional class ".or", which ensures that there is a smooth line after the word "or". This snippet can also be used for other projects when a visual separator is needed.

.or{
  position: relative;
}
.or:before{
  content: '';
  height: 1px;
  background: linear-gradient(to right,silver,silver,rgba(255,255,255,0),rgba(255,255,255,0),silver,silver);
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  z-index: 0;
}

Video Player Interface for Bootstrap 5

Simon Köhler — Tue, 03 Aug 2021 16:05:19 +0000

Since I'm currently working on a project that requires a custom video player for Bootstrap, I decided to share the code with everyone.

Yeah, it's Open Source:
https://koehlersimon.github.io/bootstrap-videoplayer/

If you want to participate on GitHub, let's go:
https://github.com/koehlersimon/bootstrap-videoplayer

It's an experimental interface to implement a video player using the Bootstrap 5 framework. The HTML structure was deliberately created so that you can customize the player to your own design using Bootstrap's built-in CSS classes.

Bootstrap Version 5.0.2
Uses Bootstrap Icons

UPDATE 2021-08-09

The video player now has the main functions needed to play videos, such as play/pause, jump to a specific point in the timeline, adjust volume and enable/disable full screen.

Example HTML Markup for Video Player

<div class="videoplayer" id="myCustomPlayer">
   <div class="ratio ratio-16x9 bg-dark">
      <video class="video" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"></video>
   <div>
   <div class="controls">
      <button class="btn btn-lg btn-video-playpause" type="button" title="Play Video">
          <i class="bi bi-play-fill"></i>
          <i class="bi bi-pause-fill d-none"></i>
      </button>
      <div class="px-1 w-100">
          <div class="progress w-100">
              <div class="progress-bar"></div>
          </div>
      </div>
      <button class="btn btn-lg btn-video-pip" title="Play picture in picture">
          <i class="bi bi-pip"></i>
      </button>
      <button class="btn btn-lg btn-video-fullscreen">
          <i class="bi bi-arrows-fullscreen"></i>
      </button>
      <div class="dropup">
          <button class="btn btn-lg btn-video-volume" data-bs-toggle="dropdown" title="Volume">
              <i class="bi bi-volume-mute-fill"></i>
          </button>
          <div class="dropdown-menu dropdown-menu-end dropup-volume">
              <input type="range" class="form-range form-range-volume">
          </div>
      </div>
      <div class="dropup">
          <button class="btn btn-lg" data-bs-toggle="dropdown" title="More...">
              <i class="bi bi-three-dots-vertical"></i>
          </button>
          <div class="dropdown-menu dropdown-menu-end">
              <a class="dropdown-item" href="#">
                  <i class="bi bi-info-circle-fill"></i> About
              </a>
          </div>
      </div>
   </div>
</div>

Note

This article will be updated, as well as the GitHub Page and Repository. Check back soon and please leave a comment! Thanks!

Support my work:

► https://www.paypal.com/paypalme/typo3freelancer
► https://www.patreon.com/koehlersimon

Follow me:

► https://github.com/koehlersimon
► https://www.linkedin.com/in/typo3-freelancer/
► https://bitbucket.org/typo3freelancer/
► https://twitter.com/koehlersimon
► https://www.instagram.com/fullstackfreelancer/

Blurry image backgrounds like on Instagram

Simon Köhler — Sat, 31 Jul 2021 14:48:33 +0000

A JavaScript/CSS prototype to automatically generate blurred background images from the image source of the original image. The img tag just has to be packed into a container. The rest is done by JavaScript and CSS filters.

TIP: If you use Twitter Bootstrap 5, you can also use the ratio classes (.ratio, .ratio-16x9) for the image container (.image-container).

NOTE: If you want to use this code for a live website, please add more CSS rules and better responsive handling ;-) It's not perfectly done yet!

Your Feedback is appreciated!

What do you think about this approach? Would you do it the same way? What would you do better in the current code? Just write it in the comments!

DEV Community: Simon Köhler

All the good Domain Names are Gone..?!

Domains that are properly used:

Domains that are cool but already taken and totally abandoned:

What are your experiences with domain name search?

Stop the Invasion of Fake Followers

They steal our time, and mess up the reputation of DEV.TO, because of their greed for money.

Here are the fakes and spammers among my followers (Report them, too!):

And here my (hopefully!) REAL Followers who deserve to be mentioned:

I got tired and dissapointed

I bring decent traffic to DEV.TO...

4 Expert Tips: How to work with Bootstrap like a Pro

This is why I love Bootstrap

Some Background Info

Here are my 4 Expert Tips

1. Use SASS instead of just pure CSS

2. Use only the components you need

3. Use as many Bootstrap Classes as possible

Example: Custom Class VS Bootstrap Class

4. Extend the Bootstrap Classes

Let's say you wanna create a Custom Button

SASS Code for the Custom Button

HTML Code for the Custom Button

The rendered CSS looks like this:

Conclusion

Twitter X Logo for Bootstrap Icons

How does it work?

Sizing is not easy, because it's not a web font (yet)

CodePen Twitter X Logo for Bootstrap Icons

Do you like my Stuff?

UPDATED: Bootstrap 5.3.0 Navbar Multi Level and Mega Menu with Dark Theme!

Simple Bootstrap Lightbox

Using the Bootstrap standard classes

Libraries I have used, with great thanks to the respective developers

Your feedback is appreciated

More Stuff

Beautiful Masonry Gallery with Bootstrap and Unsplash Random Photos

What happens under the hood?

Pure Vanilla

No additional CSS so far...

Libraries I have used, with great thanks to the respective developers

Bootstrap 5 Framework

ImagesLoaded

Masonry

Animate.css

Picsum Photos

Your feedback is appreciated

More Stuff

Sign up for my Newsletter!

PHP Developer

TYPO3 Freelancer

MASK.CSS - Mask images and DIVs with ease

What does MASK.CSS do?

Demo on Codepen

Get involved!

UPDATED: Bootstrap 5.1.1 Navbar Multi Level and Mega Menu

Sign Up Form like Instagram with Bootstrap 5.1.0

Here's the compiled HTML:

CSS

Video Player Interface for Bootstrap 5

UPDATE 2021-08-09

Example HTML Markup for Video Player

Note

Support my work:

Follow me:

Blurry image backgrounds like on Instagram

Your Feedback is appreciated!