1stWebDesigner https://1stwebdesigner.com Helping You Build a Better Web Fri, 01 Apr 2022 19:24:27 +0000 en-US hourly 1 https://wordpress.org/?v=5.9.2 https://1stwebdesigner.com/wp-content/uploads/2020/01/1stwebdesigner-logo-2020-125x125.png 1stWebDesigner https://1stwebdesigner.com 32 32 Refactoring HTML and CSS https://1stwebdesigner.com/refactoring-html-and-css/ Mon, 04 Apr 2022 11:10:52 +0000 https://1stwebdesigner.com/?p=158209 This article was originally posted at https://christinatruong.medium.com/refactoring-html-and-css-69de73a5fb88 and was kindly shared by Christina Truong. Check out more of her work at https://christinatruong.com.

(Prefer to watch a video? This article is a companion piece to my Decoded by Christina series on YouTube.)

Refactoring is the process of rewriting and restructuring the code to improve the design of the code base. This practice can be applied to any language but this article will focus on HTML and CSS. When refactoring, here are some goals to keep in mind:

Rewrite to reduce complexity. It’s easy to fall into the trap of over-engineering, especially when you’ve just learn a cool new trick. But try to keep in mind to only add what you need.

Make it reusable. Being able to reuse snippets of code means less code overall and more consistency.

Think about how you can make it flexible. This can help to make it easier to reuse and extend features by adding onto existing code snippets.

Make the code easy to read. Use whitespace, indentation and comments for organization. Show your intent by using descriptive class names and comments. Write your code as if you are writing it for someone else to understand. And in some cases you probably are! And even if you are only writing it for yourself, it’s not unusual to come back to a project months later and feel like you have to re-familiarize yourself with the codebase again.

Let’s take a look at some ways to refactor HTML and CSS.

Reduce HTML markup

Something that happens often when adding content and styles to our web projects is inadvertently using too much HTML markup. For example, the <div> element is often used to group or wrap elements to add CSS to them. But it’s not always necessary to throw a <div> around the element that needs to be styled. Every HTML element is its own box and can be styled. In this example, the CSS style will look the same whether you add it to the <h1> element or its container element.

Refactoring HTML and CSS

Refactoring HTML

Create rules for writing CSS

rules for writing CSS

I always start with the base CSS, which are styles that are applied globally. Then add more specific styles as needed. When I say global CSS, I’m referring to the styles that are applied to all or most of the elements on the page, such as the font-family, defining font colors, general margin and padding styles and font sizes. These global styles are applied to the basic type selectors such as body, headings and links. Then get more specific as needed by applying styles using CSS classes. Even then, start with the more generic class styles like page wrappers and page layout styles.

writing CSS

As the project progresses, CSS styles can be added into related groupings such as the header and footer or specific page content, to keep things organized and easy to find.

more CSS

and more CSS

Reduce repetitive code

Combining selectors

Combining selectors

Create reusable classes

Create reusable classes

inheritable CSS styles

Reduce CSS specificity

Reduce CSS specificity

See the Pen
Reduce specificity
by Christina Truong (@christinatruong)
on CodePen.0

Reduce CSS specificity

Do you need to select links, in a “submenu,” in a nav? If so, then use:

If you need to select only links in a “submenu” that specifically uses an ordered list, then use:

But if you just need all the links in any submenu, use the most direct and simple way to get there:

This Week In Web Design – April 1, 2022 https://1stwebdesigner.com/this-week-in-web-design-april-1-2022/ Fri, 01 Apr 2022 16:34:36 +0000 https://1stwebdesigner.com/?p=158181 Provide Your Customers With Accurate Nutrition Data via Edaman’s Nutrition Analysis API https://1stwebdesigner.com/provide-your-customers-with-accurate-nutrition-data-via-edamans-nutrition-analysis-api/ Tue, 22 Mar 2022 13:00:17 +0000 https://1stwebdesigner.com/?p=158134 Now more than ever, engaging in a healthy lifestyle is important to people across the planet. But it’s easier said than done. In the past, finding accurate nutrition data simply wasn’t possible. The good news is that there are modern

