User-Centred Design: Creating Experiences that Delight Users

June 9, 2023 by Max

Introduction

In today’s digital landscape, where user satisfaction and engagement are paramount, businesses are increasingly focusing on user-centred design. This approach places the user at the heart of the design process, ensuring that products and services are intuitive, accessible, and enjoyable to use. In this article, we will explore the principles of user-centred design, its benefits, and how it can be implemented to create exceptional user experiences.

Article: User-Centered Design: Creating Experiences that Delight Users

Welcome to the world of user-centred design! In this digital era, where user satisfaction is paramount, businesses are increasingly realizing the importance of creating delightful experiences for their users. Gone are the days when products were developed without considering the needs and preferences of the end-users. User-centred design brings the user to the forefront, ensuring that every aspect of a product or service is tailored to meet their expectations and needs.

User-centred design involves a deep understanding of users through research, analysis, and continuous feedback. By gaining insights into their behaviours, motivations, and pain points, designers can create solutions that not only meet their needs but also exceed their expectations. It’s like designing a comfortable and intuitive path for users to navigate through a digital landscape.

The Benefits of User-Centered Design

The benefits of user-centred design are numerous. Firstly, it leads to improved user satisfaction. When users find a product or service easy to use, efficient, and enjoyable, they are more likely to engage with it and become loyal customers. This, in turn, leads to increased conversions, higher retention rates, and positive word-of-mouth recommendations.

Secondly, the user-centred design reduces development costs and time. By involving users early in the design process, potential usability issues and design flaws can be identified and addressed promptly, saving resources that would otherwise be spent on fixing problems after launch. Moreover, iterating and testing throughout the design process ensures that the final product meets user expectations.

Understanding User Needs: Research and Analysis

Before diving into design, it’s crucial to gain a deep understanding of your target users. This involves conducting user interviews, observing user behaviour, and analyzing user feedback. User interviews provide valuable insights into their goals, preferences, and pain points. Observing user behaviour helps identify patterns, allowing designers to create solutions that align with users’ mental models. Analyzing user feedback, such as surveys or user testing sessions, helps identify areas of improvement and refine the design.

Creating Personas: Putting Users First

Personas are fictional representations of your target users based on the insights gathered from research. They embody the characteristics, goals, and behaviours of real users, helping designers empathize and design for their specific needs. Personas act as a guiding light throughout the design process, ensuring that every decision made aligns with the user’s goals and motivations.

Ideation and Conceptualization: From Ideas to Solutions

Once armed with user insights and personas, the ideation and conceptualization phase begins. This is where creativity and innovation come into play. Brainstorming sessions allow designers to explore a wide range of ideas and possibilities. Sketching and wireframing help visualize these ideas, enabling rapid iteration and feedback. Prototyping and testing with users bring ideas to life, providing invaluable feedback that drives further improvements.

Iterative Design: Continuous Improvement

User-centred design is an iterative process. It involves gathering user feedback, incorporating iterations, and conducting usability testing at each stage. This continuous improvement cycle ensures that the design is refined and optimized based on real user experiences. By involving users throughout the design process, designers can build products and services that truly resonate with their needs.

Accessibility: Designing for All Users

Inclusive design is a core principle of user-centred design. It involves creating products and services that are accessible to users with disabilities and diverse needs. By considering accessibility from the early stages of design, designers can ensure that everyone can use and benefit from their creations. This not only improves the user experience but also helps businesses comply with accessibility regulations and reach a broader audience.

Visual and Interaction Design: Crafting Engaging Experiences

Visual and interaction design plays a crucial role in creating engaging user experiences. Typography, colour palettes, visual hierarchy, and consistency all contribute to the aesthetics and usability of a product. Intuitive navigation and interactions guide users seamlessly through the interface, reducing friction and enhancing engagement. Remember, design is not just how it looks; it’s also about how it works.

Evaluation and Metrics: Measuring Success

To gauge the success of a design, it’s essential to establish metrics and evaluate its performance. A/B testing allows designers to compare different design variations and identify the most effective ones. Heatmaps and user analytics provide insights into user behaviour and interactions, helping refine the design further. Conversion rates and user satisfaction surveys offer quantifiable measures of success and user happiness.

Collaboration and Communication: Multidisciplinary Teams

User-centred design thrives in a collaborative environment. It requires multidisciplinary teams working together to bring ideas to life. UX designers, developers, stakeholders, and other team members all contribute their expertise to create exceptional user experiences. Design sprints and workshops foster creativity, align goals, and ensure a smooth collaboration process. Clear and effective communication is crucial to maintain a shared understanding and keep everyone on the same page.

Challenges and Considerations in User-Centered Design

