DEV Community: Eddy Vinck

I made a free tool for blog cover images

Eddy Vinck — Sun, 15 Dec 2024 17:15:15 +0000

I created a free tool to make images for your articles and websites. It’s called OG Image Maker.

I built it with React.js, and it works by creating an SVG programmatically which you can then download as a PNG.

Here are some OG images you can edit using the website:

You can edit the text, the colors, images, a button, the background. Pretty much everything!

And it’s 100% free, without any watermarks, and you don’t need an account.

Go check it out at https://ogimagemaker.com

Juggling a Developer Job, Part-Time SaaS and Conference Speaking

Eddy Vinck — Tue, 09 Jul 2024 19:22:00 +0000

_This was originally posted on my website's blog

Launching a side business is no small thing, especially when you're juggling a job and a personal life. I've recently started with this challenging journey with my blogging SaaS, Blog Recorder. It's been a couple of weeks since the launch, and I'm proud to say it's been quite successful for a small, part-time business.

The early success

I've managed to secure six paying customers, with four opting for annual subscriptions and two on a monthly basis. This has brought me to a modest $75 in monthly recurring revenue, and I've attracted over 120 users in total. To me that is a huge win, and every new customer and piece of feedback is a cause for celebration.

The grind of part-time entrepreneurship

I work 32 hours a week at my day job as a software developer, and I dedicate my other time to my business. That's nights, weekends, and a full dedicated day off. It's a grind, but it's really fulfilling. I'm also passionate about conference speaking, which I've been trying to maintain alongside my SaaS.

Balancing work, speaking, and personal life

The balance is tough. Preparing for a conference talk while running a business and working part-time is taxing. I'm flying to Wisconsin for THAT Conference, an event I'm excited about, but it has required a lot of legwork to find a sponsor to help cover travel costs.

Thankfully, the conference organizers have been supportive, offering a good deal on my hotel stay. And surprisingly, I've also been given the opportunity to be on the list of sponsors for the conference, which includes a table to promote Blog Recorder. They really didn't need to do that, and I'm really thankful for this chance. It will be the first time I'm sponsoring an event and promoting something myself, so I'm curious how it will go.

The reality of overcommitment

Despite the excitement, I've come to realize that I may have underestimated the amount of work I can handle over an extended period. From launching the product to learning how to handle international sales tax with my accountant has been a lot to manage. I'm learning that in the long term I need to cut back and focus on fewer tasks to maintain a sustainable pace if I keep doing this outside of my developer job.

The importance of self-care

One crucial lesson I've learned is the importance of self-care. Ensuring I get a full eight hours of sleep and not slipping into hermit mode are top priorities. I'm no longer skipping the gym to get a few extra hours of work in, which is something I intentionally did to work on my launch.

Socializing is also key. I want to make sure I stay in contact with friends and family.

Preparing for the conference

As for the conference, I am creating an outline for my talk, creating a demo application for a small product, and polishing my slides. I'm not too worried about giving the talk itself as I'm confident in my speaking abilities, but the preparation is key and is still a lot of work for the upcoming weeks.

Intentionality and focus

In the end, it's about being intentional with my time and energy. Saying no to many good things to focus on the right things is hard but necessary. As a part-time entrepreneur, conference speaker, partner, and individual, focusing on what truly matters is the key to success and a long-term sustainable work-life balance.

In conclusion, managing part-time SaaS, conference speaking and a developer job is really challenging sometimes, but it is also something that makes me happy. It requires a good balance of work, passion projects, and personal life. With intentionality, focus, and taking care of yourself, it is definitely possible. But choosing these things means saying no to a lot of other things.

And before you ask..

Yes, this post was created using Blog Recorder! It can export to markdown, so crossposting to Dev.to is super easy! I'll be sharing my articles here more often 🥳

I created an e-book about developer job searching - Get a free sample!

Eddy Vinck — Mon, 20 Sep 2021 17:13:54 +0000

Developer Job Searching: The Not So Technical Parts is the resource I wish I had when I started searching for developer jobs.

It includes everything that I have learned about job searching since I started learning how to code 5 years ago.

It launches tomorrow!

You can get a free sample here: https://eddyvinck.gumroad.com/l/pSKPZ

