DEV Community: Timothy Robards

Discovering the Benefits of Freelance Work

Timothy Robards — Fri, 16 Feb 2024 17:04:17 +0000

For countless freelancers, its allure lies in the ability to be your own boss, set your own schedule, and work from any location you like. Others are drawn by the potential for financial growth, ample opportunities for personal and professional development, or the freedom to select projects that align with your passions. Whatever the driving force may be, it’s an exciting time to become a freelancer!

Furthermore, the tech industry presents vast opportunities for freelancers. Whether you specialize in web development, design, writing, marketing, social media management — or any skill set involving a keyboard — you’re well-poised to reap the numerous benefits that freelancing has to offer.

In this article, we look at some of the main reasons why people choose to become freelancers. I bet that if any of these reasons resonate with you, chances are high that you’ll thoroughly enjoy working for yourself as a freelancer!

1. Be Your Own Boss 😎

One of the main reasons many choose to start freelancing is the ability to be your own boss. The idea of saying goodbye to controlling managers, not feeling valued, or rewarded for your hard work, is often reason enough! But perhaps more accurately, it’s an entrepreneurial spirit that attracts many to the world of freelancing.

And let’s be real, who doesn’t want this coffee mug…

‘THE’ coffee mug for the self-employed.

Additionally, being your own boss is likely to unearth new levels of creativity, motivation and innovation that will have you feeling inspired and ready to take on anything! It’s a fantastic reason to get into freelancing.

2. Work on your own terms 🛠️

Do you want to exclusively build websites using WordPress?

Or specialize in e-commerce websites with Shopify?

Do you desire the freedom to change your mind at any time, without requiring someone else’s permission?

As a freelancer, you’re not bound by the requirements of others — you make all the rules.

3. Work when you want ⏰

Are you most productive in the morning or at night?

There’s no reason to adhere to a traditional 9-to-5 schedule if it doesn’t suit you. You could work from 4 a.m. to 8 a.m. if that aligns better with your productivity peaks.

The same flexibility applies to the typical 5-day work week. If you can achieve all your goals in 4 days, there’s nothing stopping you. Go for it!

4. Work where you want 🌴

Another truly great thing about freelancing is that you can work from anywhere! It doesn’t matter to your clients, as long as you get the job done. So, if you enjoy traveling or perhaps even aspire to embrace the digital nomad lifestyle, you’ll love the freedom of being your own boss!

Even if you don’t travel often (or at all), you’re free to work in coffee shops, in the backyard, at the park, or in your hotel if you decide to book a week away.

5. Unlimited earning potential 💸

When you’re starting out, you’ll likely accept most of the work you can get. However, as time goes on, you’ll find yourself with more opportunities than you can handle alone.

At this juncture, you have the luxury of being selective and, better yet, you can raise your rates. Clients seeking a dependable freelancer or your specialized type of work will gladly pay these higher rates.

As your business advances, your earnings potential really becomes limitless.

6. Unlimited growth opportunities 🌱

There will come a time when you’ll contemplate outsourcing aspects of your business or even expanding it into an agency capable of offering a wide range of services.

Should you choose to establish a company, recruit staff, and develop a brand, you’ll embark on a journey impossible to achieve as an employee.

Remember that great things often come from humble beginnings.

Whether you ultimately reach this level or not, the freelance journey will undoubtedly foster positive growth within you.

How?

You’ll learn more than you anticipate. Each day in the freelance realm presents a fresh array of challenges, providing ample opportunities for growth. Beyond being a designer, writer, or developer, you’ll assume the role of a business owner, honing your problem-solving skills daily.

You’ll cultivate resilience. Freelancing often requires navigating unpredictable situations and overcoming setbacks. As you confront and conquer these challenges, you’ll develop a robust resilience that strengthens your ability to bounce back from adversity, both personally and professionally.

You’ll gain confidence. With each day, you’ll manage client interactions, sales, and meetings. These tasks will quickly become second nature. Others will begin to perceive and treat you differently. As a freelancer, you’ll witness a significant boost in your everyday confidence.

7. Choose projects that you want to work on 🖥️

Another fantastic aspect of freelancing is the freedom to select projects that resonate with you.

Whether you’re a web developer specializing in large-scale eCommerce websites, a designer focusing on logo creation, or a writer who wants to only write ad copy, the choice is yours! You have the freedom to pursue what aligns with your passions and inspires you the most.

It’s important to remember that you’ll inevitably need to do some repetitive work (such as admin tasks, accounting, etc.) that are part of the job. However, if the job itself is something you’ve chosen to do because it’s something you enjoy, then you’re going to find the task itself much more rewarding.

8. Know when to say no! 🚫

Regrettably, many freelancers encounter difficult clients at some point. This is particularly common in the early stages when you’re eager to accept any available work.

It’s crucial to recognize that you have the power to choose your clients. And clients must respect the boundaries outlined in your freelance contract (more details on that in a forthcoming article!). However, if a client displays aggression, rudeness, or fails to respect your time, you have the right to terminate the contract immediately. Losing a project is a small price to pay for safeguarding your mental well-being, which is paramount.

Knowing when to say “No” is a valuable skill both in business and life.

9. Reap the Rewards of Your Efforts 👏

We’re all familiar with the typical employee setup: a fixed salary, occasional bonuses, and an annual raise that barely keeps pace with inflation. Even if you work tirelessly, put in extra hours, and boost your employer’s profits, your paycheck remains unchanged. Where’s the incentive?

As a freelancer, you’re compensated for your dedication. If you go above and beyond, work extra hours, and deliver exceptional results for your clients, you’ll see a direct increase in your income.

Every ounce of effort you invest benefits you directly, not someone else. So, go ahead and relish in the extra earnings you’ve rightfully earned! (Or save it up if that’s more your style 😜).

10. Experience Unmatched Job Security 💪

As a freelancer, your job security is unparalleled (unless, of course, you choose to let yourself go?). Your primary responsibility is to persevere!

In the long term, you’ll have complete control over your future and income. This level of autonomy far exceeds the sense of ‘job security’ associated with traditional employment, where a company can abruptly terminate your services at any moment.

So, why do YOU want to freelance?

Take some time to reflect on what matters most to you. Some of the points mentioned here may resonate more strongly with you than others, or you may have your own unique set of reasons.

For me personally, the daily satisfaction of knowing that my hard work directly translates into tangible rewards is priceless.

