Curiosita Labs

Thoughts on programming, web development and design.

Circuit Board

Category: Programming Page 1 of 26

Programming

Why you need to use software customizations

By

On June 30, 2024

In Programming

Software needs to be adaptable. Not all software has everything that you need to make it work for your business. It should provide you with tools for modifying the software to fit your unique business needs. Business needs change. Your software should be able to change with your needs.

How do you make your software adapt to you needs?

You make your software adapt by customizing it. Software customizations range from simple adjustments to more complex updates and connections. You customize by tweaking settings, adding new or missing features, changing how things work or linking with other tools. The three ways to customize software are configuration, extension and customization.

How do you define configuration, extension and customization?

  • Configuration: A set of finite choices that you make to control the behavior of the software. You may tweak settings, change branding options and add items that are unique to your business.
  • Extension: You decide to add third-party products (plug-ins, apps or extensions) to your software. These products extend the functionality of the software by implementing features that don’t natively exist in the software.
  • Customizing: You may write your own extension to fit your business needs. You choose to do this because you can’t find an app that does what you needs. Or an existing app no longer does what you need it to do. Many software vendors provide you with tools like APIs so you may add what’s missing from their software.

Staying adaptable with software customizations

Too many customizations can affect performance of your software. You need to pick the right type and amount of customizations for your business needs. You stay adaptable by maintaining your software with updates. Review all configurations, extensions and customizations every year. Technology changes quickly. You’ll need to adapt to these changes.

Making an Advice Generator

By

On November 30, 2022

In Design, Programming, Web Development

Have you tried a coding challenge? Coding challenges allow you to stretch you programming and design skills. You have your choice of places to find coding challenges.

Making an Advice Generator

Image by Dean Moriarty from Pixabay

You can pick coding challenges that ask you to build components or a simple app. Some of the challenges include working with an API.

Advice Generator

The Advice Generator coding challenge on Frontend Mentor has you working with an API. This API provides you with data for displaying advice on a web page.

Screenshot of Advice Generator with Advice #100: Everybody makes mistakes.

How I Built It

I created this app using HTML, CSS and JavaScript. For CSS, I started with Bootstrap to help structure the design. Then, I used FlexBox to manage the layout.

Fetching Data

I used the JavaScript Fetch API to fetch the data from the Advice Slip JSON API and display it on a web page. By default, it picks a piece of advice and displays it. If you want to get another piece of advice, you need to click the dice icon. This icon button retrieves a random piece of advice.

If you don’t use the cache option of no-cache, you get the small piece of advice. When you call the API which returns a random piece of advice, it doesn’t display on the web page. It is caching the data. When you use the no-cache option, fetch retrieves a random piece of advice.

Design Challenges

The layout required centering the advice box and the dice icon for the button. To handle this, I used FlexBox to center the box and to align the button on top of the bottom of the box. You need to use a combination of absolute positioning and FlexBox to get the dice to appear where you want it.

The advice box needs to be flexible. It has to expand and contract depending on the size of the advice. FlexBox makes this easier.

Other Coding Challenges

Getting Started With Web Components

By

On August 31, 2022

In Programming, Web Development

Everyone has their favorite tools, languages and JavaScript frameworks. JavaScript frameworks allow you to create components. Which you can reuse throughout your apps. What if you can’t use a specific framework? You can use Vanilla JavaScript to build web components.

Geting Started With Web Components

Photo by Pixabay from Pexels

What are web components?

Web components are a set of web technologies that allow you to create custom reusable HTML elements. These elements are not dependent on using a specific framework. You can use them without having to load a framework like React or Angular.

To build a web component, you can use these three technologies:

  • Custom Elements: A JavaScript API that allows you to create custom elements which you can use like HTML tags.
  • Shadow DOM: The Shadow DOM API provides a way to attach a hidden and separate Document Object Model to a web component. This keeps your component’s HTML, CSS and JavaScript separate from the rest of the web page.
  • HTML Templates: Use HTML tags <template> and <slot> to hold HTML that doesn’t display when the page loads. You load it with JavaScript at a later time.

Can I use web components in a JavaScript framework?

Yes. You can use your component in whatever JavaScript framework you want or none at all. If you need to switch to a new framework, you don’t have to rewrite your web component. Learn how to get started with building a web components.

Want to create your own components?

Check out these tools and resources for building your own web components.

Want to learn more?

You can learn more from the Web Components Community and Web Components.

Why Use a Coding Style Guide

By

On July 31, 2022

In Programming, Web Development

What is a coding style? It is the way your code looks. The way you learned how to code, the tools and languages that influenced your personal style. Your style is influence by the many decisions that you make while writing code. If you work on a team, the team has its own standards that also influence how you write code.

Code is the way you communicate with other developers. To make sure that your code is understandable to other, you need to focus on writing code that is consistent and readable.

How do you make your code understandable?

Consistency

Pick a way of writing and organizing your code. You’ll want to decide:

  • Tabs or spaces for indentation
  • A naming convention for variables and functions
  • How much white space you are going to use

If you have trouble deciding, look at coding style guides for suggestions.

Python Coding Style Guide

Readability

Code is written for both computers and people to read. You want your code to communicate what it does. Remember, you won’t always be the person maintaining your code. You want your code to be readable and maintainable by your future self or another developer.

What can you do to make your code readable?

  • Pick a coding style guide for the language that you are using and follow it. By following it, you can focus on writing the code not formatting it.
  • Use meaningful naming conventions and comments. Check out How to Comment Your Code like a Pro.
  • Format and layout your code with white space.
  • Use tools to help manage your code. Tools like JSHint, Prettier, or W3C Validator

Whether you are working alone or on a team, using a coding style guide can help you be more productive as a developer. Remember, you aren’t writing code for the computer but for yourself and others.

DevTools Tips and More

By

On June 30, 2022

In Programming, Web Development

What are browser dev tools?
Your web browser has a suite of developer tools. You can use these tools to analyze problems, edit CSS and debug issues with JavaScript.

DevTools Tips and More

Debugging can be a slow and challenging. If you use Chrome to develop, you may find that you can’t use the same tool in another browser. This can be frustrating when solving problems.

Can I DevTools?

Can I DevTools is a website by Pankaj Parashar that is similar to Can I use? It shows and compares dev tools. You can quickly see if a browser supports the dev tool you need.

More DevTools Tips

DevTools has many useful features and shortcuts. It is hard to learn them all. Start with DevTools Debugging Tips and Shortcuts to learn some of the useful features for debugging in Chrome, Firefox, Edge and Safari.

If you want to know how to do something in DevTools, check out DevToolsTips. You’ll find tips on how to empty the cache and do a hard reset, copy and elements style and debug unwanted scrollbars.

Browser DevTools Docs

Each browser has its own set of developer tools.

Page 1 of 26

Next

Powered by WordPress & Theme by Anders Norén