If you like it, you can still save 40% by pre-ordering here: https://eddyvinck.gumroad.com/l/developer-job-searching/pre-sale

As a pre-order, the e-book costs just $11.40, and the Complete Package costs only $21.

Tomorrow, after the launch, the e-book will be $19, and the Complete Package will be $35.

Save 40%:

How To Choose The Right Frontend Framework

Eddy Vinck — Sat, 11 Sep 2021 14:55:06 +0000

Should you learn React, Vue, Angular? Or is something like Svelte a better choice?

This question plagues many frontend developers looking to break into the industry.

I've seen this question asked and answered hundreds of times online.

Most of the advice on social media is not very helpful

That's a pretty bold claim, but hear me out: the advice is not helpful because it most likely does not apply to your circumstances.

When people are comparing frameworks, they are often comparing one of the following things:

Amount of GitHub stars
Amount of NPM downloads
Amount of code required to build something
Performance

It's pretty much always one of those things. Or people are just advocating for their favorite framework.

Those comparisons are all valid and can help you make a decision, but in my opinion there is a better way to tackle this question.

The area where most of the popularity comparisons fall flat, however, is that there is not a single one framework that is the most popular in every part of the world. Whereas in some areas it could be React, in other areas it might be Vue (or any other framework).

Finding out what framework to learn

You should choose a framework that aligns with your goals.

Chances are that if you are reading this article you are an aspiring or entry-level developer.

If that is the case, then wouldn't it make more sense to choose the frontend framework that will most likely get you a job? I'm assuming that is why you are reading this in the first place.

So how do we find out what framework will get you a job?

Simple: You need to find out what companies are hiring for. You have to do market research.

The easiest way would be to look at job posts for companies in your area.

You can do this by going to websites like Indeed or your local equivalent.

Some companies don't hire via websites like that though, so I would advise you to also look at the individual websites of companies in your area or the area where you would like to work.

If companies in your area are organising Meetups / developer networking events via meetup.com or other platforms that would also be a great way to find out what you should learn.

After doing this research you should take some time to think about what companies you would like to work for. Then learn the framework that is most commonly used amongst those companies.

You can learn more than one framework

Maybe after doing your market research you come to the conclusion that companies aren't hiring for the framework you would really like to learn.

My advice would be to still learn the framework that is most desired by those potential employers. Build some projects. Get a job. Get real world experience.

You can always learn other frameworks once you have gotten your foot in the door.

What companies to apply for?

I recently wrote an article called Transform Your Career And Personal Life: Finding A Great Job that could help.

I also am writing an eBook about this subject. It's called Developer Job Searching: The Not So Technical Parts. Right now you can get it for 40% off. It releases September 21st.

Click 👆 for more information

Transform Your Career And Personal Life: Finding A Great Job

Eddy Vinck — Tue, 07 Sep 2021 13:05:01 +0000

Nobody wants a bad job.

But what exactly is a bad job? That definition is actually up to you, as it is very personal.

So what do you want? Do you want to become the best developer you can be?

Then you need a job that continuously challenges you, as opposed to one where you do the same thing over and over.

Do you really have 10 years of experience, if you do the exact same type of work every year?

A great job, by contrast, will grow your skills continuously over time.

How do you find a great developer job?

You need to decide what a great job means to you.

A great job could mean:

More money
Better working conditions
Good benefits
Remote job

But it's important to think about why you want those things in the first place. Why does it matter to you?

More money

Having more money means more security. You also don't have to worry about money so much, so you can focus on the other parts of your life.

Better working conditions

Some jobs are very chaotic. But it doesn't have to be that way.

There are jobs out there where you barely, if ever, need to work overtime. That depends on your role too, of course.

Less overtime means you will have more time for family, friends, and hobbies.

Or maybe you would like to build your own business? Not all jobs allow you to have "side hustles."

If that is something you want, then you need to identify which potential employers let you do your own thing in your own time.

Good benefits

Maybe you don't have social healthcare in your country. You could find a company that offers this.

Maybe you don't want to buy a car? You could find a company that leases a car for you 🚗

Remote job

A great way to save more time is to find a company that isn't too far from where you live.

Not having a commute at all would save you even more time!

Market research

Now you have thought about the things you look for in a job it is time for some market research.

You could just scroll on job posting websites and apply to every single job you see.