Whether it’s witnessing my business grow, building stronger relationships with clients, or just taking a moment to appreciate the freedom and flexibility of freelancing, it’s definitely a great feeling to be in control of my own destiny.

Remember, exploring the freelance life is an ongoing journey of self-discovery and growth, so stay open to new opportunities and possibilities along the way.

Are you ready to turn your dev skills into a freelance business? Whether you're completely new to freelancing or are looking to level up your existing skills. I'll teach you everything you need to know to become a successful freelancer!

Get started today with my Complete Guide to Freelancing.

A little about me..

Hey, I'm Tim! 👋 I'm a freelance business owner, web developer & author.

I teach both new and experienced freelancers how to build a sustainable and successful freelancing business. If you'd like to read more of my articles, check them out on my blog.

Thanks for reading 🎉

15 Best Platforms to Find Freelance Work

Timothy Robards — Thu, 01 Feb 2024 14:35:29 +0000

Everyone wants to make money through freelancing, but it’s not always easy to get started!

Platforms (Upwork, Codementor, etc) are an ideal place to find clients when you’re new to freelancing and you haven’t yet built your own client base. Most of the time the tasks on offer are quick and one-off, but they’re an excellent way to start building your reputation and gaining experience.

By using a platform, you can rapidly build a client base with minimal effort, and find a ton of jobs in just a few clicks. You’ll also benefit from the added contract security, automated invoicing, time-management software & more! The result is a fairly substantial saving in terms of both time and money.

It’s important to choose the right platform based on your skills. So here’s a comparison of the top 15 freelancing platforms for freelancers.

1. Upwork

Upwork has a massive user base (1.5 million clients and growing), so it goes without saying that there are a ton of freelance opportunities to pick from. There are short and long-term jobs for web developers, designers, writers and more. Whatever your skill level, the vast availability of jobs all but guarantees you will find work on Upwork.

However, the popularity of the platform is a kind of double-edged sword. Yes, there are a ton of opportunities, but also a LOT of competition. Many projects will have 30–40 bidders which makes it quite difficult to stand out. This can often mean that you’ll find yourself needing to work for less than your worth in order to secure a contract — which isn’t ideal.

That being said, some freelancers do very well on Upwork and secure high-paying projects with good consistency. Upwork can be worth the time — if you’re willing to put in the work to establish your reputation on the platform.

✅ Pros

Access to an endless supply of jobs
Highly flexible
Well-organized

❌ Cons

The massive amount of competition forces you to lower your rate
Fees are much higher than other platforms
If your account ever gets suspended, your payments will be locked

2. Freelancer

Freelancer is considered by many to be one of the biggest and best platforms to find work. Much like Upwork, you’ll find work as a developer, designer, writer or even SEO specialist. The site is easy to navigate for both freelancers and clients alike. One unique thing about this platform is that freelancers are able to keep 100% of their earnings, unlike most of the other platforms whose fees and rates vary.

✅ Pros

Choose your work and set your own timing
Large range of jobs to choose from
A “free membership” option is available if you want to try out the platform

❌ Cons

Highly competitive
Difficult to get started when you haven't received any feedback

3. Toptal

Toptal is a great solution for more experienced freelancers. They position themselves as the place to find the top 3% of freelance talent. In order to access the platform you’ll need to pass a rigorous screening test — the reward is access to great clients (Airbnb, Zendesk, etc..) with substantive projects, along with competitive compensation. This exclusivity sets them apart from many of their peers.

✅ Pros

Fantastic for experienced freelancers
Big-name clients
Great compensation

❌ Cons

Difficult to access the platform without substantial experience
Not ideal for beginners

4. Fiverr

Fiverr works differently from traditional platforms. As a freelancer, you create your own jobs based on your abilities — instead of having companies post jobs to apply for. You can do well by categorizing your “gigs” by using keywords that show up in different search queries. And although the name implies that the cost is just $5 per project, this isn’t a requirement — just a starting point. However, this does mean that most clients on the platform are not expecting to pay much for a project.

✅ Pros

Ideal for beginners looking to get some experience
Trustworthy company
By offering the services yourself, you’ll be working in your comfort zone

❌ Cons

It is very competitive
Low earnings
Better options exist if you're looking to make money

5. Codementor

Codementor is a great alternative to many online platforms. Essentially you join the platform as a “mentor” to share your expertise, teach & answer coding-related questions in real-time. These sessions can take the form of video chat (including screen-sharing) or chat-based interaction. Clients are often new to web development & are looking for mentorship, one-on-one help or debugging. If you’re an intermediate to advanced level developer with a strong interest in teaching — Codementor is a great way to find freelance work!

✅ Pros

You get paid to teach code!
Highly responsive staff
Flexible scheduling

❌ Cons

Not cost-effective for clients wanting long-term help
Need to be very comfortable with live video

6. Guru

Guru is yet another large platform that has opportunities for people with a whole range of skills. It is highly flexible, you can choose jobs by location, category, or job type (hourly or fixed). Guru’s flexibility can cause confusion, though. For example, Guru charges each seller a commission on their rate, a standard practice for freelancer platforms — plus a nominal handling fee of 2.9%.

✅ Pros

Great ease-of-use
It’s membership-based which tends to encourage reliability

❌ Cons

The pricing structure can be confusing
Not as popular as some of the larger platforms

7. People Per Hour

PeoplePerHour is a UK-based platform that streamlines the typical freelancing process by consolidating all the communication, payments, and job management. You can send up to 15 proposals to clients for free before needing to sign up for a paid plan — this is a great way to try out the platform! Many projects are available for developers, designers, SEO specialists and technical writers.

✅ Pros

You can try out the platform for free!
It comes with an app for added convenience
Invoicing is automatic

❌ Cons

Customer support will almost always take a buyer’s side
Poor customer support if there are technical problems or payment issues

8. Arc

Arc is a great platform for programmers and web designers looking to work from home. There is a pretty strict vetting process, which is great if you’re a more skilled professional looking to stand out from the crowd. If you’re just starting out, it would be better to accumulate some skills and experience before using Arc.

✅ Pros

Huge community
Trusted by leading startups and tech companies
Very smooth onboarding process and easy to use platform

❌ Cons

The vetting process is quite tough!

9. Scalable Path

Scalable Path is a freelance marketplace that specializes in helping businesses scale their IT teams by connecting businesses with top freelance developers. The minimum project size is 150 hours or USD7,500.00 (approximately one developer for one month). If a project is smaller than that, they advise employers against signing up for their sourcing and vetting services.

