ania kubow - freeCodeCamp.org

Best Webstorm Plugins for Effective Coding

ania kubow — Mon, 28 Feb 2022 15:01:45 +0000

As a software developer, I use a variety of plugins that make my life easier when it comes to avoiding mistakes and coding more efficiently.

Whilst these time and effort saving techniques may seem negligible as a one off, when accumulated together they can really make a difference.

In this article, I am going to share with you my favourite WebStorm plugins for JavaScript developers and my reasons for why.

Rainbow Brackets

Because who hasn’t spent time trying to figure out which brackets belong to each other? When working on JavaScript projects I often nest brackets within each other, leading to something that looks like this:

No Rainbow Brackets

It becomes very hard to track the scope of certain functions, especially when you want to delete some.

With rainbow brackets, you can see what is going on in your code visually, when it comes to scoping functions.

Rainbow brackets in fact doesn’t only work with brackets, but also with parenthesis, which makes things like mapping in React projects easy to pick out.

Rainbow Brackets!

Read more about Rainbow Brackets here.

Tabnine

Tabine has been my favourite plugin for a while now. I enjoy using it for its accurate text completion that has quite literally predicted whole lines of code for me that I can choose to accept with a simple key press.

Tabnine predicting code snippets based on my coding habits

It does this through its AI-driven predictive coding algorithms. When enabled, Tabnine actually learns from your coding habits and the projects you work on, so it can accurately predict what you are going to type next.

I currently use Tabnine with my Webstorm IDE for JavaScript projects. But it is also available in over 30 languages and for 21 IDEs and code editors.

CSV

This is a cool one if you work with CSV files.

The CSV Plugin treated CSV, or ‘comma separated values’, as its own language in JetBrains IDEs. This means it has its own syntax definition, structured language elements and associated file types, such as .csv, .tsv and .psv.

Having this plugin allows us to treat it like we do with any other code in the editor, with mistakes being highlighted for us. Here is a full list of the support you will get:

CSV/TSV/PSV file detection
flexible Table Editor
customisable text editor
customisable column colouring
customisable line comment
syntax validation
syntax highlighting (customisable)
content formatting (customisable)
quick fix inspections
intentions (Alt+Enter), for example Quote/Unquote (all), Shift Column Left/Right
structure view (header-entry layout)
support for ',', ';', ':', '|' and '↹' as pre-defined value separator
support for freely defined value separators
support for line comments (# per default, customisable)
highlight of active column values
tab (↹) separator highlighting

How a .csv file looks when opened in Webstorm, with the CSV plugin.

String Manipulation

The String Manipulation plugin allows you to instantly format strings with a variety of inbuilt options.

So for example, if you want to change a bunch of highlighted strings to camelCase, you can do it instantly. But this is just the tip of the iceberg. You can sort strings, filter them, or even sort them via case sensitivity!

This tool is a huge time saver when it comes to tidying up code.

Before String Manipulation

After String Manipulation! So neat and tidy in one click!

The list of capabilities is just too long, so instead of pasting them here, you can check them out over on the website here.

Prettier

I have been using Prettier for the longest out of all the plugins mentioned, and sometimes forget about it as its so built into my everyday activities as a developer.

Prettier takes your code as you have written it, and provides a standardisation and consistency. Basically if everyone used Prettier then all our code would follow the exact same guidelines – yay for consistency!

It does this by not offering loads and loads of options to the user like ESLint. If you really want to, then you can change it, but that would really be defeating its purpose.

Before Prettier

Here you can see Prettier at work. It has taken some code, and made all of the lines of code under 60 characters in length. If a line goes over that, it gets put on a new separate line. It also adds semi-colons if you want, and makes sure that all quotation marks are consistent.

After Prettier

There, much ‘Prettier’! (geddit?)

Prettier is actually already bundled with WebStorm, so you don't even need to install it to use it.

Code with Me

This is not so much a plugin as a regular feature of WebStorm now that it has been packaged up with version 2021.1, but worth a mention none the less.

Now with remote working being a regular thing in a lot of our lives, our need to be able to share code efficiently is now more important than ever.

I know this as I have spent a lot of time "screen-shot"-ting my screen and sending it over Slack when discussing with colleague developers. If only there was a tool where someone could literally see my screen AND edit my code...

Me using Code With Me

Well, that is what Code With Me does, with the added bonus of video calls.

You can choose who can edit your code that you are sharing. And if you are presenting to a big group call, and don't want anyone touching it, you can switch to a ‘read-only’ mode too.

Me showing the chat functionality of Code With Me

This feature is definitely a life saver when it comes to remote working. If you want to have more of a read on this feature, make sure to check out the link here.

Thanks for reading! I hope these plugins help you become more productive in your coding day-to-day.

Code with Ania Kubów

Hello everyone. This channel is run by Ania Kubow. In this channel, I will be teaching you JavaScript,React, HTML, CSS, React-native, Node.js and so much more! A little bit about me:My background is in the financial markets, where I worked as a derivates broker our of University. After starting m…

YouTube

Learn About NoSQL Databases in This 3-hour Course

ania kubow — Mon, 29 Nov 2021 15:47:00 +0000

NoSQL Databases can sometimes seem confusing and overwhelming, partly because of their flexibility.

This is why we have put together a 3-hour video course to help you understand exactly what a NoSQL Database is, as well as the different types available to you.

By the end of this course, you will have built 4 databases based on the 4 main types, and you'll have practised your learnings by building out projects.

But first, let's start with the basics.

What is NoSQL?

So the first thing you need to know is that NoSQL is an approach to database management.

It’s considered to be super flexible as it allows for a variety of data models, such as 'key-value', 'document', 'wide-column or tabular' and 'graph' formats.

These are the 4 we will be looking at closely in the video course, as well as the new emerging trend of Multi Model Databases.

With each deep-dive on the 4 NoSQL database types, we will be approaching each learning as an explanation, example, and exercise – so the 3 E’s – in order to fully grasp the topic we are discussing.

How do Databases Work?

Databases have multiple layers. The first layer is an interface, or in other words a visual platform where you can visit and interact with data. This is where you'll find the format, the language, and the transport.

In this video course, the interface we are going to use is called Datastax Astra Database management system. This is where we will be creating all 4 of our database types for the example and exercise parts.

DataStax Astra DB is an autoscaling database-as-a-service built on Apache Cassandra, designed to simplify cloud-native application development.

Because it is built on Apache Cassandra, you will see us using the Cassandra Query Language, or CQL, a few times in this course. CQL offers a model close to SQL in the sense that data is put in tables containing rows of columns. These languages are how we interact with the data in our database.

The next layer of a database is the execution layer. This is where we parse the incoming queries, coming from our interface. It is also used as an analyzer and a dispatcher.

And finally we have the storage layer, where the indexing of data happens.

Using Datastax Astra will allow us to create all 4 types of database types for this tutorial, so I won’t have to sign up to separate database management systems for each section. But you don't have to use it. There are literally dozens and dozens to choose from, so feel free to take your pick.

Let's get to it!

Now that you know what NoSQL databases types we will be learning about, as well as how Databases work, let's get to learning more about each one in detail.

Here are the topics this course will cover:

What is NoSQL?
Why use NoSQL?
SQL vs NoSQL
How to set up our Database
Tabular Type
Document Type
Key-value Type
Graph Type
Multi-Model Type explained
Project – How to use the Document API
Project – How to use the GraphQL API
Where to go next

Watch the course below or on the freeCodeCamp.org YouTube channel (3-hour watch).

Follow me on Youtube for more videos on Software Development:

Code with Ania Kubów

YouTube

How to Add Websocket Real Time Communication to Your SaaS App

ania kubow — Wed, 24 Nov 2021 23:50:04 +0000

In this conference talk made for Tech Fest 2021, Steven Lemmo talks to you about building SaaS Applications with WebSockets.

Here is a full breakdown of what he will cover in this 40 minute talk:

The reason for this talk
Why Websockets?
Websockets minimal API example
Rest Web Services
Multiple Listeners
Full Duplex
Websockets time-line
TypeScript
Vendor Tools
Auction IDL Definition

This article was written by Ania Kubow in support of the conference talk made by Steven Lemmo.

Code with Ania Kubów

YouTube

Learn Ember – Ember.js Tips for Beginners Tutorial

ania kubow — Wed, 24 Nov 2021 15:02:26 +0000

In this talk, Designer turned Software Developer Lenora Porter talks about her journey learning Ember.js. She also shares her tips for beginners who are about to start their journey.

Here are her top 4 take-aways:

How to Learn Ember.js

Have the Mindset of a Beginner

This is the foundational work. When starting to learn just about anything, it is important to cultivate your mind and prepare for the journey.

Pre-curriculum Prep Work

Do some research on yourself. How do you learn? What motivates you? Once you have these questions answered, you are ready to move on.

Create your own Curriculum

Once you have your mind prepared for the task at hand, make a list of to-do's that will help you keep on course. These can be daily tasks, or weekly tasks, depending on your schedule. Use whatever tools you are comfortable with to break-down your learning goals.

Try -> Fail -> Learn -> Repeat

This is the mantra for all new beginners, and it's not easy! To make this part easier, Leonora advises finding a mentor or coach, or newbies in the same position as you to make your journey easier.

And don't forget to set aside time to give your brain a rest!

Ember.js resources

If you want to dive into each of these in more detail, and get some Ember.js-specific advise on creating your own curriculum, you can watch Lenora's talk below.

This article was written by Ania Kubow in support of the conference talk made by Lenora Porter.

Code with Ania Kubów

YouTube

What is GitOps? Principles, Best Practices, and Kubernetes Workflow

ania kubow — Tue, 23 Nov 2021 22:50:29 +0000

In this talk, CTO Cornelia Davis will teach you what GitOps is and what its four main principles are.

What is GitOps?

The first thing you need to know is that GitOps is a set of modern best practises for deploying and managing cloud native infrastructure and applications.

And it can an be a hard thing to get your head around if you have never worked with cluster management or application delivery before. But thankfully Cornelia does a great job explaining it in this 30 minute presentation.

Give it a watch, and then you can find the recap below.

So now that we have covered the basics of what GitOps are, here is a recap of its 4 main principles. Hopefully you can use them to start managing your own cluster with GitOps workflows.

Principles of GitOps

Describe Declaratively

By 'Declarative', all we mean is that we are writing our configuration as a set of facts directly in our source code on Git. This is now our single 'source of truth'.

For example I can declare my environments, such as a 'test environment', or a 'staging environment' or 'production' and so on, along with the application version that resides in that environment.

Make Sure State is Versioned

With our declarations now stored in a version controlled system and acting as our 'source of truth', we now have a single place from where everything is derived. We can spin up previous versions of the app easily, or perform rollbacks if we need.

Automate Change Approvals

We also need to allow any changes to our declared states to be automatically applied to our system. This is worth mentioning, because as we are now working in segregated environments, we no longer need cluster credentials to make changes in our system.

Alert on Differences

So now that we have the state of our system declared and versioned, we can use agents to check if everything is working as it should. This is considered a 'Feedback and Control Loop'. If something 'looks' different and not right, we will get alerted on this.

For a more in-depth look into these 4 principles, you can watch the Talk by Cornelia Davis above.

This article was written by Ania Kubow in support of the conference talk made by Cornelia Davis.

Code with Ania Kubów

YouTube

Let's Talk Design – How to Speak to a Designer as a Developer

ania kubow — Mon, 22 Nov 2021 17:07:06 +0000

In this conference talk, Magdalena Ostoja-Chyżyńska will not talk about the differences between developers and designers.

Instead of focusing on the differences between the roles and how that might cause friction, she will approach the subject with a problem-solving attitude, and expand on how to make the relationship work.

And she should know.

Magdalena Ostoja-Chyżyńska is a former frontend developer with 10 years experience in design. During her career she has worked with over 70 developers and enjoyed every second of it.

If you are struggling to get on the same page as a Designer friend, here are some tips she will cover:

How to Set-up Your Desks

The desk set up is pretty powerful. Where the Designer sits in relationship to you is imperative for good and strong communication.

Magdalena suggests sitting in a triangulated format, with the Product Owner being the third piece of the puzzle. This way, any dialogue that is shared can be picked up by all parties at all times.

Another suggestion is to form an L shape, where the Analyst is an information broker between the Designer and Developer, keeping both separate from each other and solving any issues that may arise. This formation is very popular in the banking or finance industries.

'The Bridge' is the third set-up. This set-up works for smaller scale startups where the dev team is not so large. It essentially has the Product Owner as the information broker, whilst perhaps taking on some of the traditional roles an Analyst may have. Again, in this situation, the Developer and Designer have limited contact with each other.

Each set-up is powerful, but very unique to your team. Make sure to watch the video to see which is right for you.

How to Manage Access Between Designers and Developers

Even if it's in a limited capacity, Magdalena recommends encouraging developers and designers to have a direct form of access to each other. If you hear any of the following, this is a major red flag.

"You don't need to speak to the designers/developers, you can speak to me."

"Just focus on your code."

You should always encourage open communication on any team, as gatekeeping can cause toxic workplaces for all involved. If you are in a situation where this is happening, Magdalena suggests taking on the responsibility to fix this.

How to Handle Developer-Designer Meetings

An exemplary developer-designer meeting is a presentation consisting of showing visuals and storytelling.

Designers should not only show what they have designed, but also explain why. By explaining why, the Developer can understand the decisions the designer made in the design process, and buy into the final idea with the same amount of conviction.

Respect Between Developers and Designers

Both designer and developer need to respect each other's work. This means that the designer does the design work, and the developer does the development work, not the other way around. This might sound obvious, but the opposite happens more often than you think!

To learn more and dive into each section in more detail, make sure to watch the talk from Magdalena right here:

This article was written by Ania Kubow in support of the conference talk made by Magdalena Ostoja-Chyżyńska.

Code with Ania Kubów

YouTube

A Business Case for Open Source – Why You Should Contribute to the Open Source Community

ania kubow — Tue, 14 Sep 2021 18:59:46 +0000

As an employed software developer today, there's a 96% chance that you're building company software using some sort of open-source technology.

You might be using VSCode, a free open-source text editor primarily maintained by Microsoft, or React, a free and open-source front-end JavaScript library, among many other tools.

Companies today love using free open source tools and technologies, but very few actually contribute back to the open-source community.

And I guess if you take out any emotions such as guilt or feeling indebted and boil it down to the bottom line – why should they? What is in it for them?

In this article, we'll look at what open-source is and why you or your company should consider making contributions.

How Does Open Source Work?

Open source refers to software where the code is shared publicly and that can be viewed, edited, or added to by anyone.

So for example, if you wanted to, you could view the code to see how VSCode is built right here. Then you could submit pull requests to suggest code changes or feature adds which would get reviewed by someone working on the codebase.

You could also create your own open-source project where you are sharing a tool that might help thousands more developers like you. And your tool might be improved on and mutated along the way by other open source contributors. This will help it grow into a life changing development tool that is freely available to everyone.

But when it comes down to it, how many companies would be happy for you to spend company dollars (and time) contributing to a tool? And not just any tool, one that could potentially help a competitor?

Well, you might be pleased to know that there are genuine business-driven reasons for a company to contribute to open-source, and we'll discuss just a few here.

Contributing to Open Source Helps Retain Top Talent

According to UnlockOpen, Facebook claims that 75% of their new engineering recruits mention their open source program as a key reason for joining the company.

And in a similar vein, by investing in Webpack and becoming active and public contributors to it, Trivago.com caught the attention of JavaScript developers, which helped it develop a reputation as an exciting company to work for.

This meant that instead of spending money on recruiters to find good developers, these companies invested that money in open-source. They were both doing something good and letting the good developers come to them.

Contributing to Open Source Attracts Developers to your Products or Services

By creating free open-source products, companies can often attract developers and get those developers to start using them. Then they can offer paid options for the upgraded or scaled versions.

For example, let’s take VSCode again, the free open-source text editor. It also has a paid IDE version called Microsoft Visual Studio for professional use.

As a developer, if you have used VSCode most of your life and know the tool and its UI/UX well, you might be more likely to upgrade to Visual Studio as a result. Not only because the experience is similar in terms of product, but you might feel a certain loyalty to the product after using its free version.

This strategy applies to many other open-source tools as well.

Contributing to Open Source Gives You a Net Competitive Advantage

When working at a particular company, a developer is often working on one codebase. One that they are very familiar with, or have lead in building themselves.

With this comes a sense of comfort but also complacency, as there are no new work styles thrown your way.

By contributing to external open-source projects, developers are building up their problem solving skills by being exposed to new issues and coding styles.

They're also practicing their communication skills, whether it's just by communicating with individuals from other companies, or individuals from different countries with different languages and cultures.

Want to learn more about the advantages of contributing to Open Source?

In this video, Tobie Langel goes into the advantages in more detail, and he shares some statistics and research that you should use to build your own case for contributing to open-source.

This article was written by Ania Kubow on behalf of Tobie Langel, and in support of his video for KubeCon.

Code with Ania Kubów

YouTube

How to Build Super Mario Bros, Zelda, and Space Invaders with Kaboom.js

ania kubow — Wed, 26 May 2021 14:12:27 +0000

In this video course I show you how to build three popular games using the latest game development library for JavaScript called Kaboom.js.

This course is exciting for two reasons:

First of all, I am going to be introducing a new technology designed especially for game development in JavaScript.

And second, I am going to be using this technology to walk you through how to create some classic games like Super Mario Bros, Zelda, and Space Invaders, step by step.

What is Kaboom.js?

So before we get to all that, let’s start with the first reason that this course is exciting – the new technology.

Kaboom.js is a JavaScript library that helps you make games fast. We are going to be using this library to simplify creating scenes, adding layers, creating sprites, dealing with actions and collisions, adding key events, debugging and much more.

This simplicity allows you to get into the world of game development at a low barrier of entry. It also gets you coding without being disheartened after trying to wade through pages and pages of documentation – which is common in the game development process we see today.

What We Will Be Covering in this Course

In this course I will show you how to code a generic game using the Kaboom.js methods in a pre-configured environment. We will then move onto creating a game of Space Invaders, followed by Super Mario Bros, in the same pre-configured environment.

After we finish both of these games, we will be building Zelda completely from scratch. We will end with a section about where you can share your games with one another, as well as how to use Kaboom.js in VS Code.

Now that we have covered that, let's get to setting up an environment and getting through some Kaboom.js basics so you can then dive into the full video course! We will be covering these in the video too, so if you get stuck, please refer to the video course for help.

How to Use the Replit Kaboom.js Environment

To get coding straight away, we will be using the Kaboom.js environment on Replit. This environment will save us from having to write the Kaboom lifecycle methods, such as initialising Kaboom or adding scenes.

It will also allow us to create sprites directly in the environment itself.

If you would like to know how to set up Kaboom.js from scratch in your code editor of choice, there is a short section dedicated to this at the end of the course.

For now, please head over to Replit and create your first Kaboom.js environment now by clicking here.

How to Use Kaboom.js – The Basics

For this course, we will be using Kaboom.js version 0.5.0.

In this section I am going to go over the basic concepts and methods of Kaboom.js. I am going to show you how to add sprites, move our sprites, deal with collisions, as well as show you all the other things we can do with it.

Once we have the basics, we will be using this knowledge to create our three games. And we'll learn a bunch more along the way.

Now, I don't advise you to skip sections of this course. I laid out the chapters so that you'll build on the knowledge you gain throughout each section.

The only prerequisite you need to have is a basic understanding of the fundamentals of JavaScript before starting this course. But, if you are feeling adventurous, please do have a go at following along anyway.

Like I said, this library aims to make JavaScript coding a whole lot easier by providing a layer of ‘shortcuts’, if you will, to create games.

How to Add Layers

Once you have initialised a game in Kaboom, you have the option to add layers. The layers will prevent your sprites colliding with elements you put on the background layer or UI layer, for example.

In the example below I have defined three layers, with the obj layer, being the default.

layers([
    "bg",
    "obj",
    "ui",
], "obj")

How to Add Sprites

Next, let's add a sprite. To do this, simply create a sprite directly in the Replit Kaboom.js environment by clicking the dropdown button under the word 'Sprite' in the left hand tool bar. Use the visual below for guidance, or refer to the video course.

Once you've created a sprite, use the add Kaboom method, followed by the sprite Kaboom method, and pass through the name of what you called your sprite as a string.

In this case, I have named my sprite 'player'. Make sure to assign it to a const so you can re-use it later.

const player = add([
    sprite("player"),
])

How to Move a Sprite

Next let's move the sprite. By using the Kaboom method of keyDown and passing through a string for the key pressed, as well as a function, I can call that function each time I press the specified key. I would then use the move Kaboom method on the player to move it by passing through an X and a Y axis.

In my example below, the X axis is 100 and the Y is 0. This means that our player will move to the right on our game board each time I press down on the right arrow key.

keyDown('right', () => {
    player.move(100,0)
})

How to Add Text

We can also choose to add text to our game. For example, I can choose to add some text that displays the score.

At the moment, it is hardcoded to the string 0. By using the Kaboom method layer, I can make sure this text is on the ui layer we created earlier. That way it will not interfere with my sprites.

const score = add([
    text("0"),
    layer("ui"),
])

How to Deal with Collisions

There are many ways to deal with collisions using Kaboom.js. One way is to grab the player and use the Kaboom method collides.

In the example below, if my player collides with any sprite with the tag of 'dangerous', it will be destroyed thanks to the destroy Kaboom method.

player.collides('dangerous', () => {
    destroy(player)
})

Let's go!

Okay, now that we have covered the basics, let's get started with the course!

This course was made possible through a grant from Replit.

Embedded content

A Free 12-Hour Coding Bootcamp to Help You Decide Whether Coding is For You

ania kubow — Sun, 17 Jan 2021 19:14:44 +0000

I created this 12 hour course with the global pandemic job situation in mind. I thought about all the people trying to decide if Software Development was the right career path for them, without the resources to do so.

A few years back, I was at a cross-roads. I had a comfortable yet dissatisfying job in Finance, and a never ending battle in my head, daring myself to take the plunge to become a Software Developer.

It was a job I had always been fascinated by. I loved the idea of creating apps and websites out of thin air and letting my creativity flow. But I had no idea about the profession itself. Was it something for me? Or would I regret throwing everything away for something I had no real idea about?

After months and months (that turned into years) of second-guessing myself, I finally decided to go for it and join a Bootcamp. It was there, after creating my first JavaScript project, that I realised I was hooked. And to be honest, I was relieved that I had made the right decision!

To save you from hesitating and going back and forth as much as I did, I created this course to help more people hit that moment of realisation faster, and feel less anxiety early on.

In light of my own experience, as well as the pandemic and current global job loss situation, I want to help people make an informed decision as to whether software development is the right career choice for them as an individual (without having to spend a lot of money upfront first).

So without further delay, here are some things to consider.

Should I Do a Coding Bootcamp?

In today's market the most popular software developer bootcamps tend to be 12-16 weeks long and range from 12,000USD to 20,000USD.

Almost all of them have the same structure and teach HTML, CSS, and JavaScript, plus back end languages and libraries/frameworks. This will most likely include a mixture of React, Ruby on Rails, Python, Angular, and Node.js.

In the 12-16 weeks you will go through lessons and complete projects 9-5 every day, 5 days a week in a classroom environment. For me it was a class of roughly 15 students.

In addition to this you will be taught interview techniques, and softer skills that come with the territory of being a web developer.

The overall experience was good, and in my case, the Bootcamp even set up meetings with recruiters for us on a final ‘showcase day’, where we got to present our projects to potential employers.

Now, while my experience was a good one, I did get a scholarship to the program, making my fee considerably less. There were also no refunds given to those who decided that this career path was not for them.

So, if you are thinking about joining a bootcamp and have the means, I would strongly advise doing some preliminary work on HTML, CSS and JavaScript to figure out if this career path is for you. That way you'll be sure that you aren’t about to throw money down the drain.

I would suggest especially focusing on JavaScript, as the JavaScript section was when the drop out rate started to rise. We will discuss why this is further down in the article.

Self-taught Developer vs Paid Bootcamp Grad

There is a lot of discussion about which is better, being self-taught or attending a bootcamp. When I was deciding whether I should pursue a career as a Software Developer, the idea of being self-taught did not cross my mind. I assumed that to get a job in the city I would need to go through a course in order to be successful in getting job interviews.

I cannot stress enough how this is totally not the case! In fact, my colleague who got hired at the same time for the same role as I was completely self taught.

As you are reading this on freeCodeCamp.org I assume you have already found this incredible source of information that has everything you need in order to become a professional software developer.

Applying for a job and telling your potential employer that you have taught yourself how to code also comes with a lot of positives. It shows you are determined and self-motivated, skills that are valued highly in the profession.

This means that even if you missed something that might have been taught at a professional bootcamp, it's ok. Your skill-set could potentially outweigh that knowledge gap, as the employer will be confident you'll be able to make up for it in time.

Ok, But How Do I Figure Out if Software Development Is for Me?

To decide if software development is for you, I would suggest getting familiar with the following three languages. Here is a breakdown of each, to give you a basic understanding.

HTML

Hypertext Markup Language, or HTML for short, is the standard mark up language for documents designed to be displayed on a web browser.

In computer text processing, a markup language is a way of annotating a document that is syntactically distinguishable from the text. This means that when the document is processed for display, the markup language is not shown, and is only used to format the text.

Let's look at an example. Here we have a bold tag. The bold tag is an HTML element. It makes the text in between the two tags appear bold when viewed on the browser.

This is what it looks like in HTML:

<b>Hi!b>

And here's what it looks like in the browser:

Styling in CSS Hi

We can also use markup to tell our browser we want to make text italic, make it red, and so on.

Based on this concept, HTML elements are considered to be the building blocks of HTML pages. Aside from text, we can also construct images and other objects too.

HTML is considered to be a relatively simple language, which is great!

It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

CSS

Cascading Style Sheets, or CSS for short, is a style sheet language used for describing the presentation of a document written in HTML.

CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. In simple terms, we use it to style up the elements we created with our HTML.

For example take a look at this div below. An HTML Content Division element, or div for short, is a generic container. It has no effect on the content or layout until styled in some way using CSS .

This means that until we give it a height property , width property, and a background-color property, each with a value, we will not be able to see it in our browser.

div {
  width: 100px;
  height: 50px;
  background-color: blue;
}

This is what it looks like in the browser:

Styling in CSS

CSS is an extremely powerful tool when it comes to the presentation of any project.

JavaScript

JavaScript, or often JS for short, is a scripting language that enables you to create dynamically updating content. It lets you control multimedia, animate images, and much more. It is not to be confused with Java, which is a completely different language!

We use JavaScript to essentially ‘make stuff happen’ on our static webpages. For example, I can use JavaScript to essentially make Bob look angry here, every time we click on his head.

Bob

const bob = document.querySelector('.face')

function angerBob() {
    bob.style.backgroundColor = 'red'
}
bob.addEventListener('click', angerBob)

Now JavaScript can be HARD. You have to think about it in a completely different way than HTML and CSS, and it can take a while to get used to. Once you figure it out, however, it’s like riding a bike. Something will just click and you will be on your way.

This is the point where most people find out if Software Development is indeed something they want to continue with. Some give up, or some people decide they dislike it.

Getting to the point where you feel comfortable with JavaScript takes a lot of practise and repetition, so please do not be disheartened if you don’t get something the first time round. Practise is key!

Here's a 12HR+ Free Online Coding Bootcamp

If you are reading this article, you might still be questioning whether you are ready to part with 20,000USD, or if you simply want to get started on your self taught journey. To help you out, I have created an unsponsored online Coding Bootcamp for you.

To be part of the solution, I have made this video for free and it will always be free. So please do give it a like and a Subscribe if you found it useful for you.

Follow me on Youtube for more videos on Software Development:

20 Award-Winning 13-Kilobyte JavaScript Games You Can Play in Your Browser – js13k 2020 Winners

ania kubow — Thu, 31 Dec 2020 16:56:39 +0000

In this article, I am going to show you 20 award-winning JavaScript games from the JS13kGames competition. So in other words, you're going to see 20 great examples of code from 20 insanely talented developers.

If you haven’t heard of the JS13kGames competition, you are in for a treat.

As one of the judges in last year's games, I was blown away by the standard of work that I saw. It is absolutely incredible what these developers have managed to build using JavaScript that fits in a little 13KB zip file.

But first, what are the Js13kGames, you might ask?

Js13kGames is a JavaScript coding competition open to everyone and anyone wanting to try out Game Development.

I personally like it because it limits you to using JavaScript, which creates a level playing field for developers not directly in the game developer industry. Plenty of web developers enter, too.

As the name suggests, all your code and game assets should be smaller than or equal to 13 kilobytes (that's exactly 13,312 bytes, because 13 x 1024) when zipped.

This means that you should not overcomplicate building the zip package. It should unpack on any platform, anytime, anywhere, without problems. You can, of course, use tools that minify JavaScript source code if that helps you out.

The competition is meant to be kept on the light side. But to make everyone's lives a little easier and the entries more standardized, there are some rules you should abide by. These rules are taken from the Js13kGames website, and you can see the full set here. We'll go through them now.

You are not permitted to use external services or libraries

You are not permitted to use any libraries, images or data files hosted on a server or services that provide any type of data.

For example, Google Fonts are not permitted. But you are allowed to ask users to live-load a web font to support some characters or emoji on devices that can't display them properly. You just have to make sure your game will work without them, too.

Analytics and other stat-collecting scripts are also not allowed.

All the game assets should fit in the package size limit (the A-Frame, Babylon.js, and Three.js frameworks are not counted towards the size limit, but you can use them only in the WebXR category).

If you manage to shrink your favorite library below 13 kilobytes including the code itself, then you can use whatever you want – just remember the 13 kB limit.

And let's face it – sometimes, in a world where developers can get caught up scrolling through the npm library, trying to find the latest shortcut to their problem, it’s nice to strip it back to basics.

You should stick to the theme

The main theme for the competition is announced around August each year. I strongly advise you to follow the theme in your game, because the judges will pay attention to that.

But you can freely interpret the theme and implement it however you feel is best. For 2020, the theme was all around the number 404.

Manage errors and browser support

Your game must work and be playable in at least two browsers: the latest Firefox and Chrome. But the more supported browsers, the better.

There should also be no errors. You can lose some points if your game is showing any errors in the console. If we cannot play your game, it won't be accepted.

How many games can I submit?

You can submit as many games as you want! You can submit with a friend, a group of friends, your dog, it’s super flexible and anyone can join :)

This awesome competition was created by Andrzej Mazur in 2012 in his spare time. Andrzej used his own savings to print off t-shirts for contestants, he sent prizes, and essentially ran the whole thing on his own.

In its 8th year the competition now has global recognition, with entries from all over the world.

I am very honored to be sharing their entries with you via video today.