While user-centred design brings tremendous benefits, it also presents challenges. Balancing user needs with business goals can be tricky, requiring trade-offs and prioritization. Addressing technical limitations and working within constraints demand creative problem-solving. Additionally, user expectations evolve over time, necessitating ongoing research and adaptation to stay ahead.

Future Trends in User-Centered Design

The field of user-centred design is constantly evolving. As technology advances, new trends emerge. Artificial intelligence and personalization allow for tailored experiences that adapt to individual user preferences. Voice user interfaces (VUI) offer hands-free and natural interactions. Augmented reality (AR) and virtual reality (VR) open up new possibilities for immersive user experiences.

Conclusion

User-centred design is a powerful approach that places users at the heart of the design process. By understanding their needs, creating personas, ideating, iterating, and incorporating feedback, designers can create exceptional user experiences that delight and engage. Remember, it’s not just about aesthetics or functionality; it’s about crafting experiences that truly resonate with users, making their journey seamless, intuitive, and enjoyable.

Frequently Asked Questions (FAQs)

1. How does user-centred design differ from other design approaches?

User-centered design focuses on understanding and meeting the needs of users throughout the design process. It involves research, analysis, and continuous iteration based on user feedback. Other design approaches may prioritize aesthetics, functionality, or business goals without placing as much emphasis on user satisfaction and engagement.

2. What are the key benefits of user-centred design?

User-centred design leads to improved user satisfaction, increased conversions, higher retention rates, and positive word-of-mouth recommendations. It also reduces development costs and time by addressing usability issues early in the design process.

3. How can user-centred design be implemented in an organization?

Implementing user-centred design requires a commitment to user research, collaboration among multidisciplinary teams, and a willingness to iterate and improve based on user feedback. It’s essential to embed user-centred design principles into the organization’s culture and processes.

4. What role does accessibility play in user-centred design?

Accessibility is a vital aspect of user-centred design. By designing for all users, including those with disabilities, designers ensure inclusivity and reach a broader audience. It also helps businesses comply with accessibility regulations and ethical considerations.

5. What are some future trends in user-centred design?

Future trends in user-centred design include artificial intelligence and personalization, voice user interfaces (VUI), augmented reality (AR) and virtual reality (VR). These technologies offer exciting opportunities to create more tailored and immersive user experiences.

Laravel Best Practices and Standards Guide

June 5, 2023 by Max

Laravel! Ever heard of it? I bet you have if you’re a part of the web development world. But what makes Laravel so special? What are the Best Laravel Practices and Standards you follow to make your Laravel-based application efficient, maintainable, and simply superior?

That’s precisely what we’re about to delve into. So buckle up; it’s going to be an enlightening ride!

Introduction

Importance of Coding Standards

Remember when you picked up your first Lego set and followed the guide to create the picture-perfect castle on the box? Similarly, coding standards are like a guide to creating efficient and maintainable code. They help ensure that your code is clean, readable, and beautiful to look at (yes, code can be beautiful!), so welcome to our comprehensive guide on the Best Laravel Practices and Standards.

Brief Introduction to Laravel

Enter Laravel, a free, open-source PHP web framework intended for the development of web applications. Laravel offers a beautiful syntax that can make web development a joy. It eases tasks such as routing, authentication, sessions, caching, and more, which makes it a preferred choice among developers.

Understanding Laravel

History and Evolution

Created by Taylor Otwell in 2011, Laravel has come a long way. It’s not just a tool but a whole ecosystem for developing modern web applications. With every new version, Laravel has introduced features to make web development more effortless.

Why Choose Laravel?

You may ask, “Why Laravel?” The answer lies in its simplicity and elegance. It is user-friendly, easy to understand, and offers robust features that make it a comprehensive platform for developers. Laravel also follows MVC (Model-View-Controller), an architectural pattern that separates an application into three main logical components.

Understanding Laravel Architecture

The MVC pattern is what gives Laravel its power. Models correspond to your database structure, Views represent your user interface, and Controllers are the bridge connecting them. Laravel’s service container, a powerful tool for managing class dependencies, is at the heart of Laravel’s architecture.

The Laravel Framework

Installation & Setup

Starting with Laravel is like a breeze. With Composer, Laravel can be installed and set up in a few minutes. Just ensure you meet the server requirements before you dive in.

The Structure of Laravel

Laravel follows a well-defined directory structure. It’s clean and organised, and you will know where to find what.

Understanding MVC in Laravel

In Laravel, the MVC pattern makes it easier to manage complexity by separating the application logic from the user interface.

Best Practices in Laravel

Let’s delve into the Best Laravel Practices and Standards that will make your Laravel-based application efficient, maintainable, and superior.

Using Eloquent ORM

One of the star features of Laravel is Eloquent ORM. It’s an advanced PHP implementation of the active record pattern that allows you to interact with your database like you would with SQL.