✅ Pros

Guaranteed large projects that pay well
Excellent if you're looking for long-term opportunities
Great for experienced developers

❌ Cons

Only for developers
Not ideal for beginner

10. Storetasker

Storetasker is the #1 marketplace for Shopify developers looking to work with eCommerce brands. If you’re a Shopify specialist, Storetasker is ideal if you're looking to work exclusively on the platform. The application process is straightforward you’ll typically be up and running within 2 days of applying.

✅ Pros

Ideal if you have Shopify development experience
A very nice website with excellent UI
Great customer service

❌ Cons

Only for Shopify developers
No real vetting process making for high competition

11. 99designs

99designs is the world’s largest on-demand design marketplace, clients are often looking to have logos created, web pages designed, or may even be looking for custom illustrations.

✅ Pros

Great for beginners looking for experience
Good customer support

❌ Cons

Need to put in a lot of time to get regular work
Very competitive
Difficult to communicate directly with the client within the platform

12. Speedlancer

Speedlancer is a unique platform in that it uses the “power of the crowd” to deliver projects quickly. Speedlancer specializes in tasks that can be fulfilled within 4 hours. However, tasks that require more than 4 hours to complete are also catered for with “bundles”. The most popular tasks are web design, development and writing.

✅ Pros

Recommended pricing packages based on the task
Great if you're looking for quick tasks on the side

❌ Cons

Poor ratings can result in your account being blocked
Not useful if you want larger projects

13. Truelancer

Truelancer has jobs from web and app development, to design, sales, SEO work and more! Their platform is quick, trustworthy, and you have the flexibility to build up an ongoing working relationship with clients.

✅ Pros

A great place for beginners looking to secure their first gig!
Good support team
Large range of projects

❌ Cons

Another highly competitive platform
Need to put in a decent amount of work to secure projects

14. Crossover

Crossover connects talent from around the globe with companies that are looking to hire top-quality freelancers. With this platform, you’ll work a 40 hour week on a contract basis. Crossover is not a marketplace for small jobs, but rather for long-term positions.

✅ Pros

Great if you want the peace of mind of full-time remote work
A reliable source of income

❌ Cons

Earnings are low for the time invested
Less flexibility

15. Adeva

Adeva ensures all freelancers have gone through a rigorous screening process, including not only technical skills but aptitude and personality too. If you have solid software development experience, Adeva will likely be a great option!

✅ Pros

Top-tier clients
Passing the interview process gives you access to a more exclusive platform (and higher-paying clients)

❌ Cons

Not ideal for beginners

Conclusion

And there you go! There really are a ton of options when it comes to freelance platforms, and you can pick and choose depending on your skill level.

Beginners would be well suited to Upwork, Freelancer or Fiverr — as they are open to everyone and have an endless amount of projects for every skill level. If you’re more experienced, platforms such as Arc.dev, Storetasker (if you specialize in Shopify), or Adeva would be ideal, as clients will likely pay a higher price for your work, knowing that each of these platforms has a strict vetting process for freelancers.

And there is nothing stopping you from having a presence on multiple platforms! It will give you the most exposure, and once you’ve created a stellar profile on one platform, it’s not difficult to port it across to the others.

In time, you’ll find the platform/s that work best for you 👍

Get started today with my Complete Guide to Freelancing.

A little about me..

Hey, I'm Tim! 👋 I'm a freelance business owner, web developer & author.

I teach both new and experienced freelancers how to build a sustainable and successful freelancing business. If you'd like to read more of my articles, check them out on my blog.

Thanks for reading 🎉

JavaScript Fundamentals: Data Types

Timothy Robards — Tue, 30 Jan 2024 15:00:05 +0000

Let’s take a look at data type fundamentals in JavaScript!

By the end of the article, you’ll have an increased understanding of working with many of the major data types. Which is a fundamental skill to pickup, as you move forward with JavaScript.

🤓 Want to stay up to date with web dev?
🚀 Want the latest news delivered right to your inbox?
🧑‍💻 Join a growing community of designers & developers!
🎉 Subscribe to my newsletter → here

What are Data Types?

Data types are classifications of specific types of data. We have numbers, Booleans (true or false), strings (character sequences enclosed in quotes ‘’ or “”) and more complex data types known as arrays and objects (we’ll look at these a bit later).

let a = 1;           // a is a number
let a = "Avocado";   // a is a string
let a = true;        // a is a Boolean
let a;               // a is undefined

For example, a, has been defined as a variable using the let keyword. We can assign any data type to it, or even just initialize it by leaving it blank.

Why Does it matter?

When storing data in a variable, it’s important that we know its type, as that determines what we can do with it! For instance, you can add numbers 1 + 1 = 2, and that’s fine. However, if you attempt to add numbers when they have the data type of string “1” + “1” = 11 Your result will be 1 and 1, not the sum equaling 2 as you may have expected. Let's now take a look at each type in detail.

Numbers

Numbers in JavaScript can be written with or without decimals, such as:

let a = 1;
let b = 1.1;

And they can be abbreviated using the e exponent, for example:

let million = 1000000;

// or..

let million = 1e6;

The 6 is the amount of 0’s, which in this case equals one million.

There are a few special values that we often encounter when working with numbers, Infinity, -Infinity and NaN.

If you attempt to divide a number by 0, such as:

3/0    // Infinity

The result will be Infinity. As the JavaScript computes the result outside its largest possible number of 9007199254740992. The opposite would yield:

-3/0   // -Infinity

The value of NaN represents ‘Not a Number’, meaning the value isn’t considered a number. This would generate in illegal expressions, such as:

let a = 100 / "Greg";     // a will be NaN

As of course you can’t divide a number by a string!

However, JavaScript is smart enough to convert your data type in some cases, such as:

let a = 100 / "2"         // a will be 50

JavaScript will use type coercion to consider your “2” string to be a number in this case.

Strings

As mentioned earlier, strings are sequences of characters that exist within either single or double quotes:

let foodChoice = 'Crunchy cheddar jalapeno cheetos';
let foodChoice = "Crunchy cheddar jalapeno cheetos";

Strings aren’t limited to letters either, numbers and symbols are also acceptable. It’s the quotes that define our string data type.

It really comes down to personal preference as to whether you use single or double quotes, consistency is what’s most important within your code!

let eater = “Bruce”;
let foodChoice = "Crunchy cheddar jalapeno cheetos";

alert(eater + " loves " + foodChoice + "!")