Now more than ever, engaging in a healthy lifestyle is important to people across the planet. But it’s easier said than done. In the past, finding accurate nutrition data simply wasn’t possible. The good news is that there are modern solutions. 

Nowadays, when it comes to generating food recipes with detailed nutritional information, there’s no one you can trust more than Edamam – the leading provider of nutrition data and analytics. Whether you’re a food blogger, restaurateur, or web developer who can make a pretty yummy ratatouille; Edamam’s Nutrition Analysis API can provide you with nutritional facts in under a second! 

So, if you’re looking for an API that is capable of full recipe nutrition analysis and has a robust natural language processing engine that allows entity extraction combined with food database search; you’re in the right place! 

edamam screenshot

3 Key Features of Edamam’s Nutrition Analysis API

  • Full Recipe Nutrition Analysis
  • Text Analysis
  • Structured Data and Nutrition Data Output

Full Recipe Nutrition Analysis in Less Than a Second!

When users submit the full text of their favorite recipes or any list of ingredients, Edamam’s Nutrition Analysis API extracts the complete nutrition and ingredient data from the text. With its ability to process recipes in under a second, Edamam saves users hours of entering recipes line by line!

Why is this important, you ask? Well, think about it for a moment. If users have hundreds or thousands of recipes to analyze, Edamam’s Nutrition Analysis API can help establish an efficient and productive workflow that uses a fraction of the time as manual entry methods. 


Whether the end-user is a developer using Edamam’s API to submit recipes on behalf of a food blog or food-based e-commerce site or a nonprofit organization that needs accurate health, diet, and allergy labeling; Edamam can help!

Text Analysis

Edamam’s natural language processing engine is robust – not to mention it is incredibly effective. Built with nutrition analysis in mind, this API allows users to extract food-named entities from text with ease. And, it gets better! Edamam also allows combined entity extraction with a food database search to get users the best results possible. Not clear what we mean by that? Let us explain.

In a nutshell, when text is submitted by users and entities are extracted, Edamam searches its database for additional food matches to the extracted entities – leave no stone or scone left unturned! 


Structured Data and Nutrition Data Output

When users input data, Edamam returns detailed information for each ingredient line. For food items such as flour, sesame seeds, eggs, guavas, milk, etc; Edamam returns caloric information as well as data about carbohydrates, protein, sodium levels, etc – reporting a total of 28 macro and micronutrients to users. 

Additionally, all food nutrient data includes diet, allergy, and health labeling that Edamam calculates based on a recipe’s ingredients. Dietary labels such as vegan, paleo, gluten-free and dairy-free are among the 90+ health labels that Edamam can generate automatically. 

edamam api demo



Edamam is an affordable solution for those who need to aggregate large amounts of data on food and nutrition. With accessibility in mind, Edamam provides free recipe nutrition analysis and text analysis with its basic plan geared towards developers, startups, and non-profit organizations. This free-of-charge Developer tier includes food and quantity extraction, as well as the ability to analyze up to 400 recipes per month and submit 10 recipes per minute. However, there are limitations on data caching and reduced text analysis hits compared to Edamam’s Enterprise Core tier. 

For Enterprise Core users, there is a subscription fee of $49 per month, which includes data caching for four nutrients (protein, net carbs, total fat, kcal), the ability to analyze up to 50,000 recipes monthly, and 150 recipe submissions per minute. Want more than that? You got it! Edamam’s Enterprise Core tier even offers 100,000 text analysis hits a month and shopping aisle food labeling. 

Need to take it a step further? Want data caching for more than four nutrients? What about unlimited recipe analysis, text analysis, and recipe submissions? For those who want complete access to all that Edamam offers, the Enterprise Unlimited tier is for you!

The key difference between the Enterprise Core and Enterprise Unlimited plans is that the latter has no restrictions. It is truly unlimited and tailored to the user’s needs. For those who wish to unlock an all-access pass to Edamam – get in touch with their team to customize your API experience. 