Applying SOLID Principles

Remember the SOLID principles? They are the five principles of Object-Oriented Design that promote more understandable, flexible, and maintainable code. When you apply these principles to your Laravel project, you’ll see how they elevate your coding game.

Keeping Controllers Thin

The saying “Fat models, skinny controllers” is popular in the Laravel community. This principle states that the bulk of your logic should be in the model, while the controller should handle only the request and response.

Organising Routes

Routes are the heart of your Laravel application. Organising them in a way that reflects the application structure and is easy to understand is a best practice you shouldn’t overlook.

Writing Efficient Laravel Code

Using Artisan Commands

Artisan is Laravel’s command-line interface. It includes several commands that assist you while you build your application. It’s like having your personal assistant!

Using Laravel’s Blade Templating Engine

Blade is Laravel’s simple yet powerful templating engine. Unlike other PHP templating engines, Blade does not restrict you from using plain PHP code in your views.

Dependency Injection and Service Containers

Dependency Injection is a design pattern that allows for IoC (Inversion of Control). Laravel’s service container is a powerful tool for managing class dependencies and performing dependency injection.

Testing in Laravel

Unit Testing

Unit tests focus on a small piece of code. Laravel is built with testing in mind and comes with PHPUnit integrated.

Feature Testing

Feature tests ensure that your application’s larger portions of code are working correctly.

Using PHP Unit in Laravel

Laravel’s integration with PHPUnit makes it easy to run tests for your application and ensure it behaves as expected.

Laravel Packages and Libraries

Using Composer

Composer is a tool for dependency management in PHP. Laravel utilises Composer to manage its dependencies and to ensure the right versions of packages are being used.

Useful Laravel Packages

Laravel has a rich ecosystem of packages that can significantly boost your productivity. Some of them are Laravel Debugbar, Laravel IDE Helper, Laravel Telescope, and many more.

Conclusion

This comprehensive guide provides you with a deep understanding of Laravel and the Best Laravel Practices and Standards that will help you write efficient, maintainable, and superior code. Laravel, with its elegant syntax and robust features, has indeed changed the landscape of web development. Whether you’re a beginner or an expert, Laravel has something in store for you. Embrace these practices and see your web development journey reach new heights!

FAQs

What is Laravel used for?
- Laravel is a web application framework with an expressive, elegant syntax aimed at making web development tasks, such as routing, persistence, queuing, caching, and security, easier for developers.
Why is Laravel so popular?
- Laravel is popular due to its robust features and ease of use. It’s a complete and developer-friendly framework that speeds up the web development process.
What databases does Laravel support?
- Laravel supports a variety of databases, including MySQL, Postgres, SQLite, and SQL Server.
Is Laravel suitable for large-scale applications?
- Absolutely! Laravel is excellent for large-scale applications due to its efficiency, security features, and scalability.
How secure is Laravel?
- Laravel takes security seriously and provides several built-in mechanisms to protect your application. It handles many security aspects, like protection from SQL injection, cross-site request forgery, and cross-site scripting.

NodeJS vs. Other Technologies: Which To Choose?

March 10, 2023 by Max

As a web developer, choosing the right backend technology is crucial to the success of your project. With so many options available, it can be overwhelming to decide which tool is best suited for your needs. In this article, we will compare NodeJS with other popular backend technologies, including Ruby on Rails, Django, .NET, and Laravel. We will discuss the advantages and disadvantages of each technology and provide real-world examples of companies that use them. Additionally, we will explore the use of NodeJS in education and why it’s a great starting point for students. By the end of this article, you will have a better understanding of how to choose the right backend technology for your web project.

NodeJs

Overview of NodeJS

NodeJS is an open-source, cross-platform JavaScript runtime environment that allows developers to build scalable and high-performance applications. It was developed by Ryan Dahl in 2009 and has gained a lot of popularity in recent years due to its unique features.

Advantages of Using NodeJS

One of the main advantages of using NodeJS is its performance. NodeJS is built on Chrome’s V8 JavaScript engine, which is known for its high performance. NodeJS is also event-driven and non-blocking, which makes it ideal for building real-time applications that require a lot of data processing. Additionally, NodeJS has a large and active community, which means that there are a lot of libraries and tools available to help you build your application.

Disadvantages of Using NodeJS

One of the main disadvantages of using NodeJS is its steep learning curve once you have progressed past the basics. NodeJS requires developers to learn asynchronous programming, which can be challenging for those who are used to synchronous programming. Additionally, NodeJS has some limitations when it comes to CPU-bound tasks, which means that it may not be the best choice for applications that require a lot of CPU processing.

Real-World Examples of Companies that Use NodeJS