// Bruce loves Crunchy cheddar jalapeno cheetos!

Booleans

We use the keywords true and false to set variables as Boolean data type.

let a = true;
let b = false;

Booleans are especially useful when performing mathematical operations, in determining whether an expression is true or false, such as:

10 > 5     // true, 10 is greater than 5
5 > 10     // false, 5 is not greater than 10
5 < 10     // true, 5 is less than 10
5 = 5      // true, 5 equals 5

If we assign our expression to a variable, such as:

let a = 10 > 5;   // true

Our variable a will of course, hold the value of true.

Booleans are used within programs when we need to perform operations based on the evaluation of truth or falsehood. For example, do the received login credentials evaluate to true? Grant access ✔️. Or are they false? Deny access ❌.

Arrays

An array is a slightly more complex data type, however they are really quite simple to grasp! An array is a way to have multiple values held by a single variable. For example:

let colors = ["red", "green", "blue", "yellow"]

An array is defined by using square brackets [] as in the above example. We’ve assigned an array to the variable colors, contained within are our elements of red, green, blue and yellow.

A call to our colors variable will output our entire array of [“red”, “green”, “blue”, “yellow”].

The true power of arrays is that their contents can be iterated, we can call out a single item within the array variable. To do this we use an index number, inside of square brackets:

colors[0]     // red
colors[1]     // green
colors[2]     // blue
colors[3]     // yellow
colors[4]     // undefined

Note: Our first array element always has the index position of 0. So remember to start counting from 0 instead of 1!

Arrays have a large amount of flexibility, they can have elements added, removed and changed. Let’s now take a look at our final data type: objects!

Objects

The object data type is typically used for holding large amounts of related data. Object data values are stored in key/value pairs, the pairs make for a logical way to store and access our data, using curly braces {}, for example:

let user = {firstName:"Jane", lastName:"Doe", age:34, location:"Vancouver"};

For clarity we’d write this out over multiple lines:

let user = {
    firstName: "Jane",
    lastName: "Doe",
    age: 34,
    location: "Vancouver"
};

Our above example contains four properties firstName, lastName, age, and location. Our properties can be of any data type, which are accessed using objectName.property as follows:

user.firstName     // Jane
user.lastName      // Doe
user.age           // 34
user.location      // Vancouver

Conclusion

Understanding how we classify data types is a fundamental skill to posses when moving forward with JavaScript. In this article, we looked at and what distinguishes each type.

Stay tuned for my next post, where we'll expand upon this knowledge by learning how to perform data type conversions.

Get started today with my Complete Guide to Freelancing.

Available now at 👉 https://easeout.gumroad.com/l/freelance

A little about me..

Hey, I'm Tim! 👋 I'm a freelance business owner, web developer & author.

I teach both new and experienced freelancers how to build a sustainable and successful freelancing business. If you'd like to read more of my articles, check them out on my blog.

Thanks for reading 🎉

JavaScript Fundamentals: Syntax & Structure

Timothy Robards — Mon, 26 Dec 2022 03:58:11 +0000

As with any language, programming languages are defined by sets of rules. The rules (or syntax) are what we follow when we write our code, which form the logical structure of our programs.

This article marks the beginning of a series I’ll be writing on learning the JavaScript fundamentals. Be sure to check back often!

Let’s dive right in with the building blocks of JavaScript. We’ll be looking at values (literals & variables), camel casing, unicode, semi colons, indentation, white spacing, commenting, case sensitivity, keywords, operators and expressions! 😅

By taking the time to learn the fundamentals, we’ll be well on our way toward building more functional and readable code!

JavaScript Values

In JavaScript there are two types of values: Fixed values (or literals) and Variable values (variables).

Literals

Literals are defined as values that are written in our code, such as numbers, strings, booleans (true or false), as well as object and array literals (don’t worry too much about these just yet). Some examples include:

10          // A number (can be a decimal eg. 10.5)
'Boat'      // A string (can be in double "" or single '' quotes)
true        // A boolean (true or false)
['a', 'b']                           // An array
{color: 'blue', shape: 'Circle'}     // An object

Note: I’ll be looking at data types in detail in the next article in this series, stay tuned!

Variables

Variables are named values which store data. In JavaScript we declare our variables with the var, let or const keywords, and we assign values with the equal sign =.

For example, key is defined as a variable. Which is assigned the value abc123:

let key;
key = abc123;

When to use var? Don’t. It really should only be used when working with legacy code. Its the old pre-ES6 syntax.

When to use let? Use it if your variable needs to be updated within the program (it can be reassigned).

When to use const? Use it if your variable holds a constant value. It must be assigned at the time of declaration and it cannot be reassigned.

Camel Case

What if our variable name consists of more than one word? For example, how would we declare a variable we wish to name “first name”?

Could we use hyphens? e.g. first-nameNope, -’s are reserved for subtractions in JavaScript.

What about underscores? e.g. first_name We could, but it has a tendency to make our code look messy and confusing.

The solution? camel case! e.g. firstName. The first word is lower-case, the first letter of any subsequent words are upper-case. This is the convention within the community.

Note: It’s quite acceptable however, to name your const variables in upper-case with underscores e.g. const DEFAULT_PLAYBACK_SPEED = 1; This would make it clear to others that the value is fixed. Otherwise just stick with camelCase!

Unicode

JavaScript uses the unicode character set. Unicode covers just about all of the characters, punctuations, and symbols that there are! Check out the complete reference. This is great as we can write our names in any language, and we could even use emojis as variable names (because why not? 🤷🏻‍♂️).

Semicolons

JavaScript programs are made up of a number of instructions known as statements. Such as:

// These are all examples of JavaScript statements:

let a = 1000;

a = b + c;

const time = Date.now();

JavaScript statements often end in a semicolon ;.

However, semicolons aren’t always mandatory! JavaScript does not have any issues if you don’t use them.

// Still perfectly valid!

let a = 1000

a = b + c

const time = Date.now()

There are however, some situations where they are mandatory. For instance when we use a for loop, like so:

for (i = 0; i < .length; i++) { 
  // code to execute
}

When using a block statement however, semicolons are not to be included after the curly braces, for example:

if (name == "Samantha") {
  // code
}                           // <- no ';'
//or,
function people(name) {
  // code
}                           // <- no ';'

If we’re using an object however, such as:

const person = {
  firstName: "Samantha",
  lastName: "Doe",
  age: 30,
  eyeColor: "blue"
};                          // the ';' is mandatory