Or you could be smart about your approach.

Companies like talking about themselves, and especially about the things that makes them great.

You can check job posting websites, company websites, company social media accounts.

It's more effort to go through all these things, but it provides you with a few benefits.

First of all, you know more about the company you are applying for. This will help you during your interviews.

Secondly, you will be able to make a more informed decision of wether you even want to apply for that company at all!

You could save yourself hundreds of hours of interviewing by only applying to the right jobs.

The image above oversimplifies your job search a lot, but that is what it comes down to: finding a job that matches your personal needs. The more those circles overlap, the better the job is for you.

Wrapping up

In conclusion, finding a great job is hard, but ultimately worth every bit of effort. After all, why would you want to spend so much time interviewing or working for the wrong companies?

I hope this article got you thinking at least a little about how to approach your future job searches.

I wrote a lot more about this subject in Developer Job Searching: The Not So Technical Parts, the eBook that covers how to find a great job you will love.

I'm still putting the finishing touches on the book. Right now, you can pre-order it at a 40% discount.

If you want to:

Stop wasting your time with the wrong employers
Learn how to identify companies that match your needs
Spend less time filling in online job application forms
Start your probation period the right way

Then Developer Job Searching: The Not So Technical Parts is for you.

Click 👆 for more information

Why I think the upcoming CSS Container queries are GAME CHANGING 🔥🔥

Eddy Vinck — Fri, 26 Mar 2021 16:32:57 +0000

I saw this tweet by Una where she announced that CSS container queries are now available under a flag in Chrome Canary.

Here are my thoughts on it.

What is a container query?

A container query is similar to a CSS media query, except regular media queries can only check the state of the browser window / viewport. Container queries check things like the current width of a HTML element, which opens up a lot of possibilities.

🚨 Disclaimer: I haven't tested these container queries yet, but this is how I think they will impact our developer experience 💯

A use for container queries

Let's say you have a form where the labels of the inputs should be on the left when there is space for it + some other things related to the width of the form.

Not an easy task with regular media (viewport) queries if your form doesn't always span the complete width of the page!

Maybe you can pull it off with things like CSS Flexbox and some smart ways of dealing with wrapping, but maybe you want some other styles to be different when the component becomes smaller.

Especially difficult if you need to "syncronize" multiple style changes based on that wrapping point.

That's currently only possible if you add JS into the mix to check if the width or height changed.

You could then add or remove CSS classes with JS. Not ideal!

Container queries in the component era

Especially in the current "component era" of frontend, it becomes invaluable to be able to scope styles to container size of the component.

Parent layout components no longer need to tweak its children components' CSS in certain scenarios.

And with with ever changing requirements of projects it becomes really handy to define all those styles within the component based on its container size.

Say you make a form component intended to be half the width of the page. Some time passes, and now a colleague has to reuse that component for the full width of another page.

They need to find all the CSS they need to tweak and update that CSS from the parent component.

But let's say the component also needs to be used in other parent components. Now you have to duplicate that full page CSS or find solution to reuse it easily (component composition maybe?)

Way more complex (if you ask me) than defining all those styles within the component!

This post was adapted from my original Twitter thread. Feel free to discuss it there as well!

// Detect dark theme var iframe = document.getElementById('tweet-1375480037726642191-221'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1375480037726642191&theme=dark" }

You can subscribe to my newsletter here. It's free!

Should services like AWS be cheaper for people outside the US?

Eddy Vinck — Thu, 24 Dec 2020 09:07:40 +0000

I've been thinking about this.

The prices are often based on salaries in highly paid countries.

My country (The Netherlands) is far from poor, don't get me wrong, but we make WAY less than some developers in the United States make.

If a US developer makes $120k and a service costs them $30 monthly it doesn't seem like a big deal.

That same service can effectively be 3 times more expensive if you make a third of what the US dev makes.

Should SaaS / PaaS / etc. have purchasing power parity? (PPP)

My Web Development Study Plan For 2021

Eddy Vinck — Fri, 18 Dec 2020 09:27:26 +0000

This article was originally posted on my personal website. You can subscribe to my newsletter here.

As 2020 is coming to an end, I have been reflecting on how much I have learned this year.

For many, including me, it has been a rather difficult year. Unsurprisingly, this has had an impact on what I have been able to learn or build.

