Tag: web development

Updating to Bootstrap 5

Bootstrap is one of the most popular CSS development frameworks used by web developers to create responsive websites. Bootstrap 5, the latest version of this framework, was released in May 2021. If you have previously built a website with Bootstrap 4, you might be wondering if it is worth updating to the latest version. In this blog post, we will discuss the benefits of updating your website from Bootstrap 4 to Bootstrap 5, and some of the steps you need to take to do so.

Why update to Bootstrap 5?

Bootstrap 5 brings some significant changes and improvements over Bootstrap 4. Some of the most notable changes are:

  1. Smaller file size: Bootstrap 5 is designed to be smaller and faster than the previous versions, which means it can help improve the loading speed of your website.
  2. Improved grid system: The new grid system in Bootstrap 5 allows for easier customization and is more flexible than the previous version.
  3. New utility classes: Bootstrap 5 introduces new utility classes that make it easier to style elements and create responsive designs.
  4. New components: Bootstrap 5 introduces several new components, such as the accordion, off-canvas, and toast, which you can use to create modern and interactive user interfaces.

Breaking changes

There are some breaking changes introduced in Bootstrap 5 that you should be aware of. These are just some of the breaking changes introduced in Bootstrap 5. If you are planning to update your website, be sure to review the official Bootstrap 5 documentation for a full list of changes and migration instructions. Additionally, the Bootstrap 5 Upgrade Guide on the Bootstrap website provides detailed information on how to update from previous versions of Bootstrap.

  1. jQuery dependency: Bootstrap 5 no longer requires jQuery, so if you are using jQuery plugins or code, you may need to make some adjustments.
  2. Custom properties: Bootstrap 5 uses custom properties (CSS variables) to define many of its values, which means some of the class names and syntax have changed.
  3. Forms: The structure of forms in Bootstrap 5 has changed, with the introduction of a new .form-control-plaintext class, and the removal of the .form-row class.
  4. Utilities: Some utility classes have been removed or renamed, such as .rounded-0 (renamed to .rounded-), and .img-fluid (renamed to .img-fluid rounded).
  5. Dropdowns: The structure and classes of dropdowns have changed in Bootstrap 5, including the removal of the .dropdown-item-text class.
  6. Card decks: The .card-deck class has been replaced with the new .g- class to provide more flexibility in spacing.

Steps to update from Bootstrap 4 to Bootstrap 5

Updating from Bootstrap 4 to Bootstrap 5 is not a major overhaul, but it does require some changes to your code. Here are some steps you need to take to update your website to Bootstrap 5:

  1. Check compatibility: Before you start updating your website, check if any third-party libraries or plugins you are using are compatible with Bootstrap 5. If not, you may need to find alternatives or wait until the developers of the libraries update them.
  2. Update the CSS and JavaScript files: Download the latest version of Bootstrap 5 and replace the CSS and JavaScript files with the new ones. You can also use a CDN to load the new files.
  3. Update class names: Some class names have changed in Bootstrap 5, so you will need to update them in your HTML and CSS files. For example, the .form-control class is now .form-control-plaintext.
  4. Update custom styles: If you have customized the styles of Bootstrap components, you may need to update them to match the new class names and structure of Bootstrap 5.
  5. Test your website: After updating your website, test it thoroughly to make sure everything is working as expected. Check for any visual issues or broken functionality and fix them as necessary.

Conclusion

Updating from Bootstrap 4 to Bootstrap 5 can bring many benefits to your website, including improved performance, flexibility, and new features. While the update process may require some work, it’s worth it to ensure your website is up to date with the latest technology and standards. By following the steps outlined in this blog post, you can update your website to Bootstrap 5 and take advantage of all the improvements it has to offer. For any questions or comments, please feel free to contact me here.

How to create a website without coding

For a small business, there are many benefits to having a company website. You get an online presence 24/7, an ability to expand to more markets outside of your geographical boundaries, and an opportunity for growth. But, not everyone has the technical knowledge or resources to create a website. Yes, there are a lot of website builders that can help with that. However, even those tools also require some technical knowledge. With our Invoicing 24/7 app, you can create a website without coding or technical knowledge.

To get started, download the app from the Apple App Store or Google Play Store, and create your account for free. We designed this app to help small businesses with their invoicing needs. You are also able to create estimates and track projects by time. But the latest update of the app also gives you the ability to create a website for your company. To demonstrate how this works and how the end result looks like, I have setup a page for W3 Applications using the app. You can see the end result here.

Creating the website

From the main screen of the app, hit the “My Website” button. This will take you to a page that allows you to manage your website. But, since we don’t have a website to start with, this page will take you to the website setup screen.

To get started, hit the “My Website” button

The first thing you have to think about, is a name for your website. This name will be part of the address of your page, and once you select one, you can not change. So, think of a name that describes your business well. Ideally, this is the name of your company. In our example, the name of my website is w3applications. This name has to be unique also. That’s why the app will verify that no other website has used it before.