Then our ;’s are required!

Over time you’ll start to memorize where semicolons can and can’t be used. Until then it’s wise to use them at the end of all statements (with the exception of block statements!)

Plus it really is a common convention is to use them regardless, it’s considered good practice as its reduces the probability of errors.

Note: Once you really get going with JavaScript, start using a linter such as ESLint. It’ll automatically find syntax errors in your code and make life much easier!

Indentation

In theory we could write an entire JavaScript program on one line. However this would be just about impossible to read and maintain. Which is why we use lines and indentation. Lets use a conditional statement as an example:

if (loginSuccessful === 1) {
  // code to run if true
} else {
  // code to run if false
}

Here we can see that any code inside a block is indented. In this case its our comment code // code to run if true and then // code to run if false. You can choose to indent your lines with either a few spaces (2 or 4 are common) or a tab. It’s entirely your choice, the main thing is to be consistent!

If we are nesting our code, we’d indent further like so:

if (loginAttempts < 5){
  if (loginAttempts < 3){
    alert("< 3");
  } else {
    alert("between 3 and 5");
  }
} else {
  if (loginAttempts > 10){
    alert("> 10");
  } else {
    alert("between 5 and 10");
  }
}

By applying indentation you’ll have much cleaner, more maintainable and easier to read code!

White Space

JavaScript only requires one space between keywords, names and identifiers, otherwise any white space is completely ignored. This means that as far as the language is concerned, there is no difference between the following statements:

const visitedCities="Melbourne, "+"Montreal, "+"Marrakech";
const visitedCities = "Melbourne, " + "Montreal, " + "Marrakech";

I’m sure you’ll find the second line much more readable. And another example:

let x=1*y;       
let x = 1 * y;

Again, the second line is much easier to read and debug! So feel free to space out your code in a way that makes sense! For that reason, this is also an acceptable use of white space:

const cityName         = "Melbourne";
const cityPopulation   = 5000001;
const cityAirport      = "MEL";

Commenting

A comment is un-executable code. They’re useful for providing an explanation of some code within a program. And also to ‘comment out’ a section of code to prevent execution — often used when testing an alternative piece of code.

There are two types of comments in JavaScript:

// Comment goes here

/* Comment goes here */

The first syntax is a single line comment. The comment goes to the right of the //

The second a multi-line comment. The comment goes in between the asterisks /* here */

A longer multi-line comment:

/* This is 
a comment spanning
multiple lines */

Identifiers

In JavaScript, the name of a variable, function, or property is known as an identifier. Identifiers may consist of letters, numbers, $ and _. No other symbols are permitted, and they cannot begin with a number.

// Valid 😀

Name
name
NAME
_name
Name1
$name

// Invalid 😢

1name
n@me
name!

Case Sensitivity

JavaScript is case sensitive! An identifier named test is different from Test.

The following will throw an error:

function test() {
  alert("This is a test!");
}
function showAlert() {
  Test();                     // error! test(); is correct
}

In order to ensure that our code is readable, it’s best to try to vary our names, so no identifiers are found looking too similar.

Reserved Words

There are a number of words within JavaScript that may not be used as identifiers. Those words are reserved by the language, as they have built-in functionality. Such as:

break, do, instanceof, typeof, case, else, new, var, catch, finally, return, void, continue, for, switch, while, debugger, function, this, with, default, if, throw, delete, in, try, class, enum, extends, super, const, export, import.

See the full list of reserved keywords.

You certainly don’t need to commit these words to memory! If you get any strange syntax errors pointing to a variable, you can check the list and change the name.

JavaScript Operators

Arithmetical operators + - * and / are primarily used when performing calculations within JavaScript, such as:

(2 + 2) * 100

The assignment operator = is used to assign values to our variables:

let a, b, c;
a = 1;
b = 2;
c = 3;

JavaScript Expressions

An expression is when we combine values, variables and operators to compute a new value (known as a evaluation). Such as:

10 * 10    // Evaluates to 100

let x = 5
x * 10     // Evaluates to 50

const firstName = "Samantha";
const lastName = "Doe";
firstName + " " + lastName;    // Evaluates to: Samantha Doe

Wrapping up

And there we go! This article aimed to provide a general overview of the basic syntax and structure of JavaScript. We’ve looked at many of the common conventions, however, remember you can be somewhat flexible — especially when working in collaborative environments with their own particular standards.

Syntax and structuring both have an important role the play for both the functionality of our programs as well as for code readability and maintainability.

Get started today with my Complete Guide to Freelancing.

Available now at 👉 https://easeout.gumroad.com/l/freelance

A little about me..

Hey, I'm Tim! 👋 I'm a freelance business owner, web developer & author.

I teach both new and experienced freelancers how to build a sustainable and successful freelancing business. If you'd like to read more of my articles, check them out on my blog.

Thanks for reading 🎉

React: Installation & Setup

Timothy Robards — Tue, 18 Oct 2022 02:07:51 +0000

React is currently the most popular JavaScript library for building UIs —and that trend looks set to continue for the foreseeable future. In this article, we’re going to focus on the ways we can setup React, quickly and painlessly. So we can dive right into coding!

Why React?

For the uninitiated, React allows us to build extremely fast web apps through the use of the Virtual DOM — it essentially renders only what it needs to. Providing a lightweight alternative to the traditional way of working directly with the DOM.

React also promotes a component based workflow, meaning your UI is essentially just a collection of components. This makes for a fantastic building experience! As you’ll build with modularity, your code will be in neat self-contained chunks. And it’s also very useful when working in teams, individuals can work on parts of a project, while still working collectively toward project completion.

Installation & Setup

There are a number of ways to get up and running with React. Firstly, we’ll take a peek at CodeSandbox and CodePen. If you want to instantly start playing around with code, this is a nice way to go!

We’ll then focus on spinning up a React project with Create React App — which gives you an awesome starting point for your projects, without the need to spend time setting up a build environment.

React in CodeSandbox

CodeSandBox is an online code editor which you can use to get a React project up and running in no time at all.

Go to https://codesandbox.io/s and click React.

Instantly, you’ll be in a React environment that has been configured with the create-react-app structure. We’ll look at this structure further on in the article! If you want to start coding without setting up a local install, this is a great way to go! Tasks such as transpiling, bundling and dependency management are all automated, and you can easily share the link of anything you’ve been working on!

React in CodePen