Looking towards 2021 with the intention of further improving myself as a developer I have written a list of things I want to study.

Learning

I have many things I want to learn. The things I want to learn generally fall into the following categories:

Fundamentals and getting better at things I already know and use
Promising tools and concepts that I've been keepign an eye on
Things that will allow me to create things I cannot create with my current skillset

Disclaimer: This list is ambitious. Especially since I will be moving into my own house next year. It's unlikely I will be able to do all of it, and that's okay.

Back to basics

The fundamentals of the web, JavaScript and programming will always be relevant. I find that even as someone who has been coding for about 5 years that I still benefit from going back to the basics.

These are the fundamentals that I want to study (again)

Event loop
Design patterns
Prototypes and classes
Regular functions vs. arrow functions
Learn more about how web pages are rendered
Promises and async / await
How the internet works (generally)

Refreshers

It's good to know the tools you use. I want to brush up on things that I use frequently or want to start using more.

These are the things I want to brush up on

Go through all the ReactJS documentation again
Setting up GraphQL servers
Unit testing with React Testing Library
End to end testing with Cypress
Chrome devtools - what's new that I'm not using yet?
TypeScript

Going outside of my comfort zone

Up until this year I have mostly been "just" a frontend developer. In an effort to go outside of my comfort zone I have been venturing into the backend, but only slightly.

I want to get more familiar with backend in 2021.

Authentication with JWT (JSON Web Tokens)
API Gateways
Restful APIs (I have mostly done GraphQL at this point)
PostgresQL with Sequelize
Server logging best practices beyond console.log
Docker and Docker Compose
Get more familiar with Postman (or Insomnia which is a free alternative)
Authentication library like PassportJS

Serverless and JAMstack

Serverless and JAMstack are things that aren't going away anytime soon. I have some general knowledge about it, but I haven't really taken the time yet to dive deeper into these concepts and build something with it. Now that this way of building has matured I think it's time to give it a fair shot.

NextJS: it's a framework for React that is designed to work great for JAMstack projects. I'll probably be taking Wes Bos' Advanced React course when he updates it since I already purchased it.
A headless CMS like KeystoneJS, Strapi or similar. Probably one of the cheaper ones since some are really expensive.
AWS Lambda and other Amazon services that might come in handy.
Something with a database. Not sure what yet.

There are also things in frontend that I want to check out but haven't yet.

These are my frontend picks:

TailwindCSS
XState: a state management library
React Hook Form
Styled System: a helper library for Styled Components, which I already use
Design systems

Courses

I have a Frontend Masters subscription and I will be using it of course.

These are the courses I want to check out next year:

JavaScript Hard Parts v2
JavaScript Recent Parts
JavaScript New Hard Parts
Production Grade TypeScript
Production Ready NextJS
Intro to Containers

Maybe I'll also take a look at the Computer Science Learning Path.

If I can get through the courses above I will also be checking out some of the serverless / JAMstack courses on there.

Not sponsored by the way (but I definitely could be because I recommend them so often.)

Additional things to learn

These are things related to my field, but not particularly to my role. These are just things that interest me generally.

How to write good content
Search Engine Optimization (SEO)

Doing

Learning is very important, but to truly learn you must also do.

I would like to start a larger side project in 2021. I'm not sure what it is going to be yet.

I'd like to have a project that has either a proper backend that I can use to learn more about backend or a serverless setup. Or maybe I will build something serverless, but have a serverless application that works together with some sort of backend I can build.

A busy year ahead

In 2020 I definitely overworked myself a couple times to a point where I needed a longer break. I'd love to avoid that in 2021.

Not that taking breaks is a bad thing, but ideally I should not overwork myself to the point where I don't want to do any coding outside of work for a couple of months. I'd like to be more consistent with programming throughout the year.

With that in mind, I don't think I will be able do all the things in this list.

I will be moving into my own house and learn a lot of things related to that, so I'll also have less time to work on web development outside of work.

I can always move things to 2022 if I don't get to them in 2021.

Happy holidays!

This article was originally posted on my personal website. You can subscribe to my newsletter here.

Using CSS Counters is easy as 1, 2, 3

Eddy Vinck — Wed, 20 May 2020 17:21:30 +0000