Some of the most popular companies that use NodeJS include Netflix, LinkedIn, and PayPal. Netflix uses it to build their user interface and handle server-side rendering, while LinkedIn uses NodeJS for their mobile and web applications. PayPal also uses NodeJS for their checkout flow and other backend services. These companies have seen a lot of success using it and have contributed to its growing popularity.

Other Backend Technologies

Comparison of Other Popular Backend Technologies

While NodeJS has a lot of advantages, it’s important to consider other popular backend technologies as well. Some of the other popular backend technologies include Ruby on Rails, Django, .NET, and Laravel.

Ruby on Rails

Ruby on Rails is an open-source web framework that is built on the Ruby programming language. It’s known for its simplicity and convention over configuration approach, which makes it easy to get started with. Ruby on Rails is also highly productive, which means that you can build applications quickly. However, Ruby on Rails can be slow and may not be the best choice for applications that require a lot of data processing.

Django

Django is a high-level Python web framework that is known for its robustness and security. Following the Don’t Repeat Yourself (DRY) principle, which means that you can write less code and achieve more. It is also highly scalable, which makes it a good choice for large applications. However, Django has a steep learning curve and may not be the best choice for beginners.

.NET

.NET is a framework developed by Microsoft that supports multiple programming languages, including C# and Visual Basic. It’s known for its speed and performance, which makes it a good choice for building enterprise-level applications. .NET is also highly scalable and has a large community, which means that you’ll have a lot of support. However, .NET can be expensive and may not be the best choice for small projects.

Laravel

Laravel is a free, open-source PHP web framework that is known for its elegance and simplicity. Following the Model-View-Controller (MVC) architecture, which makes it easy to separate your code and maintain your application. It also has a large and active community, which means that you’ll have a lot of support. However, Laravel can be slower than other frameworks and may not be the best choice for applications that require a lot of data processing.

Advantages and Disadvantages of Each Technology

Each of the backend technologies discussed above has its own advantages and disadvantages. It’s important to consider these factors when choosing a technology for your web project. Some of the factors to consider include the project requirements, team skills, community support, and scalability.

NodeJS in Education

NodeJS is becoming increasingly popular in universities due to its ease of use and versatility. It’s an excellent starting point for students who want to learn web development and gain practical experience. Here are some reasons why NodeJS is a popular choice in education:

Easy to Learn

NodeJS at a basic level is relatively simple, making it easy for students to learn. It has a simple and intuitive syntax that’s similar to JavaScript, which is a language that most students are already familiar with. Students can quickly start building applications using NodeJS, which helps them gain practical experience.

Versatile

NodeJS is a versatile technology that can be used to build a wide range of applications, from simple web applications to complex real-time applications. This versatility makes it an excellent choice for students who want to learn how to build different types of applications.

Large Community

NodeJS has a large and active community that provides excellent support to users. This community includes developers, educators, and students who are passionate about technology. This support can be invaluable for students who are just starting and need help troubleshooting issues.

In-Demand Skill

NodeJS is an in-demand skill in the job market, and many companies are looking for developers who have experience with the technology. By learning it in university, students can gain practical experience and improve their job prospects.

Comparison to Other Web Development Frameworks

NodeJS has some significant differences when compared to other popular web development frameworks, such as Laravel. Let’s take a look at some of the main differences:

Performance

NodeJS has a significant advantage when it comes to performance. It’s built on top of the V8 JavaScript engine, which is incredibly fast and efficient. This allows it to handle a high volume of requests quickly, making it an excellent choice for building real-time applications.

In contrast, Laravel is built on PHP, which is generally slower. While Laravel has improved its performance over the years, it still can’t match the speed and efficiency of NodeJS.

Scalability

NodeJS is also highly scalable, thanks to its event-driven architecture. It’s designed to handle large amounts of data and can easily scale to meet the demands of growing applications. This makes it an excellent choice for building large-scale applications that require high scalability.

Laravel, on the other hand, can be more challenging to scale. While it’s possible to scale Laravel applications, it requires more effort and expertise to do so.

Learning Curve

Finally, NodeJS has a lower learning curve than Laravel. While both technologies require some learning, It is easier to learn for developers who are already familiar with JavaScript. However, Laravel has a steeper learning curve and requires developers to learn PHP and Laravel-specific concepts.

Getting Started with NodeJS

If you’re new to NodeJS and want to get started, here are some resources to help you:

Official Documentation

The official NodeJS documentation is an excellent resource for learning about the technology. It includes guides, tutorials, and API references that cover everything you need to know to start building applications with NodeJS. The documentation is continually updated, ensuring that it’s always up-to-date with the latest releases.

Online Courses

There are many online courses available that can help you learn NodeJS. Platforms like Udemy, Coursera, and Pluralsight offer courses that cover NodeJS from beginner to advanced levels. These courses can be an excellent way to gain practical experience and learn from experienced developers.