An alternative to CodeSandBox is CodePen. Many developers use CodePen to showcase their work by creating “pens” for quick code demos, or “projects” for when multiple files are involved. CodeSandbox is definitely more feature rich for working with React, however CodePen is also a fine solution.

I’ve created a CodePen React starter here:

See the Pen React Sandbox by Timothy Robards
(@trobes) on CodePen.

Create React App

Create React App is a tool (built by developers at Facebook) that’ll give you a massive head start when building React apps. It handles all of the configuration, so you don’t need to know any Babel or Webpack. You just run the initial install & you’ll be up in a local dev environment, in no time!

Installing with Create React App

All we need to do is open up our terminal, and run the following:

npx create-react-app <app-name>

Where <app-name> is of course, the name of your app!

We use npx as it will download and run Node.js commands without installing them. If you don’t have Node installed, you can download it here.

So go ahead and run the above command to begin the install! Give it whatever name you like..

The install might take a few minutes to complete. Right now it’s installing all of the dependencies required to build your project. And it’s also generating your initial project structure.

☕️…

Success! Now you can open up your project folder & check out the created file structure.

Additionally, a Git repository has been created for you. And several commands have been added into the package.json file:

npm start starts the development server, including auto page reloads for when you make edits
npm run build bundles the app into static files for production into a build folder
npm test starts the test runner using Jest
npm run eject ejects your app out of the create-react-app setup, which lets you customize your project configuration

Starting your Create React App

Now lets start up our local server! From your app folder, run:

npm start

Your app will launch in the browser on localhost:3000.

And we’re done! Each time you start a new project with create-react-app, you’ll have the latest version of React, React-DOM & React-Scripts. Lets now take a brief look at some of the features of create-react-app.

Create-React-App features

As you’ll see in the generated package.json, there are a number of commands which are available for use in your apps — lets take a look at these now..

Building for Production

When the times comes to move from development to production, you can do so by running npm run build. A build folder will generate containing all of the static files to be used on a production server.

The build command itself will transpile your React code into code that the browser understands (using Babel). It’ll also optimize your files for best performance, by bundling all of your JavaScript files into one single file, which will be minified to reduce load times.

Testing your app

Included with create-react-app is JEST, which allows you to test your code by running npm test. It’ll launch in a similar manner to npm start in that it will re-run your tests, each time you make changes.

If you haven’t yet run unit tests, you can safely file this away as a ‘nice to know’ for now. For those interested in testing components with Jest, all you need to do is either suffix your required files with .spec.js or .test.js, or place your test files inside of a __tests__ folder. Jest will run your tests for the files you specify.

Ejecting

Whenever you create an app with create-react-app, your build settings are not able to be altered, as they’ve been preconfigured in react-scripts. However, by running npm run eject, you can gain full control of your create-react-app configuration.

The config will be copied into your apps directory in a new config folder, and your scripts into a scripts folder. You can then edit your Webpack, Babel and ESLint configurations to your hearts’ content.

Note: Running eject is permanent! Only do so if you’re ready to go it alone (you know what you’re doing!).

Error messages

Another helpful feature included with create-react-app are the built-in error messages that generate to both the console and browser window.

Typos and syntax errors will throw a compilation error. And if you have a bunch of errors, you’ll get an overlay breaking down each, like so:

Wrapping up

And there we go! We’ve seen how to start playing around with React in CodeSandbox & CodePen. And we’ve looked at how to setup a local development environment with create-react-app. You don’t need to spend any time installing dependencies or configuring a build process — you can jump right into coding!

Get started today with my Complete Guide to Freelancing.

Available now at 👉 https://easeout.gumroad.com/l/freelance

A little about me..

Hey, I'm Tim! 👋 I'm a freelance business owner, web developer & author.

I teach both new and experienced freelancers how to build a sustainable and successful freelancing business. If you'd like to read more of my articles, check them out on my blog.

Thanks for reading 🎉

The GitHub Development Workflow

Timothy Robards — Sun, 09 Oct 2022 14:33:26 +0000

GitHub is a code hosting platform for version control and collaboration. It’s designed around Git, a system for tracking changes in software code. It lets you and others work together on projects from anywhere. In this article, we’ll take a look at the key concepts of the GitHub development workflow. Including working with repositories, branches, forks, commits, pull requests, and merging. Let’s get started!

What is version control?

Version control is a system that helps developers track and manage changes to a software projects' code. As projects grow, the need for version control becomes vital — especially in a collaborative project. We can work safely by using what's known as branching and merging.

Branching allows us to duplicate our source code (aka ‘the repository’), so we can safely make changes without affecting the entire project. Once the changes have been reviewed and approval is agreed upon, we merge our branch into the master to update our official code. If any bugs are identified— we have the option to revert back to our original code, as our changes have been tracked.

What is Git?

Git and Github are not synonymous! Git is a specific open-source version control system created by Linus Torvalds in 2005. It’s the program that actually tracks your changes, and ensures the entire code-base is available on each developer's computer. GitHub however, is simply hosting your repositories (as well as providing some additional functionality).

The Fundamentals

Let’s get started! If you haven’t signed up for a GitHub account, go ahead and sign up here.

Creating a Repository

A GitHub repository (or “repo”) can be thought of as the root folder for your project. It contains all your project files and gives you the ability to access each file's revision history. If you’re working in a team you can give other people access to your repository for project collaboration.

Let's create our first repository! Make sure you're signed in to GitHub, then:

In the upper-right corner, click the settings + icon & then New repository
Give your repository a name
Add a description if you like
Choose between creating a public or private repository (either is fine)
Select Initialize this repository with a README (eg. “My first repo!”)
Click Create repository!
Add files to your repository ~

~ We’re only testing so it really doesn't matter what you add. Find an HTML file for example, and add it to your repository via the Upload files button.

Creating an Issue

Issues are how we track the tasks, enhancements, and bugs in our projects. They’re meant to be shared amongst your team to facilitate discussion for review as well as for managing task delegation. If you open an issue on a project managed by someone else, it’ll stay open until either you close it (for example if you figure out the problem) or if the repo owner closes it. When you create an issue, be sure to give a clear explanation of the task at hand. Let’s create an issue in our repository:

In your repository, select the Issues tab
Click the New Issue button
Give your issue the title ‘Setup GitHub pages’
Give a clear description e.g. ‘Need to setup GitHub Pages in this repository’
Click Submit new issue

Assigning an Issue

We need to assign issues so our team members know who’s job it is to handle the task!