Once a name is selected, you have to type a “Heading” for your website. Again, this is ideally the name of your company and will be displayed prominently in the center when the page is first loaded. Just below the heading is the “Sub Heading”. This is usually the tag line of your company. In my case, the sub heading is “Software solutions for small businesses”.

Changes that you make in the app, reflect on the website

Next, you will add the “Features” that you want to promote on the page. This could be your services, products or anything else you want to highlight on your web page. Each feature has to have a Title, Description and an Image. You can manage all of this right within the app, and it will reflect directly on the website.

Add as many features you want to highlight

Another thing that you can do to add more customization, is to change the color of the website. This should match the brand color of your company.

Also, you can add your company’s email address. This will add a link at the bottom of the page so visitors can send you emails.

That’s it!

And that is all that you need to do to create a website without coding, and that looks professional and provides users with information about your services and products. Once you have added everything, you can then fully manage your web page right from within the app. You can visit the website on your phone to see how it looks like for mobile users, you can edit all the fields described above, copy the URL of the website or share it with anyone.

Managing your website is as easy as tapping a few buttons on your phone

If you have any questions or comments, please send me a message here. Thanks!

What is the MEAN Stack?

You may have heard the term MEAN Stack in web development. I will explain where this term comes from, and what are the advantages of creating web applications using the MEAN Stack. MEAN Stack stands for MongoDB, Express.js, Angular and Node.js. Let’s first talk about the different parts that make up a MEAN Stack application, describe why it’s a good idea to create web applications by using it.

MongoDB

MongoDB is a NoSQL database. This is the database of choice for developers building MEAN applications. The data that’s stored in a MongoDB database is in JSON format. This makes it an excellent candidate for the database in this type of applications.

Express.js

Express.js is one of the most popular frameworks, used with Node.js, for creating web applications. It allows developers to easily respond to HTTP user requests.

Angular

Angular was designed by Google to allow developers to create web applications (you can create other types of applications with Angular, but I’ll stick to web applications in this post). Ever since version 2 of Angular (also known as Angular 2), the language that you have to use is TypeScript. This is a Microsoft language that’s designed to improve upon plain JavaScript. So, if you already know JavaScript, then the learning curve for coding in TypeScript is not steep at all.

Node.js

Historically, JavaScript in web applications worked in the browser only. However, Node.js is JavaScript that runs on the server. You can think of it as the server for a MEAN application.

Advantages

As you can see from the above, all of the technologies in a MEAN application use JavaScript as the programming language. This provides a big advantage, in the sense that all the stacks of the application use the same language. It is especially advantageous for small teams, like in startups, where one developer handles all the different parts of the application.

Conclusion

MEAN Stack applications use MongoDB, Express.js, Angular and Node.js for developing web applications. It is a great way for web developers to use the same language across all the parts of the web application. In some cases, developers can replace Angular with Rect. In which case, you would refer to it as the MERN Stack. If you have any questions, feel free to leave a comment here, or use the contact page.

What you need to learn to become a web developer

People often ask me this question, what do I need to learn to become a web developer. There’s no short answer to this question. And, the answer always starts with “it depends…”. In this blog post, I will try to deep dive into the different web technologies that you can learn to become a web developer.

In a previous blog post, I talked about the different types of web developers depending on what part of the web application they work on. To summarize, a web developer can be a front end, back end or full-stack developer. The part of the web application that you want to work on, will ultimately decide the technologies that you need to learn.

However, regardless of what type of web developer you want to be, learning HTML is a must. This is because HTML is the language that the browser interprets in order to display a web page. In most cases, HTML is written by the front end developer. But, it is very important for back end developers to know HTML as well. This is because they often need to send it back to the browser. So, think of HTML as the universal language that all types of web developers need to know.

What you need to learn: Front end

For a front end developer, in addition to HTML, they need to learn these languages/frameworks:

CSS

Cascading Style Sheets is the language used to style web pages. Think of HTML as the language that tells the browser what to display, and CSS tells it how to display it. Using CSS, you can give your pages colour, position the different elements of a web page and more.

JavaScript

JavaScript is a language that runs on the browser, and provides you with some very useful functionality. Let’s say that you have a contact form on your page, and you need to make sure that the user types a valid email address. One way to do this, is to validate the email address on the server once the users clicks the Submit button. However, the better option would be to do the validation on the browser itself. This will save the user the extra time it takes for the server to do the validation and return the result. It gives a better user experience overall.

Angular

Angular is a framework developed by Google, and used to create Single Page Applications (SPA). A SPA application gives the user a very responsive user-experience. Interacting with an application that was developed using Angular, is similar to interacting with a regular desktop application. The user does not experience the lag of the browser sending a request to the server, and waiting for the response. Everything feels more “snappy” and responsive. In a SPA application, the browser does send a request to the server, of course. But it is done in a way that feels more responsive to the user. To develop Angular applications, you have to know HTML, CSS and a language called TypeScript. This is a variant of JavaScript, and aims to improve on some of its shortcomings.

