teleren/devto huggingface dataset:
JavaScript topics to understand before moving to JavaScript libraies
Published: 2023-05-16 19:27:15

Before diving into JavaScript libraries, it's important for beginners to have a solid understanding of the core JavaScript concepts and fundamentals. Here are some key topics you should familiarize yourself with:

___

## 1) Variables and Data Types: 
Understand how to declare variables, work with different data types (strings, numbers, booleans), and perform basic operations.

___

## 2) Functions: 
Learn how to create and use functions, including parameters, return values, and function expressions.

___

## 3) Control Flow: 
Understand conditional statements (if/else, switch), loops (for, while), and how to control the flow of your program.

___

## 4) Arrays: 
Familiarize yourself with arrays, their properties, and methods for manipulation (e.g., push, pop, splice).

___

## 5) Objects: 
Understand object-oriented programming concepts in JavaScript, including creating objects, accessing properties, and using methods.

___

## 6) DOM Manipulation: 
Learn how to interact with the Document Object Model (DOM) to manipulate HTML elements, modify content, and handle events.

___

## 7) Event Handling:
Understand how to handle user interactions and respond to events triggered by users or the browser.

___

## 8) Asynchronous JavaScript:
Explore asynchronous programming concepts such as callbacks, promises, and async/await to work with asynchronous tasks, such as making API requests.

___

## 9) Error Handling: 
Learn how to handle and manage errors in JavaScript using try/catch blocks and understanding common error types.

___

## 10) Modules: 
Familiarize yourself with JavaScript modules, which allow you to organize and reuse code, and understand how to import/export modules.

___

## Conclusion 

By gaining a strong foundation in these core JavaScript concepts, you'll be better prepared to grasp JavaScript libraries, as they often build upon these fundamentals. 



Remember to practice coding and work on small projects to reinforce your understanding.
Completing my first FrontEnd Mentor challenge!
Tags: frontend, html, css
Published: 2023-05-16 19:10:20

This challenge was relatively easy based on what I already know about HTML & CSS.
Styling this was pretty straight forward when it came to the fonts, font-sizes and the image. As well as keeping this responsive for desktop and mobile.

My process was to complete the layout before centering the design. Once it came to that did I hit my first speed bump.
Centering elements on a page seems to be a simple process however I've always had difficulty figuring it out. From using different methods like flexbox, grid and the famous absolute position.
I decided to use flexbox for this solution however in future projects I think I would try absolute positioning again to get a bit of a refresher and to challenge myself more.

Once I was done I had a look at my code again to clean it up and make it more efficient.
Overall this was a fun and quick project to build and I am looking forward to the next one.

What is your best case in centering elements on a page? I would love to know how and why you use a particular process to do so.

Happy coding everyone!
DevDan

Feel free to have a look

https://www.frontendmentor.io/solutions/qr-code-component-visual-studio-code-aswlf1Lcyy
Conditional Rendering in React
Tags: react, beginners, programming, tutorial
Published: 2023-05-16 19:08:53

## What is Conditional Rendering?

In React, once we have successfully compiled our components, as well as the subsequent elements we want to display on the webpage, we can add nifty effects onto those objects to determine if/what details we want to show.

To enact conditional rendering on a piece of information, we can use one of two methods: an "if" statement or a "ternary" operator.

By using these, we can swiftly change the state of our application, and in turn, affect the what is displayed on the page. Having laid the groundwork, let's dive right in.

## Conditional Rendering with "if"

For the purposes of this blog post, let's say we are showing a list of flowers. 

```
// db.json

{
  "flowers": [
    {
      "id": 1,
      "name": "Rose",
      "inBloom": true,
    },
    {
      "id": 2,
      "name": "Orchid",
      "inBloom": false,
    }
  ]
}
```

For each flower in our database, we are provided a boolean value to determine if that flower is in bloom or not. 

Since not every flower will be in bloom at the same time, we can conditionally render that information on the webpage using an "if".

```
function FlowerCard({flower}) {
  
  function inBloomFlower(flower){
     if(flower.inBloom === true){
       return "IN BLOOM :)"
     }
       return "NOT IN BLOOM :("
  }
  
  return (
    <div className="card">
      <h2>{flower.name}</h2>
      <img src={flower.image} alt={flower.name} />
      { inBloomFlower }
    </div>
  )
}

export default FlowerCard
```

By putting an "if" statement within a function outside of the return, we tell the program to read the value of each flower's inBloom key in the database. Based on what the program reads, it will determine what to insert into the rendered page. 

Therefore, on our webpage we will see the "rose" labeled as in bloom, and the orchid as not being in bloom. 

## Conditional Rendering with "Ternary" Operator