On the right side of the screen, under the “Assignees” section, click the settings icon and select yourself

Let’s resolve our first issue! We want to setup GitHub pages. You can read about GitHub Pages here. But for now, our focus on completing the task:

Click on the Settings tab in your repository
Scroll down to the “GitHub Pages” section
From the “Source” drop-down, select master branch
Click Save

Closing an Issue

Now you’ve completed the task — you can go ahead and close it! You can delete an issue on GitHub, however closing it tells your team members that the task has been completed. To close:

Open up your completed issue and click Close issue

The GitHub Flow

Now that we know how to work with issues, it’s time to look at the GitHub Flow. Simply put its a workflow where we can experiment with new ideas safely, without the risk of compromising our project. This is primarily achieved through the use of branching.

By default, our project lives on the master branch — any changes to the master will update directly to our project (This can be dangerous is you haven’t properly reviewed your changes!).

When we want to experiment with a new feature, or even fix an issue, we create a new branch on the project. The branch will initially be a duplicate of your master, now when you make changes —they’ll reflect only on the branch.

While working on changes, you’ll commit the changes to your branch. When you’re satisfied that the changes are complete, its time to open a pull request. From here your team will discuss and further refine the project changes. Once the changes have been approved, the branch will be merged onto the master branch. Let’s go through an example of this process now!

Creating a Branch

Open your repository and click the Code tab
Click Branch: master in the drop-down
In the field, enter a name for your branch (e.g. ‘development’)
Click Create branch

Now that you’ve created a branch, you can modify your project without changing the deployed master branch.

A note on forks — A fork is different from a branch in that it allows you to clone another repo in your own account. It essentially allows you to start a new project based on a previous project.

Committing a file

Now we can safely work within our branch, let’s create a file and make our first commit.

Make an edit (anything! just add a simple comment to your code) to one of the files you had added to the repository earlier
Give the commit a name and description
Make sure your newly created (development) branch is selected
Click Commit changes

You’ve made your first commit! The next step is to share the changes with your team via a pull request.

Opening a Pull Request

A pull request is where we share our proposed project changes with our team — with the intent of discussing & revising them before applying the changes to the master branch.

Open the Pull requests tab and click New pull request
In the base: drop-down menu, ensure the master branch is selected
In the compare: drop-down menu, select the development branch you created earlier
Click Create pull request
Now enter a title for your pull request, for example, “Add my changes”
Add an accurate description of the changes you made
Click Create pull request!

Your team members now have the ability to discuss and review your proposed changes. Once everyone is happy and the changes are approved— it’s time to merge to master.

Note: If you forked a repo and made changes, you can create a pull request to merge your changes from there as well.

Merging a Pull Request

Inside of your Pull request, click Merge pull request
Click Confirm merge
Once your branch has been merged, you don’t need it anymore. You can click Delete branch!

Summing up

And that’s it! You’ve learned how to work collaboratively on projects using GitHub. GitHub is an amazing tool to take advantage of! You can now create repositories and issues, create branches, fork projects and make commits, submit pull requests for review, and merge to the master branch. Not bad!

Get started today with my Complete Guide to Freelancing.

Available now at 👉 https://easeout.gumroad.com/l/freelance

A little about me..

Hey, I'm Tim! 👋 I'm a freelance business owner, web developer & author.

I teach both new and experienced freelancers how to build a sustainable and successful freelancing business. If you'd like to read more of my articles, check them out on my blog.

Thanks for reading 🎉

An Introduction to PUG

Timothy Robards — Thu, 29 Sep 2022 02:10:48 +0000

Pug (formerly known as Jade) is a preprocessor which simplifies the task of writing HTML. It also adds a ton of functionality, such as objects, conditionals, loops, mixins and templates. The syntax is arguably a lot cleaner to read and it can be a real time-saver when working with a lot of HTML (especially frameworks such as Bootstrap, Foundation, etc).

Lets take a peek at some Pug syntax & compare it to regular HTML..

// index.pug
doctype html  
html(lang='en')  
 head
   title Pug demo
 body
   h1 Welcome to Pug Life
   div.container
     p I'm a p that needs to be contained!

Note the use of indentation to nest our HTML as we require. And the lack of closing tags!

And here’s the standard HTML output:

<!-- index.html -->

<!DOCTYPE html>  
<html lang="en">  
 <head>
   <title>Pug demo</title>
 </head>
 <body>
   <h1>Welcome to Pug Life</h1>
   <div class="container">
     <p>I'm a p that needs to be contained!</p>
   </div>
 </body>
</html>

By comparison our pug code is much more concise. Additionally, the compiler will throw errors if we have any mistakes in our code – which makes for convenient error prevention.

So let’s get started!

How to Install Pug

Note: You’ll need NodeJS installed! Go ahead and install if you haven’t already.

To install pug run the following command from your terminal:

npm install -g pug-cli

We install globally with -g as we’ll need access to Pug commands from terminal.

Now in our root directory, create a file called index.pug.

Let's test this out! Add the following text to our file as follows:

// file: index.pug

doctype html

And lets compile it to HTML with the following command:

pug index.pug

We should now see our index.html generated in the root directory. It will of course convert to HTML as follows:

// file: index.html

<!DOCTYPE html>

When working on a larger project, you might want to use a more specific compile command, such as:

pug -w ./ -o ./html -P

The -w flag will watch our pug file for changes and re-compile automatically each time we save. ./ will watch everything in the current directory. -o ./html will set the output folder to html. -P will make our HTML source code pretty printed, with indentation, line-breaks, etc.

Note: Once you’ve executed this command, keep your terminal running to continue the auto-compile!

The Basics

Let's get started on a basic HTML structure. Type up the following in your index.pug.

doctype html
html
  head
  body
    h1#title Lets get pugging!
    p I'm a paragraph
    p.
      I'm a multi-line paragraph!
      And this is the second line.
    p.para. 
      This paragraph has class!
    .firstDiv A div with a class.
    #secondDiv A div with an id.

Note the use of indentation! Make sure you tab your child elements.

When you save and open up index.html. You’ll see the complete HTML generated like so..

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <h1 id="title">Lets get pugging!</h1>
    <p>I'm a paragraph</p>
    <p>
      I'm a multi-line paragraph!
      And this is the second line.
    </p>
    <p class="para">This paragraph has class!</p>
    <div class="firstDiv">A div with a class.</div>       
    <div id="secondDiv">A div with an id.</div>
  </body>
</html>