Don't you just love it when you can do things with just CSS? No JavaScript at all? CSS Counters are awesome and could prove useful to you one day.

How to use CSS Counters?

Instead of writing this HTML:

<div>
  <h1>1. First section</h1>
  <p>Some really interesting content</p>
  <h1>2. Second section</h1>
  <p>Some really interesting content</p>
</div>

You could write the following to achieve the same result:

<div class="simple-example">
  <h1>First section</h1>
  <p>Some really interesting content</p>
  <h1>Second section</h1>
  <p>Some really interesting content</p>
</div>

This makes it easier to add more sections later or even change the order without editing the text itself manually!

All you need is the following CSS:

.simple-example {
  /* start or reset the counter */
  counter-reset: sectionCount; 
}
.simple-example h1 { 
  /* counter = counter + 1 */
  counter-increment: sectionCount; 
}
.simple-example h1::before { 
  /* display the number and a . before the heading */
  content: counter(sectionCount)". "; 
}

With this CSS the output will become "1. First section" instead of "First section".

Advanced example

Check out the demo here: https://codepen.io/EddyVinck/pen/OJyrBJj

This demo has utilizes two counters at the same time to achieve the desired effect. You can add new rules to the list and the numbers will be updated automatically!

HTML

<section class="paper">
  <h1>Terms and conditions</h1>
  <h2>Terms</h2>
  <ol>
    <li>Software: a digital product</li>
    <li>Acceptance: By using the Website ...</li>
  </ol>
  <h2>
    Conditions
  </h2>
  <ol id="conditions">
    <li>Distribution: You will not distribute your license</li>
    <li>Authentication: You will not share your account</li>
    <li>Follow Eddy Vinck on Twitter if you found this helpful. 🐦</li>
  </ol>
</section>

CSS

section {
  counter-reset: heading;
}
h2 {
  counter-increment: heading;
}
h2::before {
  content: counter(heading)". ";
}
ol {
  padding-left: 0;
  counter-reset: ruleNumber;
  list-style: none;
}
ol li {
  counter-increment: ruleNumber;
  position: relative;
  padding-left: 40px;
}
ol li::before {
  position: absolute;
  left: 0;
  content: counter(heading)"."counter(ruleNumber)".";
}

Conclusion

CSS is awesome, but you already knew that. I hope you will be able to use CSS counters yourself in the future.

If you found this article helpful you can follow me on Twitter: @Veinq_. I post smaller tips including CSS and JavaScript on there as well.

Here is one of my latest tips people really enjoyed.

// Detect dark theme var iframe = document.getElementById('tweet-1261260706617442305-567'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1261260706617442305&theme=dark" }

What are your favorite productivity tools and apps?

Eddy Vinck — Wed, 15 Apr 2020 13:59:53 +0000

We all look up to those around us who are really productive. What are the tools you use to be a productive developer?

Anything from command-line shortcuts to apps. What are the things or processes that boost your output at the end of the day?

Feel free to also reach out on Twitter:

Liquid error: internal

What kind of music do you listen to when working from home? 🏡🎶

Eddy Vinck — Mon, 16 Mar 2020 13:57:30 +0000

And what other tips do you have for working from home?

Liquid error: internal

How to use a SSH key for GitHub on unix based systems (Linux or Mac)

Eddy Vinck — Sat, 01 Feb 2020 19:17:02 +0000

Navigate to ~/.ssh

ssh-keygen -t rsa -b 4096 -C "your@email.com"

When asked to give your key a name I recommend naming it after the service you are using it for, so for me this will be github.

Create ~/.ssh/config with the following content

Host github.com
  HostName github.com
  User git
  IdentityFile ~/.ssh/github

Add the contents of the public key file (~/.ssh/github.pub) to your GitHub account https://github.com/settings/keys

Done! Now you don't have to specify which SSH key you want to use when using SSH to interface with GitHub.

This is how I do it.

Bonus: If you use multiple accounts you can do this in your config:

# account myfirstaccount (username)
Host github.com-myfirstaccount
  HostName github.com
  User git
  IdentityFile ~/.ssh/github-myfirstaccount

# account mysecondaccount
Host github.com-mysecondaccount
  HostName github.com
  User git
  IdentityFile ~/.ssh/github-mysecondaccount