Online Communities

Online communities like Reddit, Stack Overflow, and GitHub can be valuable resources for learning about NodeJS. These communities include developers who are passionate about the technology and are willing to help beginners troubleshoot issues and answer questions.

Conclusion

In conclusion, NodeJS is an essential technology for modern web development, providing a powerful runtime environment for building scalable and high-performance web applications and APIs. Whether you’re a student just starting in web development or an experienced developer looking to build the next big thing, NodeJS has something to offer.

We’ve covered the basics of what NodeJS is, its advantages, how it compares to Laravel, and its use in universities. NodeJS’s simplicity, scalability, and ease of use make it an attractive choice for many developers and students alike.

If you’re considering using NodeJS for your next project, we encourage you to explore the vast community and resources available online. NodeJS is constantly evolving, and staying up-to-date with the latest developments can help you build better, more efficient web applications.

We hope this article has been helpful in understanding the basics of Node, and how it can be used in web development. If you have any questions or comments, please feel free to reach out.

Laravel, a framework

March 7, 2023 by Max

If you’re a web developer, chances are you’ve heard of Laravel. For good reason, this PHP web framework has gained a lot of popularity over the years. As someone who’s been using Laravel for a while now, I can tell you that it’s a joy to work with.

One of the things I love about Laravel is its simplicity. It’s easy to read and easy to understand, even if you’re new to web development. But don’t let its simplicity fool you – Laravel is also incredibly powerful. It comes with a ton of built-in features that make it easy to do things like authentication, routing, and database management.

One of my favourite things about Laravel is its MVC architecture. This might sound like a fancy term, but it’s so easy to use. It just means that the code for your application is divided into three parts: the model, the view, and the controller. This makes it easy to keep your code organized and maintainable.

Artisan tools

Another thing I love about Laravel is its Artisan command-line interface. If you’re not accustomed to working with the command line, it may seem scary, but it’s actually a straightforward process. Artisan makes it easy to do things like generate boilerplate code and run database migrations. It even allows you to create your own custom commands!

Its routing

Laravel also has a really powerful routing system. This just means that it’s easy to define the routes for your application and map them to specific controller actions. This makes it easy to create clean, readable URLs for your application.

Using databases

If you’re working with databases, you’ll love Laravel’s Eloquent ORM. This might sound like another scary term, but it’s actually really simple. Eloquent makes it easy to work with databases in your application. It provides a simple syntax for doing things like querying data and saving data to the database.

Overall, I think Laravel is a fantastic choice for web developers. It’s easy to learn, easy to use, and incredibly powerful. Laravel provides everything you need to build a simple blog or a complex web application. So why not give it a try and see for yourself? I promise you won’t be disappointed!

Five Excel Tips and Tricks – Part 1

February 24, 2022 by Max

Whether you use Excel frequently or rarely, for work or for tracking in-game items, here are 5 tips and tricks that may help you save time in the future.

1. Inserting today’s date

You can very quickly insert today’s date into any cell simply by pressing “CTRL ;”

This little shortcut can be very helpful over time and more often than not be used on most spreadsheets if you want to track the day it was made.

Example of today's date from pressing "CTRL ;" in excel — Example of pressing CTRL ;

2. Repeat… Repeat!

In Excel there often comes a time when you want to repeat the last formula/action you made, there is a shortcut combo for this, F4.

Just press F4 next time you want to repeat an action on another cell, just click the cell and F4.

Refresh Repeat Spin GIFfrom Refresh Repeat GIFs

3. Search in Excel?

If you are stuck in a certain area or with a certain formula, press: “Alt Q”, this will let you search for what you are trying to do!

More often than not typing in the exact formula will bring up a formula wizard for you to use, providing clear and understandable instructions on what you need to do.

Thats What Im Talking About Kevin Malone GIFfrom Thats What Im Talking About GIFs

4. Keep it simple, Cut/Copy & Paste

You can drastically speed up your workflow with shortcuts, perhaps the best shortcut is Copy & Paste.

To copy press “CTRL C”
To cut press “CTRL X”
Finally to paste press “CTRL V”

Copy Paste Ctrl C GIFfrom Copy Paste GIFs

5. Excel’s autosum?

Excel has a shortcut that will automatically sum your rows or columns, this can help stop you from having to select the thousands of cells you might have before you can sum them.

To autosum just press “ALT =”

That’s all folks

That concludes the 5 tips and tricks for excel part 1, hopefully you find them useful, come back again soon for part 2.

How to install Python on Windows

February 12, 2022 by Max

Installation

The first step to becoming a Python developer is to download it. You can set it up in many different ways moreover there are many different versions. We are going to be installing the most updated version available at the time of writing 2022-02-10.

Check if Python already exists