No matter which Edamam Nutrition Analysis API plan you select, all users can enjoy the benefits of natural language processing, food and quantity extraction, health, diet, allergy labeling, commercial use, and support from the team at Edamam. So, if you’re looking for a solution to providing accurate nutritional information to your customers, Edamam is the best choice! Access it today from APILayer, a hassle-free API marketplace. 


This Week In Web Design – March 18, 2022 https://1stwebdesigner.com/this-week-in-web-design-march-18-2022/ Fri, 18 Mar 2022 17:11:55 +0000 https://1stwebdesigner.com/?p=158140 Sencha Ext JS: The Most Secure, Fastest, and Full-Featured JavaScript Grid Library https://1stwebdesigner.com/sencha-ext-js-most-secure-fastest-full-featured-javascript-grid-library/ Tue, 15 Mar 2022 12:00:41 +0000 https://1stwebdesigner.com/?p=158123 Does your team require a robust grid that can handle millions of records? When it comes to incredibly fast data processing, Sencha Ext JS is the solution! With its ability to load and manipulate large data sets within milliseconds, Sencha

Does your team require a robust grid that can handle millions of records? When it comes to incredibly fast data processing, Sencha Ext JS is the solution! With its ability to load and manipulate large data sets within milliseconds, Sencha can handle your most data-intensive inputs without any problems. 

Don’t believe us? According to our research, 60% of Fortune 100 Companies trust Sencha with their data! And, the reason why is clear – Sencha Ext JS offers the most secure and feature-rich JavaScript grid library on the market. 


5 Key Features of Sencha

  • Users have full customization control. 
  • Sencha’s high-performing grid can handle massive amounts of data. 
  • Built to handle data, Sencha Ext JS offers an advanced feature set that includes filtering, grouping, infinite scrolling, pagination, live data streaming, and more!
  • Users can export data to CSV, TSV, HTML, XLS, and PDF file formats.
  • Sencha Ext JS has been pre-tested across a wide range of browsers and platforms (for web, mobile, and desktop).

Sencha Top Grid features


Sencha Ext JS offers potential users the opportunity to demo top grid features such as row and column operations, data import/export, and widget integration, directly on their website. If users like what they see, they can sign up for a 30-day trial, free of charge. 

For those ready to commit to Sencha as the go-to grid library, there are perpetual license and annual subscription options – both broken down into the community, enterprise, and professional editions.

The pricing starts with a free tier for the community edition, which has significantly fewer features but offers a way to get started with building data-intensive, cross-platform web applications. The enterprise and professional editions vary in price, both exceeding $1,200 per developer and offering 140+ components – which include Ext JS Framework, Open Tooling, Architect, Themer, IDE Plugins, and many more!


Your data is important. Sencha Ext JS can help you manage your large data sets with full control. And its grid library can even handle data requests from local or remote data sources through Ajax, JSON, RESTful methods; making it perfect for individual developers and teams alike. 


This Week In Web Design – March 11, 2022 https://1stwebdesigner.com/this-week-in-web-design-march-11-2022/ Fri, 11 Mar 2022 16:36:18 +0000 https://1stwebdesigner.com/?p=158092 A Simple Guide To Quickly Adding File Uploads To Your App With Filestack https://1stwebdesigner.com/a-simple-guide-to-quickly-adding-file-uploads-to-your-app-with-filestack/ Wed, 09 Mar 2022 19:26:13 +0000 https://1stwebdesigner.com/?p=158084 Do you need to give your users the ability to upload files in your application? Are you looking for a simple and quick way to dramatically improve the user experience for file uploading, allowing users to not only upload directly from their hard drive but also integrated with the most popular social networks like Facebook or Instagram, commonly used storage solutions like Dropbox or Google Drive, and stock image providers like Unsplash? If so, Filestack is the ultimate solution for you!

In  this post, we will take a look at what Filestack can do to make file uploading work for your users in the best possible ways and how easy it is for you to set up in less than an hour.

Why is file upload important?

File uploads are essential for user productivity and many business services and applications, such as content management systems, healthcare portals, insurance websites, and messaging applications. Especially in this day and age of remote and distanced working, it is increasingly critical to ensure the security and ease of file uploads in order to provide the best user experience as well as protect against malicious actors.