Attributes

Let's take a look some syntax for setting attributes in pug.

doctype html
html
  head
    //- Invisible comment.
    //Visible comment.    
    script(src="script.js")
    link(rel='stylesheet', href='css/main.css')
  body
    a(href="https://google.com") google.com
    img(src="https://google.com/logo.png" alt="google logo")
    input(type="password" name ="inputpass")
    input(type='checkbox' checked)
    input(type='checkbox' checked=true)
    input(type='checkbox' checked=false)
    //Inline styles
    a(href="your-link", style={color: "Red", "font-size": "24px"}) I'm a link!

Our HTML will generate as follows:

<!DOCTYPE html>
<html>
  <head>
    <!--Visible comment.-->
    <script src="script.js"></script>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <a href="https://google.com">google.com</a>
    <img src="https://google.com/logo.png" alt="google logo">

    <input type="password" name="inputpass">
    <input type="checkbox" checked>
    <input type="checkbox" checked>
    <input type="checkbox">
    <!--Inline styles-->
    <a href="your-link" style="color:Red;font-size:24px;">I'm a  link!</a>
  </body>
</html>

Adding JavaScript

One of the most powerful features of Pug, is the ability to easily make our HTML dynamic, using inline JavaScript. Lets take a look at a few examples:

Variables

- let name = 'Timothy'
- let city = 'Montreal'
- let transport = { type: 'Bike' }
- let food = ['Tacos', 'Pizza', 'Cheetos']

// Incrementation for numeric variables
age++

// Assigning variables to elements
p= name
span.age= age

Interpolation

- let size ="medium"
  img(src=`https://google.com/logo-${size}.png` alt="logo")
---------------------

// output:
<img src="https://google.com/logo-medium.png" alt="logo">

Loops

ul
  each city in ['Sydney', 'Montreal', 'New York']
    li= city
ul
  each city, index in ['Sydney', 'Montreal', 'New York']
    li= 'Number ' + index + ': ' + city
-------------------------------------------------
// output:
<ul>
  <li>Sydney</li>
  <li>Montreal</li>
  <li>New York</li>
</ul>
<ul>
  <li>Number 0: Sydney</li>
  <li>Number 1: Montreal</li>
  <li>Number 2: New York</li>
</ul>

Conditionals

if user
  h2 Welcome back #{user}!
else if admin
  h2 Hey #{admin}!
else
  h2 Sign up!

Mixins

// Declaration
mixin list
  ul
    li Sydney
    li Montreal
    li New York
// Use
+list
+list
------------------
// output:
<ul>
  <li>Sydney</li>
  <li>Montreal</li>
  <li>New York</li>
</ul>
<ul>
  <li>Sydney</li>
  <li>Montreal</li>
  <li>New York</li>
</ul>

Mixins compile as functions, and therefore can take arguments!

mixin city(name)
  li.city= name
ul
  +city('Sydney')
  +city('Montreal')
  +city('New York')
--------------------
// output:
<ul>
  <li class="city">Sydney</li> 
  <li class="city">Montreal</li>
  <li class="city">New York</li>
</ul>

The features we’ve looked at here are really just the tip of the iceberg! For the full specs check out PugJS.org — Getting Started.

Structuring your Pug files

A well organized template system is a crucial part of any development process. What follows is a look at how we can organize our projects using both includes and extends.

Includes

Includes allow you to insert the contents of one Pug file into another. All you need to do is add an include directive into your main pug file, as follows:

doctype html
html
  include additions.pug
  body
    h1 My Heading
    p Here goes the text.

Lets now create the additions.pug file and add the following content:

head
  title My Site
  script(src='/js/jquery.js')
  script(src='/js/app.js')

Our files will compile merged into index.html like so:

<!DOCTYPE html>
<html>
  <head>
  <title>My Site</title>
  <script src="/js/jquery.js"></script>
  <script src="/js/app.js"></script>
  </head>
  <body>
    <h1>My Heading</h1>
    <p>Here goes the text.</p>
  </body>
</html>

Extends

The extends keyword allows a template to extend a layout or parent template. It can then override certain pre-defined blocks of content, using the block command.

We want to keep our projects as organized as possible! A logical template system will define a base template, and then all the other templates extend from it. For example:

// file: index.pug

extends layout.pug

block content
  h1 hello world!

Here we’ve set our index.pug file as the base template. With a call to the layout.pug file via extends.

Note the use of the block command. This is how we direct part of a template to be extended.

// file: layout.pug

doctype html
html(lang="en")
  head
    meta(charset='utf-8')
  body
    block content
    h2 hello again world!

Here is the content of our layout.pug, we use the block command with the same name (you can call it whatever you like!), so the pug engine knows where to put the code block.

This code will compile as follows:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>hello world!</h1>
    <h2>hello again world!</h2>
  </body>
</html>

Of course you can use as many blocks as you like, and create as many pug files as you like. The point is to build a logical structure into our projects & keep our code clean and organized!

Wrapping up

And that’s it! We’ve setup a Pug development environment and covered the fundamentals. We’ve looked at many of the features provided by adding JavaScript such as variables, interpolation, loops, conditionals and mixins. We’ve also looked at how to structure our Pug files using templating with the include and extend directives.

Get started today with my Complete Guide to Freelancing.

Available now at 👉 https://easeout.gumroad.com/l/freelance

A little about me..

Hey, I'm Tim! 👋 I'm a freelance business owner, web developer & author.

I teach both new and experienced freelancers how to build a sustainable and successful freelancing business. If you'd like to read more of my articles, check them out on my blog.

Thanks for reading 🎉

50 Best Eleventy Starter Themes

Timothy Robards — Wed, 03 Feb 2021 16:46:53 +0000

Eleventy (or 11ty) is a Static Site Generator that aims to be a simpler alternative to Jekyl. It has been steadily gaining popularity in recent times, with 8.4K GitHub stars and 238 GitHub forks and growing!

It's completely open-source, written in JavaScript and unlike other SSG's (Gatsby, NuxtJS) it doesn't come bundled with a front-end library. Instead, it takes a series of templates, markdown files, and data and renders them as HTML. Eleventy works with HTML, Markdown, Liquid, Nunjucks, Handlebars, Mustache, EJS, Haml, Pug, and JavaScript Template Literals. Find out more at the official site!

So without further ado, here are 50 Eleventy starter themes to kick off 2021!

1. Eleventyone

A scaffold for a quick start building with the Eleventy SSG.