The other way we could achieve the same result is using the ternary operator. In this method, we can save ourselves the hassle of writing a new function outside of the return and can instead write everything we need in line. 

```
function FlowerCard({flower}) {
  
  return (
    <div className="card">
      <h2>{flower.name}</h2>
      <img src={flower.image} alt={flower.name} />
      { flower.inBloom ? 
          <h3> IN BLOOM :) </h3> 
        : 
          <h3> NOT IN BLOOM :( </h3> 
      }
    </div>
  )
}

export default FlowerCard
```
In this example, we turned what was previously an "if" statement into a "ternary". We're telling the program to read that same value of the inBloom key in the database. If it reads that key as 'true' is will return the value that precedes the colon, and if it reads it as false, it will return the value that succeeds it. 

I hope that this blog has helped the reader better understand the power of conditional rendering in react as well as the efficiency with which it can be enacted.
2023 State of the Java Ecosystem
Published: 2023-05-16 19:07:05

Hi, devs! 


**We at New Relic published our [2023 State of the Java Ecosystem report](https://newrelic.com/resources/report/2023-state-of-the-java-ecosystem?utm_source=devto&utm_medium=community&utm_campaign=amer-fy-24-q1-devto_updates)!**

We have been monitoring the Java ecosystem for the past few years to uncover shifts in how it is being used due to new version releases and the rise of containers. 

The 2023 report provides context and insights into the current state of the Java ecosystem.

**The following categories were examined:**

- The most used Java versions in production
- The most popular JDK vendors
- The rise of containers
- The most common heap size configurations
- The most used garbage collection algorithms


**Highlights from the report:**

- Java 17 user adoption grew 430% in one year
- Java 14 is the most popular non-LTS version
- Amazon is now the most popular JDK vendor
- Containers rule everything around us



**👀 Check out the report [here](https://newrelic.com/resources/report/2023-state-of-the-java-ecosystem?utm_source=devto&utm_medium=community&utm_campaign=amer-fy-24-q1-devto_updates).**
Laboratory table | Gd Waldner
Published: 2023-05-16 18:47:24

A [laboratory table](https://www.gdwaldner.com/products/laboratory-furniture/url) is a vital piece of equipment in any laboratory setting. It is a flat surface that is used to carry out experiments, conduct research, and analyze samples. Laboratory tables are typically made from materials such as stainless steel, laminates, or epoxy resin, and can range in size from small, portable tables to large, permanent workstations.

Laboratory tables are designed to be durable and easy to clean to ensure that they remain free of contaminants. Stainless steel is a popular choice for laboratory tables because it is resistant to corrosion and is easy to sanitize. Epoxy resin and laminates are also popular choices because they are resistant to chemicals and scratches.

In addition to being made from durable materials, laboratory tables also come equipped with a variety of features to enhance their functionality. Many tables have built-in sinks and faucets for easy access to water, as well as storage space for laboratory equipment and supplies. Some tables also come equipped with electrical outlets, gas valves, and air outlets for powering lab equipment.

When selecting a laboratory table, it is important to consider the specific needs of the laboratory. For example, a microbiology lab may require a table with a built-in sterilizer, while a chemistry lab may need a table with built-in ventilation hoods to control fumes and gases.

In summary, laboratory tables are an essential component of any laboratory setting. They provide a durable and functional surface for conducting experiments, analyzing samples, and carrying out research. With a variety of materials and features to choose from, laboratory tables can be customized to meet the unique needs of any laboratory.
Introduction to AgensSQL
Tags: apacheage, postgressql, agenssql, database
Published: 2023-05-16 18:30:46

I recently started learning regarding AgensSQL, a powerful relational database management system (DBMS) built on PostgreSQL. With AgensSQL, I'm discovering efficient data management capabilities at my fingertips. 

AgensSQL prioritizes data security with features like password policies, data redaction, and auditing capabilities to ensure valuable information remains secure. 

AgensSQL offers a range of powerful features to enhance your data management experience:

1. Enhanced Security: AgensSQL prioritizes the protection of your data. With password policies, data redaction, and auditing capabilities, your valuable information remains secure.
2. High Availability: The Agens Enterprise Package includes Agens HA Manager (AHM), ensuring uninterrupted operations. AHM provides failover, failback, and load balancing capabilities for maximum availability and minimal downtime.
3. Data Sharding: When dealing with large datasets, AgensSQL's data sharding feature comes to the rescue. By distributing data across multiple databases, you can efficiently manage and analyze vast amounts of information.
4. User-Friendly Management: Agens Enterprise Manager (AEM) simplifies database management tasks. It offers a user-friendly interface for backups, audits, SQL monitoring, performance optimization, and scheduling, enabling easy control over your data operations.

Experience the power and efficiency of AgensSQL as it transforms your data management practices. With its enhanced security, high availability, data sharding, and user-friendly management tools, AgensSQL empowers you to make the most of your data.

Overall I am looking forward to exploring more about what this DBMS can offer us from an efficiency standpoint.

**Reference**
[https://bitnine.net/blog-agens-solution/blog-agenssql/announcing-launch-agenssql/?ckattempt=1](https://bitnine.net/blog-agens-solution/blog-agenssql/announcing-launch-agenssql/?ckattempt=1)
The Only "CSS Selectors" Tutorial You Will Ever Need🔥
Tags: webdev, css, beginners, tutorial
Published: 2023-05-16 18:28:52

👉 Being a developer, I understand the significance of CSS selectors. That's why I've crafted a handy cheat sheet to assist you in swiftly finding the perfect selector for your upcoming project.

👉 This cheat sheet encompasses the most commonly utilized selectors, including class, ID, attribute, descendant, and pseudo-class selectors. Each selector is accompanied by illustrative examples, enabling easy comprehension and application.

👉 Whether you're a novice or an experienced developer, this cheat sheet will save you valuable time and streamline your coding process.

👉 Don't hesitate any longer! Explore my "Selectors in CSS" cheat sheet and witness the transformation of your web pages into stunning masterpieces! 💻🎉


![descendent](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/31yfz2ikwnw18gnnriez.png)

![direct child](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/792kxb7lwonaxetuzvxg.png)

![general sibling](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x0jx8e6pqzlqusjieudv.png)

![adjacent sibling](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e0zvjulpjekvntobxcn6.png)

![or](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7acghnror8d1weqor0ng.png)

![and](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aw0iasqh2ywici6xmnqh.png)

![has](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0zsoh2mb7p88u4n1cm9b.png)

![exact](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m8o114vfg2x7xf7y9z9c.png)

![begins with](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/51zsweso026nfbr6em2s.png)

![ends with](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/przeymyftib3rp1tt78c.png)

![substring](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b3m6trj1zcte47yivcw2.png)

![before](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ryztcgz5ohs1bfeaomih.png)

![after](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ohbzsjy1677tkx6zp1r6.png)

![conclusion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6qdm4dqsup6xsvgfu5qf.png)

Do Like ❤️ & Share your feedback 🙌

**Visit**:
👨‍💻[My Portfolio](https://portfolio-khaki-iota-89.vercel.app/)
🏞️[My Fiverr](https://www.fiverr.com/sunnyislam990)
🌉[My Github](https://github.com/arafat4693)
🧙‍♂️[My LinkedIn](https://www.linkedin.com/in/arafat-freelancer)

Thanks for your support 💯
Find and Save New Fonts with the Google Fonts Explorer
Tags: design, html, css
Published: 2023-05-16 18:01:22

Font selection is a fun part of building a website or application, but it isn't always easy to find new and interesting fonts with a platform like Google Fonts.

There are **one thousand, five hundred and twenty-one** fonts in their collection!

So I decided to build a [Google Fonts Explorer](https://www.webase.com/google-fonts-explorer) to make it easy to find new fonts that I like.

Here's how I built it and what its key features are.

A full list of all of the Google fonts is [available via their api here] (https://developers.google.com/fonts/docs/developer_api) as JSON.

Load up the JSON in Javascript and render the available fonts in a list within a HTML page.

Using a JS framework like Vue or React you can easily display the list of available fonts.

Next let's write a handler that can load a font into the current page.

Add a click handler to each element that is responsible for rendering the font family.

Here's a couple Javascript functions that show how I did this:

```
injectFont(font) {
    let weights = this.availableWeights(font)
    let url = 'https://fonts.googleapis.com/css2?family=' + font.family + weights
    let link = document.createElement("link");
    link.href = url;
    link.rel = "stylesheet";
    document.getElementsByTagName("head")[0].appendChild(link);                
}

availableWeights(font) {
  let weights = font.variants.filter(variant => variant.indexOf('italic') < 0).join(';')
    weights = weights.replace('regular', '400')
    return `:wght@${weights}
}
```

This will make the font you click available to the current page by injecting the stylesheet link for the Google font into the head element of the page.

Lastly you can dynamically change the font of any element on the page with a bit of code like this:

```
const displayElements = document.querySelectorAll(".display-element");
displayElements.forEach((displayElement) => displayElement.style.fontFamily = selectedFont.family)
```

This is just a high-level overview of how you can build a Google Fonts Explorer.  If you are interested you can just view the full source on the page I linked to above to see all the gritty details!

The public version I linked to includes a few advanced features that make it super fast to explore fonts and save them.

You can use the filters and the up and down arrow keys to narrow down your search and then quickly iterate over them.

As you find fonts you like you can save your favorites (sign in required).

I hope you enjoyed the article and that you find the [Google Fonts Explorer](https://www.webase.com/google-fonts-explorer) useful.

Feel free to hit me with questions or feedback!
Leveraging Currying to Optimize React
Tags: react, webdev, javascript, tutorial
Published: 2023-05-16 17:51:20

## **Introduction:**

When working with forms in React, efficient and concise code is essential to improve readability and maintainability. In this article, we'll explore how [currying](https://javascript.info/currying-partials) can be used to optimize form handling in React components. We'll compare the initial implementation with the optimized version and discuss the benefits of using currying.

## **Initial Implementation**

Initially,we create separate event handler functions for each input field, resulting in repetitive code. While this approach works, it can lead to code duplication and reduced maintainability as the number of form fields increases.

```
import React, { useState } from 'react';

function App() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [notes, setNotes] = useState("");

  const handleNameChange = (e) => {
    setName(e.target.value);
  };

  const handleEmailChange = (e) => {
    setEmail(e.target.value);
  };

  const handleNotesChange = (e) => {
    setNotes(e.target.value);
  };

  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={handleNameChange}
        placeholder="Name"
      />
      <br />
      <input
        type="email"
        value={email}
        onChange={handleEmailChange}
        placeholder="Email"
      />
      <br />
      <textarea
        value={notes}
        onChange={handleNotesChange}
        placeholder="Notes"
      ></textarea>
    </div>
  );
}
```

## **Optimized Implementation with Currying**

To optimize the code, we can leverage currying to create a reusable event handler function. Currying allows us to generate specialized event handler functions on the fly by partially applying arguments. Here's the optimized implementation using currying:

```
// Optimized Implementation with Currying
// ...

const handleChange = (stateFunc) => (e) => {
  stateFunc(e.target.value);
};

// ...

<input
  type="text"
  value={name}
  onChange={handleChange(setName)}
  placeholder="Name"
/>

// ...
```
In the above, we define a single **handleChange** function that takes a **stateFunc** as an argument. This function returns a new function that is used as the onChange event handler for each input field. By **currying** the stateFunc, we create specialized event handlers for each input field without duplicating code.

Check Source Code [here](https://codesandbox.io/s/crazy-mccarthy-8bxujc?file=/src/App.js)

## **Benefits of Currying**

1. Code Reusability
2. Concise and Readable Code
3. Flexibility and Scalability

That's all, Bye & thanks
Connecting Node Js App to Azure MSSQL database. Part 3
Tags: cloud, azure, mssql
Published: 2023-05-16 17:47:07

Now its time to do the most exciting parts,connect our nodejs app to our database.


![connect](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rijpf6b5c3df3cr39cxz.png)

First, i set up a basic node js + express app then added typescript.

1.Make a project directory
```
mkdir myapp
```
2.Move into that directory

```
cd myapp
```
3.Create package.json file

```
npm init --yes

```
4.Use an express generator for the general app structure 

```
npm install -g express-generator-typescript
```
5.Next we need to get our connection credentials and connect to the database and make a query.
Here we have our config object which we shall use in our route file.


![credentials](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/meggjbg700fregd9ueao.png)


![route file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ivbv25wkydj0imxd29ca.png)


Here,i placed my credentials within an env file for security purposes.All needed credentials are 
- username
- password
- server name
- database name
- a port number

6.Next, in the routes i set up a query that is returned on loading the home page.And pass the data to the index.ejs page.
![on](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3afk7glrcptabg1at8av.png)


The index.ejs file then gets the data and populates the page.
![html](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6jj1r76y0oxj9j52u233.png)
For simplicity,the app.ts file has the basic running server and the db connection is basically done in the routes file.

So i did not make much use of the controllers to save time.
With this, we can now start our app with npm start.And voila the app data is seen.
![data](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zmw6t3jt8zf6j97jqwuk.png)

Next, i am thinking of deploying this as an app service.
Streamlining Client Reporting: How Agency Dashboard's SEO Reporting Tool Takes the Lead
Published: 2023-05-16 17:35:03

Managing client reporting for SEO can be a daunting task for any agency. With so many different metrics and data points to track, it can be difficult to provide clients with accurate and meaningful insights into their website's performance. That's why using a reliable and effective SEO reporting tool is essential for any agency looking to provide top-notch service to their clients. And when it comes to SEO reporting tools, the [Agency Dashboard's](https://agencydashboard.io/) SEO reporting tool stands out as the best option on the market.