For example, consider community-driven platforms such as social media websites and apps, where content is primarily user-generated. In these applications it is crucial to be able to manage the large numbers of uploads that users will be producing.

Another example would be for businesses that use internal collaboration systems for their employees. In this case, employees often need to support the uploading, sharing, and downloading of files. The easier the upload system is to use, the less training and help the employees will need to accomplish their work throughout the day, saving time and resources.

In all instances, files that are uploaded need to be analyzed for potential viruses or other malicious programs. So the method through which files are uploaded is extremely important!

What makes Filestack special?

Filestack provides users an “all-in-one” experience for uploading files anywhere and easily with a 99.99% success rate. Utilizing their powerful yet simple-to-use API, uploads, URL ingestion, and device integration are all made fast and easy. With as little as two lines of code, you can dramatically improve the look and performance of your file uploader, using the same upload technology that the internet giants use without the struggle of having to maintain it.

In a nutshell, here are some of the standout features of Filestack:

  • Filestack provides a beautiful and customizable file uploader UI that make a file upload from any source painless and intuitive.
  • The UI allows your users to upload files using drag and drop, copy and paste, or searching the computer’s hard drive.
  • Users can connect to a multitude of popular services such as Facebook, Instagram, Google Drive, Dropbox, and more, to upload files directly.
  • Users can also connect to their device cameras to instantly upload photos, videos, and audio files.
  • Custom connections and integrations can also be created to broaden your users’ options even more.
  • Once the file is selected, Filestack automatically generates a preview for the user to review.
  • Filestack’s advanced infrastructure uploads files as much as almost four times faster than standard interfaces.

How to add file uploads to your app!

Filestack’s documentation is extensive yet easy to navigate, understand, and implement. Here, we will give a brief rundown of how easy it is to get started.

Sign up for an account

You can start with a free plan to try it out, which allows 500 uploads, 1GB of storage, and 1GB of bandwidth per month. From there, pricing plans range from $59 to $359 per month.

Create an application and API keys

Once your account is created, access your Developer portal and create an application. Each application is given a public and a secret API key, each of which is used to authenticate and authorize operations on your resources. Each application has configuration settings that apply only to it, allowing you to assign specific settings for each of your use cases.

Set up the File Picker

Start by including the JavaScript SDK UMD module in your code:

<script src="//static.filestackapi.com/filestack-js/3.x.x/filestack.min.js"></script>

Configure the client with your API key:

const client = filestack.init(YOUR_API_KEY);

That’s it! It’s that simple! Of course, there are a variety of configurations you can add to your setup, but the default settings are quick and easy. For further information you can check out the documentation here.

Using the SDK with different languages

Filestack has client-side and server side SDKs, so you can use your language and application of choice. Choose from client-side apps such as JavaScript, React, Angular, Adaptive, and Swift, as well as server side languages such as Python, Ruby, Ruby on Rails, Go, PHP, and Java. More information can be found here.

Try Filestack in your next project

As you can see, it’s obvious why Filestack is the #1 developer service for file uploads. Not only is it the best service available, but Filestack will upgrade your user experience, security, and more, all in a quick, affordable, and easy to set up solution. While we can not recommend it enough, only you can decide what will work best for you and your projects, so be sure to check it out here next time you are working on a project that requires file uploads.

This Week In Web Design – March 4, 2022 https://1stwebdesigner.com/this-week-in-web-design-march-4-2022/ Fri, 04 Mar 2022 16:23:59 +0000 https://1stwebdesigner.com/?p=158057 This Week In Web Design – February 25, 2022 https://1stwebdesigner.com/this-week-in-web-design-february-25-2022/ Fri, 25 Feb 2022 17:04:06 +0000 https://1stwebdesigner.com/?p=158026 This Week In Web Design – February 18, 2022 https://1stwebdesigner.com/this-week-in-web-design-february-18-2022/ Fri, 18 Feb 2022 16:21:35 +0000 https://1stwebdesigner.com/?p=158000