Adventure
I do adventure racing, bicycle touring and hiking
When to Use Components vs. Writing Code
In the ever-evolving world of software development, the choice between using pre-built components and crafting your code from scratch is a common dilemma. Thanks to the Node Package Manager (NPM), we have a treasure trove of libraries and components at our disposal. However, the question remains: when should you employ a component, and when should you roll up your sleeves and write your own code? Let’s explore this decision-making process to help you find the right balance for your projects.
The DIY Approach: Writing Your Own Code
Writing code from scratch can be a rewarding endeavor. It gives you complete control over your application’s logic and behavior. Here are some scenarios where opting for a custom solution might be your best bet:
1. Simplicity and Control
If you understand the full scope of the code required and it’s relatively simple to implement, it often makes sense to write it yourself. This approach can minimize the final amount of code used in your application. By crafting your code, you have complete control and can tailor it to your specific needs without the baggage of unnecessary features.
2. Customization
When your project demands a high level of customization that may not be readily available in existing libraries, writing your code becomes a compelling choice. Tailoring your solution ensures that it fits seamlessly into your application’s architecture.
3. Learning and Skill Development
Writing code from scratch offers a valuable learning experience. It allows you to delve deep into the mechanics of programming and helps improve your problem-solving skills. If you’re aiming to enhance your development skills, writing your code can be an excellent exercise.
Leveraging Libraries: When to Use Components
When considering whether to use pre-built components and libraries, it’s essential to recognize that many of these tools are developed and maintained by specialists in the field. These experts have honed their skills in tackling complex tasks and have poured their knowledge into creating these libraries. Here’s why you should consider relying on these expertly crafted resources:
1. Expertise and Specialization
Libraries and components are often developed by experienced developers who specialize in specific domains. For example, when it comes to data fetching and management in a React application, the React-Query library is an excellent choice. The developers behind React-Query have spent countless hours fine-tuning it to handle complex scenarios, such as caching, pagination, and background data synchronization. By using React-Query, you benefit from the expertise of these specialists and can tap into their solutions for common challenges.
2. Maintenance and Updates
One of the significant advantages of relying on established libraries is the ongoing maintenance and updates provided by the open-source community. Libraries like React-Query receive regular updates, bug fixes, and security patches. This means that your application can stay current with the latest best practices and security standards without requiring constant manual intervention.
3. Community Support
Popular libraries often have vibrant communities of developers who contribute to forums, provide documentation, and share their experiences. This wealth of community support can be invaluable when you encounter issues or need guidance. You’re not alone in troubleshooting problems or implementing complex features – the collective knowledge of the community is there to assist you.
4. Time Efficiency
Leveraging libraries can significantly accelerate your development process. Instead of investing considerable time and effort in building complex functionalities from scratch, you can integrate a well-established library into your project. This time efficiency can be a game-changer, especially when working on tight deadlines or large-scale applications.
5. Reducing Error Risk
Writing complex code from scratch increases the risk of errors and bugs. Specialized libraries, on the other hand, are thoroughly tested by both their creators and the community. This extensive testing helps identify and rectify issues, making it less likely for your application to encounter unexpected problems.
Conclusion
In the world of software development, the choice between using components and writing your code depends on the specific requirements of your project. The key is finding the right balance. If you can fully grasp the scope of your code and it aligns with your project’s simplicity and customization needs, writing your code can be a rewarding and efficient choice. However, when tackling more complex tasks or leveraging standardized functionality, leaning on libraries and components can save you time, reduce potential errors, and provide tested solutions.
In summary, when considering whether to use components and libraries, it’s important to recognize that these tools are not just pieces of code; they represent the collective knowledge and expertise of developers who specialize in solving complex problems. By embracing libraries like React-Query, you can harness the power of specialization, benefit from ongoing maintenance, tap into community support, save time, reduce error risk, and ultimately deliver more robust and efficient software solutions to your users. It’s a strategic choice that can elevate the quality and efficiency of your development projects.
Ultimately, your decision should consider factors like project complexity, time constraints, and your familiarity with the task at hand. The beauty of modern development is the wealth of options available. So, whether you’re writing your code or embracing pre-built components, remember that the goal is to create robust and efficient applications that meet your users’ needs.
AI Art
AI art refers to the creation of visual art using artificial intelligence algorithms. The use of AI algorithms in creating art has generated a lot of discussion and debate in the art world, with one of the critical questions being whether AI will replace artists.
When it comes to what makes art good, is it the technique used to create the artwork or the ability to lay out the scene, characters, and items in a pleasing way? Both of these elements are important in creating successful artwork, but there is a growing consensus that the composition of the work is what makes it truly good.
Artists have a unique ability to understand what makes a composition pleasing to the eye. They have a deep understanding of color theory, balance, and proportion. They can create compositions that evoke emotions and tell a story. In contrast, AI algorithms can create art that is technically sound, but it often lacks the emotional depth and narrative that artists can bring to their work.
I don’t beleive AI art will replace artists. While AI algorithms can be used to create visually stunning artwork, they lack the emotional depth and narrative that artists can bring to their work. Artists will always excel in knowing what makes a pleasing composition, and their skills and expertise cannot be replicated by machines.
So, AI art is an exciting development in the world of art (and AI), but it should not be seen as a replacement for artists. Artists will always play a crucial role in the creation of art that evokes emotions and tells a story. The unique abilities of artists will always be essential in creating truly great artwork.
AI is a Tool, like any other
Artificial Intelligence (AI) is becoming an increasingly important tool in the modern world of writing, changing the way articles are written and published. However, just like any other tool, its use is often the subject of debate. In this article, we’ll explore the role of AI as a tool in article writing, and why we don’t need to make a fuss about its use.
First, let’s consider the argument that people need to be aware of the limitations of AI and understand how it’s being used to influence their decisions. This is a valid concern, but it’s not unique to AI. The same argument could be made for any tool that’s used in article writing, such as Microsoft Word or the pen or pencil used to write the article.
When we write an article, for example, it’s not necessary to announce the make of pen or pencil used, or the software used to format the manuscript. The same applies to AI. If we’re using AI to help us write an article, it’s not necessary to make a big deal about it. The most important thing is the content of the article itself, not the tools used to create it.
Another argument is that AI is more powerful than other tools and therefore, it’s important to be aware of its limitations. While it’s true that AI is a powerful tool, it’s still just a tool. It’s not making decisions on its own, but instead, it’s being used by people to make decisions. The limitations of AI should be considered in the same way as the limitations of any other tool.
Finally, it’s worth noting that the use of AI can lead to increased efficiency and effectiveness in article writing. Just like any other tool, AI can be used to automate repetitive tasks, freeing up time for more valuable work. AI can also help us to analyze data and make better decisions, making our writing more accurate and effective.
AI is just another tool in the world of writing, and its use should not be cause for concern. The most important thing is how the tool is being used, not whether or not it’s AI.
ChatGPT by OpenAI
ChatGPT and GPT-3 by OpenAI,are trained AI models and can generate text on various topics, including answers to education homework. Through my observations, I have come to the conclusion that it’s time for us to rethink the way we approach AI in education.
Traditionally, the focus in education has been on teaching children how to perform specific tasks, such as writing an essay or solving a math problem. While these skills are important, they don’t necessarily prepare students for the future. In an era where AI is becoming increasingly prevalent, it’s crucial that we teach children how to think, not just what to do.
One of the main reasons for this shift is that AI has the potential to automate many of the tasks that students are currently taught to do. In the near future, machines may be able to write essays and solve math problems faster and more accurately than humans. This means that the skills that students are learning today may become obsolete in the future.
Instead of teaching students how to do specific tasks, we should be teaching them how to think critically and creatively. These are skills that are unlikely to be automated by AI and will become increasingly valuable as technology continues to advance. By teaching children how to think, we are preparing them for a future in which they can adapt and thrive, no matter what changes come their way.
In addition to being future-proof, teaching children how to think also has numerous other benefits. It helps them to develop problem-solving skills, encourages creativity and innovation, and promotes independent thinking. These are all skills that are essential in the modern world and will help students to succeed in any field they choose to pursue.
It is time we embrace the exciting potential of AI in education, it’s crucial that we rethink our approach. Instead of teaching children how to do specific tasks, we should be teaching them how to think. By doing so, we are preparing them for a future in which they can thrive and succeed, no matter what changes come their way.
(Yes, most of this post was written by AI)
A new Adventure
Time for my next adventure!
I will be leaving South Africa today to start full time employment with Imagine Learning in the United States. I will be working as a remote Software Engineer creating, maintaining and delivering educational software (I’ll be specializing in front end development with React).
As a remote employee I can work from anywhere and I plan to regularly come and visit South Africa and move between the different State in the USA to see as much as I can. Initially I will not be buying a car, instead I will be travelling by bicycle in each area I visit.
This trip will be to Phoenix Arizona (head office of Imaging Learning) where I will be meeting many of my team mates while we do a hackathon week. This trip will only be 6 weeks so that I can come home for Christmas. I am planning to go to Florida next (in January).
I will be posting pictures and notes on the Whatsapp group I previously used for my Tour Divide trip (if you would like to be on the group to see my adventures send me a private message and I will add you 🙂 )
Http 301
Interviews are sometimes very interesting as they can point out where you are missing some key information in what you know. In an interview last week I was asked how I would redirect a browser to a new URL.
I immediately suggested using a page with a redirect imbedded using JavaScript – I’ve done this a few times :). The interviewer then gave a hint of status codes…..
I know all about HTTP status codes (2?? = success, 3?? = redirect, 4?? client error, 5?? server side error). And I have used a number of the 200, 400 and 500 errors. So I knew that code 300s was for redirect but I had never actually used them to do so.
I spent some time over the weekend just working out how to do a redirect using 301 – Permanently moved – just because I had never done it before….
So here is how to do it in PHP
http_response_code(301);
header(“HTTP/1.1 301 Moved Permanently”);
header(“Location: “.$newurl);
Really Simple Svelte Routing
Routing is a key feature on any web page, routing is used to display content to the user based on selections the user makes, for example when selecting a menu option. There are many routing components available but sometimes a very simple routing option is needed and the routing components with all their features may be overkill.
This tutorial will show you a very simple way to add routing into a Svelte single page app. The functionality for the routing is all in one file. In this tutorial we will place it in the main page, but it could easily be extracted out of the main page into it’s own component.
Create Project
To start with lets create a simple Svelte project using one of the base templates. We will be changing all the content on the page but this is the easiest way to get a Svelte project started and running.
Create Svelte project from a simple Svelte template
npx degit sveltejs/template svelte-spa-router
Install dependencies
npm i
Start the application
npm run dev
Page Layout
Our page layout is going to be a simple two column layout with the menu in the left hand column and the right hand column will be used to display the content for the menu option chosen. A CSS framework could be used for the columns, but for this tutorial we will stay with custom CSS classes instead of creating a dependency on a third part library.
In the App.svelte page add the following styles. Svelte allows styles to be applied per component.
<style
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.column {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
}
</style>>
Now that we have the styles for a 2 column layout lets create the html for the page. Initially the 2 columns will just display simple headers, but we will replace these later as we build our routes.
Replace all the HTML
<main <div class="row"> <div class="column"> <h1>Menu</h1> </div> <div class="column"> <h1>Content</h1> </div> </div> </main>>
If you are running the development server you should now see the two column display with the headers.
Create a Menu
Let us add a menu in the left hand column using anchor links, replace the text in the first column with our menu
<h1>Menu</h1 <a href="#home">Home</a> <a href="#red">Red Page</a> <a href="#green">Green Page</a>>
This menu uses Location hashes to define the page to be display. When the user click s a menu option the page URL will update to include the hash value. We will then get the hash value from the URL, and based on the selected menu option we will display the relevant page
Get the menu selection
To get the menu selection we need to get the page from the current page.
<script let page = document.location.hash; </script>>
This will extract the page hash from the URL, but we also need to get the page whenever it changes such as when the user selects a menu option
window.onpopstate = function(event) {
page = document.location.hash;
};
Now the current location hash is in our page variable both when the user accesses our page with an existing hash value (such as from a bookmark) and when the user clicks one of the menu options.
Add the Routing
Based on the page variable we now want to change the content in the right hand pane based on the page that was selected. Replace the Content column contents with this script
{#if page==="#home"
Home Page
{:else if page === "#red"}
Red page
{:else if page === "#green"}
Green page
{:else}
404: Page not Found
{/if}}
In the else section we can choose to show whatever page we want to show. In the example above we show an error page, we could have easily shown the home page, maybe even passing a property through to indicate to the user that the request ed page does not exist
Now when you click on the menu options the content on the right will change to display the selected content. At the moment the content is just a simple text string but could be replaced by another component.
Creating the Red Page
To show that routing can be triggered from anywhere we can add a hash link on any page and the routing will still pick it up.
Create a new component called red.svelte. Add the following to the component
<div
<h1>This is the Red page</h1>
<a href=”#green”>Change to Green Page</a>
</div>
<style>
div {
background: red;
color: white;
}
</style>>
Now replace the “Red page” text in the main page with <Red /> (remember to import the red page into the file).
Now choosing red from the menu will diaply the red page content, and from the red page selecting the option to change t the green page will display the green page, as though the green menu option was selected.
Source code available on Github: ReallySimpleSvelteRouting
Mainframe to Cloud – a short history
To understand Cloud technologies we need to understand the older technologies. Cloud is often considered an evolution of existing technologies rather than a brand new technology and start building software in a cloud-first view, rather than how it compares to older technologies. But, as the cloud evolved from older architectures the comparison will always remain.
So a short history lesson:
In the beginning was the mainframe, a single large computing hub, with terminals (screen and keyboard) that were distributed where people sat and did their work. While it looked like people were doing work at a computer at their desk the computer was actually in the computer room and they were working on what was termed a dumb terminal as it had no processing capability of its own.
Then came personal computers which moved the processing to the desktop. Personal computers were often linked to a bigger computer in the backend but had processing capabilities of their own, CPU, memory, and storage. The personal computer originally had all the programs installed as applications on the device. These programs would then make network calls to a database sitting somewhere else that would answer queries that the application would display to the user. This was called client-server (client = desktop, server = database)
Client-server then evolved into a three-tier technology. Some of the processing that the desktop was doing was moved to a server, so the client application started displaying information to the user instead of processing the data, processing (and database access) was handled by the server layer. If this sounds similar to the web, in a way it was, but instead of using a browser you would have had a custom-built interface doing the display.
But, the internet and browsers were the next progression, where instead of installing a client on your machine you could just access the application through a web browser. Originally the web browser would access business applications installed on a web server within the companies own data center (the same data center where the mainframe used to live). The database was also hosted within the data center, so everything was on-premise managed by the companies own IT staff.
Now this is where the cloud comes in ????
Cloud providers started making the servers available in their own data centers and allowed other companies to buy access to the servers. The servers remained in the cloud providers’ ownership and companies rented them. The original servers were just the same as the servers that IT was installing in the data center so this was Infrastructure as a Service (IaaS).
But many companies did not want to worry about the installation of server software on the IaaS servers they were renting so the Cloud providers started doing the installation themselves and sold access to the software level for hosting applications rather than to the whole server, in other words, they started selling the platform for applications (PaaS).
Big software companies were still selling software to companies who were then installing the software either on-premise or at the cloud data center. But this still required the company to have its own IT team who understood the software. So many big software companies started selling the installation services as part of their offering so in fact, the customer was only buying the software pre-installed somewhere in the world (SaaS).
PaaS still linked the software developers were making to a specific platform. So, cloud providers started allowing the upload of just source code that could be run when required. These functions were therefore independent of a specific platform people had to rent and would run and be charged for only when used (Faas). The advent of FaaS has also started the term of ServerLess computing. ServerLess is the ability to write and deploy code without ever having to worry about the Infrastructure or Platform the application is running on. This allows developers to write code and load it to the cloud and the whole system works without anyone knowing where it is actually installed.
Cloud providers have now started making many other platforms available to companies. For example, containers can be run on the cloud, or machine learning training can be done in the cloud. Each of these becomes a new service and could be abbreviated to <X>aaS e.g. A.I.aaS or Containers as a service.
Cloud providers are continually adding new services. We have already run out of <X> letters for services and only a few are ‘official’ abbreviations anyway. As the cloud expands we will be provided with new services all the time, as IT professionals we need to be aware of as many services as possible, though it will be impossible to know them all.
Custom Bootstrap using Sass
I’ve known about SASS for a long time but never took the time to learn how to use it. For a new project (a University project) I wanted to use Bootstrap but also wanted custom colors on the website. Instead of creating my own CSS I decided to stick with Bootstrap but learnt to modify it for my own color palette.
The project is around COVID-19 and medical testing. As such I wanted to use a custom pallet of
Green representing Health
Blue standing for Medical personnel (Professions)
Yellow for Happiness
I spent some time working out how to achieve this in Bootstrap’s provided Scss files. It was so easy that I felt a bit of a fool that I had not learnt this earlier!
Prerequisites:
Before following this guide, you will need to have Nodejs with NPM installed.
To start lets create a webpage that displays some buttons using Bootstrap. Download boot into the web project (I downloaded Bootstrap sources from https://getbootstrap.com/docs/4.5/getting-started/download/ ). Unzip the sources into the webpage directory.
My HTMl file contains
<html> <head> <link rel="stylesheet" href=" bootstrap-4.5.3\dist\css bootstrap.css" /> </head> <body> <h1>Custom Bootstrap using Sass</h1> <span class="btn btn-primary">Primary</span> <span class="btn btn-secondary">Secondary</span> <span class="btn btn-danger">Danger</span> <span class="btn btn-health">Health</span> <span class="btn btn-prof">Prof</span> <span class="btn btn-happy">Happy</span> </body>
</html>
Which, when viewed in a browser looks like:
A standard looking Bootstrap example of buttons. The last 3 buttons have classes that do not exist so just get ignored and the standard class=”btn” is used for them.
To start customizing the Bootstrap css we need to install the sass compiler. Using NPM run the following command
npm install -g sass
This installs SASS globally so we can run it from any project. Now I can start customizing boostrap to meet my requirements. First I modify the _variables.scss file found in the bootstrap scss folder. Before I get to custom colors, I’ll just change the primary color to check that my configuration is working correctly:
For my test I am going to change the primary color to red instead of the normal Bootstrap blue.
Change line 67 to
$primary: $red !default;
Save the file and now I can compile the Scss into css. In the terminal I run
sass C:\projects\Sass1\bootstrap-4.5.3\scss\bootstrap.scss C:\projects\Sass1\bootstrap-4.5.3\dist\css\bootstrap.css
This command overwrites the originally downloaded CSS file. You could instead place the output file anywhere, for example in a \css directory in your project
Now refresh the web page
We have effectively changed all *-primary classes to be red.
How about creating our own button classes. Would it not be easier to use class btn-happy for a yellow button instead of trying to remember if the primary or secondary is yellow.
In _variables.scss add the following lines after $dark (at line 75).
$health: $green; $prof: $blue;
$happy: $yellow;
In theme-colors in the section below add
"health": $health, "prof": $prof,
"happy": $happy
So that theme-colors looks like
$theme-colors: () !default; $theme-colors: map-merge( ( "primary": $primary, "secondary": $secondary, "success": $success, "info": $info, "warning": $warning, "danger": $danger, "light": $light, "dark": $dark, "health": $health, "prof": $prof, "happy": $happy ), $theme-colors
);
Save the changes and compile Scss to css again
When I refresh the web page I can see my custom colored buttons, using my own class names.
I now have buttons with my custom colors. In fact all the Bootstrap components that use the color pallet are now customized. To show this I can display an alert
<div class="alert alert-happy mt-5" role="alert"> A simple Happy alert—check it out!
</div>
When we refresh the page:
Note also how the compilation process did the same color modulation of yellow to fit the color to suit the other alert colors.
Personally, I like the Bootstrap color theme. But being able to modify it to suit my own requirements makes it a lot easier to customize and use wherever I need it. For the website I am designing I don’t have Primary and Secondary colors. I have three primary colors called Health, Prof and Happy.