If you are already a developer it may be possible that Python already exists on your system. If so then you do not need to reinstall it. Unless you wish to update or move to a newer version.

To check if you have it installed open your command line and type the following.

python --version

You should see something similar to the following.

Installing/Updating Python

On the official website, choose the latest Windows download available, for me it is 3.10.2.

Where the download button is situated on the Python.org website

Run the newly downloaded installer and follow these steps.

Select “Install for all users” and “Add to PATH”
Select Install Now and python should be installed onto your system.
If the option appears select “Disable path length limit” this will fix any path conflicts that many occur.

Checking installation

Now you have installed it, you can run the command from above to verify if it works successfully, furthermore, you can check the version number of your installation.

python --version

This concludes the installation process, read our other posts on getting started in python with a simple “Hello world!” program.

Uninstalling

To uninstall your installation, you need to navigate to Control Panel -> Programs -> Uninstall a program.

From here you can select your installation and click uninstall.

Uninstalling can be helpful if your installation starts playing up, you want to reset it back to factory defaults or you want to change to a different version.

How to install Laravel on Windows (With Tailwind)

February 10, 2022 by Max

This tutorial will guide you on how to install Laravel on windows so you can begin to develop and create websites with the framework. Additionally, we will also install Tailwind, a super easy to use CSS framework.

Requirements

Laravel uses Composer to manage all of its dependencies, to download Composer click here, or use our tutorial on installing Composer on Windows.

Installing

With Composer installed open your command line and run the following command. It will install Laravel globally on your computer and also add itself to the path.

composer global require laravel/installer

Testing it works

Now we will quickly check it has installed correctly. Create or navigate to a folder for testing and open it within the command line.

laravel new testApp
cd testApp
php artisan serve

Image of Laravel's start page — Laravel start page

You should now be able to see in your browser the default Laravel Page. Congratulations you have successfully installed Laravel, now have fun making something brilliant.

Installing Tailwind on Laravel

Requirements

Installing Tailwind requires NPM you can download that here, or follow our tutorial here.

Installation

Tailwind is a super easy-to-use CSS framework, if you wish to use it with Laravel you will need to follow the steps below on each new project you start.

First of all, make sure you are within a Laravel project or are in the test folder from above. You can then run the installation command.

npm install -D tailwindcss postcss autoprefixer

This installs Tailwind. Next, we initialise Tailwind within the project and generate its config files.

npm tailwindcss init

Now we need to add Tailwind to the Mix config file. Open the file called webpack.mix.js and add tailwindcss as a plugin.

Next, we add our blade templates to the tailwind.config.js file. We are adding all possible templates even if we do not necessarily use all of them in the project e.g. Vue.js.

Finally, we can add the directives to our projects /resources/css/app.css file.

To have your app update the CSS as you develop you can run.

npm run watch

Optionally you can have all the CSS preloaded during development.

npm run dev

When you are ready to release for production you can run the following command to have only the CSS you require for your project within app.css.

npm run prod

This concludes the tutorial on how to install Laravel and Tailwind, go forward and create something amazing!

How to install Node.js and NPM on Windows

February 7, 2022 by Max

Introduction

Node.js is a Javascript runtime environment, it is used to process data and scripts before sending them forward to web browsers, it comes with NPM, the Node Package Manager. Both of which are incredibly useful in web-based development.

Installing Node.js

In your browser of choice navigate to the Node.js download page and click on the Windows installer, if you are using a different operating system click on the system you use.

With the file downloaded you will now need to progress through the installation steps.

Run the downloaded executable.
On the welcome screen click Next.
Accept the user license agreement click Next.
The wizard will automatically select an installation location, you can change this but we would recommend leaving this at its default value. Then click Next.
The wizard will ask you to select any additional components, once again we recommend leaving this at the default values before clicking Next.
Node will then alert you to install necessary tools so it can compile npm modules. If you do not know what this mean leave the box unticked. If you know that you will need to compile modules then you can tick the box.
Finally you can click the Install button and the Installation will begin.

Check installation

Now we are going to very quickly check that the installation was successful. Open your command prompt and type the following command. It will print out to the console the version of Node your computer has installed.

node -v

Additionally, check that NPM was correctly installed with the following.

npm -v

That concludes how to install and download Node.js and NPM.

Uninstalling Node.js

To uninstall Node.js we recommend navigating to Control Panel -> Programs -> Uninstall a program.

And then selecting Node and clicking uninstall, this will ensure all of the files are correctly uninstalled from your computer.

Uninstalling can be helpful if your Node starts playing up or you want to reset it back to factory defaults, and with that, we conclude our tutorial, we hope it was helpful and Node serves you well in your future projects.

How to install Composer on Windows

February 5, 2022 by Max