There are more frameworks that allow you to create SPA applications, other than Angular. For example, ReactJS and VueJS. However, I will stick to talking about Angular here because that’s my preferred framework.

What you need to learn: Back end

As a back end developer, there are more options to choose from than a front end developer. One major factor that may dictate what language you have to learn as a back end developer, is the Operating System of the web server where the application will be hosted. This is because not all languages run on all operating systems.

ASP.NET

ASP.NET is a Microsoft technology that can be used to create web applications. You can use different programming languages to create ASP.NET applications, but the most popular one is C# (pronounced C Sharp). ASP.NET runs only on Windows web servers. A more modern version of ASP.NET is ASP.NET Core.

ASP.NET Core

This is the enhanced version of ASP.NET, and is capable of running on Windows as well as Linux web servers. As far as programming languages are concerned, you can write ASP.NET Core applications using C# as well.

Node.js

You can create server side code using Node.js. The code is written in JavaScript and can be run on different types of operating systems. One advantage of using a JavaScript server side technology, is that you can have the same language (JavaScript) running on the server and the client side.

PHP

PHP is one of the oldest and most popular programming languages used for creating web applications. It powers one of the most popular blogging platforms on the Internet, WordPress.

Python

Python has been increasing in popularity in recent years. You can use it to create web applications, using frameworks like Django. One of the advantages of Python is that it usually requires less code to write something in Python than in other programming languages. This is because of the syntax of the language.

Database technologies

As a back end developer, you need to learn a database technology as well. You have to be extremely familiar with the core concepts of databases. Concepts like, tables, fields, primary fields, relations, etc. In addition, you have to know the ins and outs of the language used for querying (retrieving) the data from the database. Some of the most popular databases are:

  • Microsoft SQL Server
  • MySQL
  • PostgreSQL
  • MongoDB

Microsoft SQL Server, MySQL and PostgreSQL are all examples of relational databases. However, MongoDB is one of the most popular type of database technologies called NoSQL. I will not go into all of the differences between SQL and NoSQL databases in this blog post. But, one of the differences, is that in NoSQL databases the data does not have to be structured in a certain way. Meaning, you can start with a database structure, and then change that structure to something else without affecting the existing data.

What you need to learn: Full-stack

As a Full-stack web developer, you have to be able to create the whole application on your own. Which means, you need to learn some technologies from the front end stack, and some from the back end stack.

Courses to learn web development

If you are looking for good resources or courses to learn any of these languages and technologies, then one of the best websites for such courses is Udemy. It has a wide range of courses on these technologies, and more. Also, regardless of your current experience level, there’s a very good change that you’ll find the right course for you.

Conclusion

For any questions on what you need to learn to become a web developer, please feel free to leave a comment here or use our contact page.

Front End vs Back End vs Full-stack web development

We often use different terms when referring to web developers, or web development in general. These terms are: Front end, Back end or Full-stack. So, what does each one mean, and how should we use these terms? To understand the difference between Front End vs Back End vs Full-stack development, let me start by explaining what a typical web application consists of.

The architecture

A typical web application consists of a database, some code that runs on a web server on the Internet, and some code that runs on your browser when you open the web app. You can host the database and the web server on the same machine, or you could host them on separate machines. This depends on a number of factors, one of which is the size of the application. The image below, shows how this architecture may look like.

A diagram of a typical web application architecture
A diagram of a typical web application architecture

Developers

Keeping the architecture of web applications in mind, we can categorize developers based on the part of the web application that they are specialized in. The first category is “Front end” developers. These are developers who work primarily on code that runs on the browser. Sometimes, this is also called front end code. This is the part of the application that the user interacts with directly. Examples of this are, the text, images, buttons and forms on the page. The second category of developers is “Back end” developers. They work on the code that runs on the web server, not on the browser. This is generally code that the user does not interact with directly.

Example

For example, let’s say that a web application has a login form. The actual form where the user has to enter a username and password is developed by a front end developer. The form can have its own validation to make sure that the user has entered all the required fields. This validation code would be running on the browser, so it’s all front end code. Once the user enters all the required information and clicks the login button, that information is then sent to the web server for further processing. On the web server, some code has to run to validate against the database whether the username and password are correct. The server then sends the result of this validation back to the browser. This code is typically developed by a back end developer.

Front end vs Back end web development
Front end vs Back end web development

Full-stack developers

The third category of web developers are called “Full-stack” developers. As the name indicates, these are developers who work on the front end and the back end code. Generally speaking, you can find full-stack developers in smaller companies and teams (like start-ups). Full-stack developers have to have a wide range of knowledge in both client side and server side code.

Conclusion

In conclusion, we talked about the difference between Front End vs Back End vs Full-stack development. Front end developers work on the client side of the app. Back end developers work on the server side of the app. And full-stack developers work on both sides of the app. For any questions, leave a comment here or use our contact form.