Composer is a command-line tool used to manage and download PHP dependencies and tools, today we will be installing it on Windows.

Installing Composer

First, we must download the latest Composer File, we can get this at the official website here.

We want to be clicking on the Composer-Setup.exe link, this will download the Setup executable and will ensure we have the latest file.

Composer installation wizard — Installation wizard

Once the file has been downloaded and you click run you can follow these steps.

Click install for All users, then click next.
Leave developer mode unchecked, we do not want this as it is not the recommend option.
Select the version of PHP you have installed, if you do not have PHP installed then you will need to install it from here.
Composer will then quickly check your PHP before showing you a Proxy setting, leave this blank and click next.
Finally you will be shown an overview, if everything is as we selected click install.

Verifying the installation

To validate that it was installed correctly go to a command prompt and type the following to see your version.

composer --version

You should see something similar to the following.

Uninstalling

To uninstall we recommend navigating to Control Panel -> Programs -> Uninstall a program.

And then selecting Composer and clicking uninstall. This will ensure all of the files are correctly uninstalled from your computer.

Uninstalling can be helpful if it starts playing up or you want to reset it back to factory defaults, and with that, we conclude our tutorial, we hope it was helpful and Composer serves you well in your future projects.

Dummies guide to Pivot Tables in Excel

February 3, 2022 by Max

Welcome to our guide to pivot tables, this guide was a request by a follower, feel free to make a similar request if there is a topic you would like a guide on.

What are pivot tables?

A pivot table allows you to view data like a ‘pick and mix. It enables you to easily select data using different headings from your main data table and place the data in rows or columns. You can then also filter. Changing the layout of a pivot table is far quicker than setting up new spreadsheets each time and without the need to change the raw data. You can also keep creating new pivot tables with differing layouts from the same data.

What does the pivot mean?

The “pivot” in the pivot table just means that you can move the data around to change how you see it. This is what allows you to sort and organize the data.

How to make our own pivot table

To make our table we will first need some data to work on, you can use your own or the provided set of data of some of the top books in 2020.

Download our practice sheet here.

DataSheet Download

You are advised to check file integrity before opening, this can be done by uploading the file to VirusTotal and checking the returned hash matches the below a7486b3dc0cd5506a2a7343c518655ff37e21441a369b61f01b1e98693ebaf76 or by using your own software to scan the file.

With the data added to excel it should look like the below.

Our next step is to insert a pivot table. Click on the data in the table or select the entire table. Next click on the Insert Tab, click PivotTable.

With this pop-up, you can change the data, but by default, it should automatically select the entire table, so just click Ok.

Upon clicking Ok the screen will update. Do not worry, you have not lost your data, you will notice that you are now working on a separate sheet. You should also see the PivotTable Fields display.

This may look confusing or scary but don’t worry, we will go through it.

PivotTable Fields

At the top we have our column headers from the table we created, now we can drag these to the boxes below to reorganize our pivot table.

The four boxes will change the display of our table, to understand what will change we need to know what each box does.

Rows

The field you place in rows will most commonly be the data you want to stay present on the screen. In my case I wanted to work with all the books based on their names, which means I put “Name” in the Rows box.

To add data to boxes, you can either click or drag the field into a box, I prefer to drag as it offers more control.

With “Name” now added we can see that the table has been updated to show our book names.

Filters

This box as the name suggests will filter our data based on the item we place inside of it. If we happened to place “Model” inside, we would now have a filter that can either be “Hardback” or “Paperback”. Below is an example of me filtering the books.

Columns

Columns are where we can place a field to have it displayed across the top of our table. Using “Author” now we can provide more helpful data to our table. This would result in our author’s names shown across the top.

Values

In the values column we can have excel display data within the table we have now made. Excel will also automatically sum any data that appears more than once within our set filters. (Example further below)

Naturally, with these being books, the clear choice to display is the price. Go ahead now and drag “Price” to the Values box and see what happens.

You should have something that now looks like this.

Not only is our table now showing us the price of each book, but it has also given us the grand total for all our books that are paperbacks (Remember that we set a filter). Now try playing around with the filter. You should see that setting it to all or hardbacks will automatically pull the correct data and display it clearly for you to see.

Feel free to play around and change what is in each box to see what happens, the best way to learn is to practice using a test dataset like this. Very soon you will find yourself an expert at pivot tables.

Summing Data

As we mentioned above, excel will also automatically sum any data that appears more than once. This can be especially helpful in large datasets where things with the same name need to be totaled together.

To try this out we are going to go back to our original table, you can do this by clicking onto the other excel sheet. Next, we are going to duplicate the item on the bottom row, your data should now look like the following.

We now need to update our pivot table to see this new data.

Back on the pivot table sheet, Click on your table, and then click PivotTable Analyze, Change Data Source.

Have you noticed the change?

If you said the Grand Total has increased, well done. The pivot table has detected that we have two of the same book and has added their prices together to show this.

PivotTable Charts

We will now very quickly look at Pivot Table charts, these charts will mimic our filters/rows/columns and prices in their display and as a result, make it very easy to show clear relationships in data.

To make a chart using the data, once again Click on your PivotTable and then go to PivotTable Analyze and finally PivotChart. PivotChart will automatically tell you what tables are possible based on the data we have entered. We are going to select Column and Clustered Column for our table.

Press OK and there we have it, a nicely displayed table showing off all of our products and their prices based on the filter settings.

To progress further, try changing the filters or repeat the guide with your own set of data.

Customise your Spotify, with Spicetify

January 29, 2022 by Max

If you are as addicted to listening to music as I am, chances are you have used or still use Spotify. Spotify is a brilliant app but unfortunately, I could never get on with its UI.

Then I discovered Spicetify.

What is Spicetify?

Spicetify is a command-line interface that allows you to completely overhaul Spotify, from themes to even new features I was blown away by how stunning Spotify can look, one thing for sure is on any new PC I’m definitely downloading Spicetify.

How to install Spicetify

First things first you need to make sure you are running the Spotify desktop app and not the windows store version. Then you can install Spicetify easily using PowerShell.

Open PowerShell and paste the following command.

Invoke-WebRequest -UseBasicParsing "https://raw.githubusercontent.com/khanhas/spicetify-cli/master/install.ps1" | Invoke-Expression

This will install Spicetify onto your system from its master branch on GitHub.
Optionally, if you also want access to Spicetify’s marketplace run this command.

Invoke-WebRequest -UseBasicParsing "https://raw.githubusercontent.com/CharlieS1103/spicetify-marketplace/master/install.ps1" | Invoke-Expression

Set up Spicetify

Now Spicetify is installed we can move onto the setup stage.

Type the following into PowerShell

spicetify

This makes Spicetify find your Spotify install and generates the config file.

spicetify backup apply enable-devtool

This applies the default theme and also enables dev tools for you.

If all you wanted was to install Spicetify, congrats you have finished, enjoy your new Spotify client.

My Favorites

If you installed Spicetify marketplace then you will now notice on the Spotify client there is a new button, this is the marketplace, it allows the installation of tons of themes and extensions from a single click.

Here are some of my favorites.

Themes

Dribbblish Dynamic

This theme is my personal favorite and the one I currently use, it overhauls almost all areas of Spotify, providing crisp colour changes on each new song, rounded edges, folder, and playlist icons, it really has it all. You can view its GitHub page here.

Extensions

Play Next

Play Next is an extension that provides a feature that really should have been in Spotify from the beginning, it allows you to directly add a song to the top of your play queue, nothing more to be said, it’s brilliant. You can view its GitHub here.

Hide Podcasts

If like me you use other apps for your podcasts, or you simply don’t want to see them on Spotify this is the extension for you. It removes all traces of Podcasts on Spotify, so much that you’ll forget that they were ever offered. View its GitHub page here.

Summary

Overall this was but a glimpse into what is offered by Spicetify but I hope I’ve shown you enough to convince you. Give it a try and get customising, who knows maybe you could even publish your own theme or extension.

How to schedule emails in Outlook

January 28, 2022 by Max

If you want to convince your boss that you are working late or at night or active extremely early in the morning you might want to learn how to schedule your emails in Outlook.

Outlook is a powerful tool if mastered, today we are looking at email schedules and delays, this will allow you to write, send an email and have it arrive at its destination at a time or at your choosing.

Scheduling a single email

Setting this up is actually very easy, simply begin composing your email as normal and once finished instead of sending go to your ribbon and click on the small arrow in the tags section.

From here you should then see the following menu.

Now click the box Do not deliver before and select the date and time for the email to be sent.

Cancelling or changing a scheduled email

If you suddenly need to change the email and it has not been sent yet, then you are in luck.

Go to your Outbox and select the email you sent.

Now if you simply want to delete the email, you can go ahead and delete it. To change the email, open it up and append your changes. To change its delivery schedule, follow the steps above on setting the time and update the content box with your new desired delivery date.

Delaying all emails

If you wish to delay all the emails you send by up to 2 hours you can apply this very quickly.

Start by clicking Rules and then Manage Rules and Alerts

From here next, select the email account you want to put the delay onto and then press New Rule.

Select Apply rules on messages I send and press next.

If you want to you can configure conditions to trigger this rule, if not click Next.

The last step is to defer delivery by a number of minutes, tick the box and click on the blue “a number of text” and input the amount of time you want to delay messages by.

If you do not want any more conditions, click finish.

Remember to cancel this delay, you can return to Manage rules and alerts and disable it from there.