teleren/devto huggingface dataset:
How to create a text gradient with tailwindcss
Tags: tailwindcss, css, html, webdev
Published: 2023-01-04 10:10:06

Text gradients can be a useful and visually appealing element of modern UI design, as they can add depth and interest to text and help it stand out on the page. However, it's important to use them sparingly and in a way that complements the overall design of your interface. Overuse of text gradients or using them in a way that is hard to read or not harmonious with the rest of the design can negatively impact the user experience.

In general, it's a good idea to consider the readability and legibility of your text when using gradients or other decorative effects. If the text is difficult to read or understand, it will not matter how visually appealing the gradient is.

Overall, text gradients can be a useful tool in modern UI design when used judiciously and in a way that enhances the user experience.

In this article, we'll cover how to create a gradient title using Tailwind CSS utilities.


## First create a `h1` tag and give it a content

```
<h1>Gradient title</h1>
```
After creating a title, let's add some utilities to change our `h1` size and weight :

```
<h1 class="text-5xl font-bold">Gradient title</h1>
```


## Add `bg-clip-text` utility

The `bg-clip-text` utility refers to the background-clip property in CSS, it determines the area within which the background color or image of an element is applied. It is used to clip the background image or color of an element and needs the content `text` to paint the background to our title or any other text.

```
<h1 class="text-5xl font-bold bg-clip-text">Gradient title</h1>
```
After that, add `text-transparent` so that only the background will be applied as text color.

```
<h1 class="text-5xl font-bold bg-clip-text text-transparent">Gradient title</h1>
```


## Add gradient

Your result should be blank right now as we added `text-transparent` class, Now we need to add gradient background utilities to our title to see our gradient applied as text color.

```
<h1 class="text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-purple-500">Gradient title</h1>
```

Now our title should look like :

![tailus text gradient](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v3dbbyzt11sgvzg7tkw3.png)

You can add your brand's colors to make it fit with the rest of your UI elements.
CollectionView
Published: 2023-01-04 09:56:14

CollectionView is an object that presents the ordered collection of data items in the customizable layouts. It shows the data in the form of a grid layout. A collectionview is an instance of the UICollectionView class, which inherits the UIScrollView
The data associated with the collection view is treated as the individual items which can be grouped into the sections to be represented into a grid layout on the iPhone screen. The UICollectionView is used in most of the iOS applications


**Methods:**

**dequeueReusableCell(withReuseIdentifier:for:)**
    is used to dequeue a reusable cell for a given index path. This method will either create a new cell or reuse an existing cell that is no longer visible, depending on whether or not a cell is already available for reuse.

**register(_:forCellWithReuseIdentifier:)**
    is used to register a class or nib file for use in creating new cells.

**reloadData()**
    is used to reload all of the data in the collection view, which causes the collection view to discard any existing cells and create new ones based on the current data.

**Layouts**

UICollectionViewFlowLayout is the default layout for a collection view, it arranges the items in a grid with optional header and footer views
UICollectionViewCompositionalLayout: Introduced in iOS13, it allow to create complex layouts using smaller composition layout units
UICollectionViewLayout is an abstract base class that you can subclass to create your own custom layouts.
It is necessary to set the layout for the collection view by assigning an instance of a UICollectionViewLayout subclass to the collection view's collectionViewLayout property.

You can customize the layout using properties such as itemSize, minimumLineSpacing, minimumInteritemSpacing, etc..

There is also the possibility to apply different layouts using setCollectionViewLayout(_:animated:), this allow to apply different layouts without reload the entire data.
Salesforce Marketing Cloud – A Comprehensive Guide
Tags: salesforce, marketingcloud, informationtechnology
Published: 2023-01-04 09:50:02

Salesforce Marketing Cloud is a digital marketing platform that helps businesses create and deliver personalized marketing campaigns across various channels, including email, social media, and mobile. The platform is designed to help businesses build meaningful relationships with their customers through targeted and relevant marketing efforts, and it can be integrated with other Salesforce products and external systems to enable seamless communication and collaboration across an organization. Read our latest blog on [Salesforce Marketing Cloud – A Comprehensive Guide](https://www.innovadeltech.com/salesforce-marketing-cloud-a-comprehensive-guide/) for insightful information.
$$$$ saving Azure features in 2022
Tags: azure, aks, beginners, azurecost
Published: 2023-01-04 09:41:14

Last year, there's a lot going on in the world of Azure.
But the questions we hear are always/always/always about how much we spend $$$$, here are few services which gave me some cost-saving opportunities at the invoice.

## AKS

- **Scale-down Mode** removes the need to pre-provision nodes and pre-pull container images, saving you cost.
{% embed https://learn.microsoft.com/en-us/azure/aks/scale-down-mode %}

- **AKS node pool start/stop** feature allows you to completely stop specific user node pools and pick up later where you left off with a switch of a button.
{% embed https://learn.microsoft.com/en-us/azure/aks/start-stop-nodepools %}


## Compute

- VMSS containing both Spot VMs and standard VMs.
{% embed https://techcommunity.microsoft.com/t5/azure-compute-blog/now-in-preview-spot-priority-mix-for-azure-virtual-machine-scale/ba-p/3650300 %}

- Spot VMs support in Azure Batch
{% embed https://learn.microsoft.com/en-us/azure/batch/batch-spot-vms %}

## Cosmos DB

- Autoscaling RU/s starts from 100, previously it's 400.

- serverless container storage limit increase to 1TB.
{% embed https://learn.microsoft.com/en-us/azure/cosmos-db/serverless %}

## Machine learning

- Automatically shuts down inactive compute instances.
{% embed https://learn.microsoft.com/en-us/azure/machine-learning/how-to-create-manage-compute-instance?tabs=python#configure-auto-stop-preview %}

## Analytics

- Stream Analytics jobs now support native autoscaling.
{% embed https://learn.microsoft.com/en-us/azure/stream-analytics/stream-analytics-autoscale %}

- Azure Databricks SQL Serverless.
{% embed https://learn.microsoft.com/en-us/azure/databricks/sql/admin/serverless %}


## Networking

- Azure Firewall introduced a Basic tier.

![features of basic](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cl8i3ebt6xc3jsxpjoko.png)
![types of sku](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a2woylyfs3uy34stwl5s.png)




## Azure Backup

- Azure Backup added support for zone-redundant storage.

With the zone-redundant storage (ZRS) vault, the backups replicate synchronously across three availability zones in a region. It enables you to perform successful restores and recover your data even if a zone goes down.

## Storage

- Azure Storage added the ability to create an additional 5000 storage accounts per subscription 

- New Premium SSD v2 disk storage.


`share your cost saving experience`
Deploy a WordPress page using AWS CloudFormation
Tags: aws, cloud, awscommunity, 100daysofcloud
Published: 2023-01-04 09:33:54

[4/100] #100DaysOfCloud Today, I deployed a WordPress page using AWS CloudFormation.

<u>AWS CloudFormation :</u>

- AWS CloudFormation gives you an easy way to model a collection of related AWS and third-party resources, provision them quickly and consistently, and manage them throughout their lifecycles, by treating infrastructure as code. A CloudFormation template describes your desired resources and their dependencies so you can launch and configure them together as a stack. You can use a template to create, update, and delete an entire stack as a single unit, as often as you need to, instead of managing resources individually. You can manage and provision stacks across multiple AWS accounts and AWS Regions.

- CloudFormation allows you to model your entire cloud environment in text files. You can use open-source declarative languages, such as JSON or YAML, to describe what AWS resources you want to create and configure. If you prefer to design visually, you can use AWS CloudFormation Designer to help you get started with AWS CloudFormation templates.

<u>Use cases :</u>

- Manage infrastructure with DevOps :
    - Automate, test, and deploy infrastructure templates with continuous integration and delivery (CI/CD) automations.

- Scale production stacks :
   - Run anything from a single Amazon Elastic Compute Cloud (EC2) instance to a complex multi-region application.

- Share best practices :
   - Define an Amazon Virtual Private Cloud (VPC) subnet or provisioning services like AWS OpsWorks or Amazon Elastic Container Service (ECS) with ease.

You can try to deploy a WordPress page using CloudFormation yourself by following the steps from the link below :
[GitHub](https://github.com/aaditunni/100DaysOfCloud/tree/main/Journey/004)
What are the Recent Techniques to Build a Website?
Tags: webdev, javascript, programming, html
Published: 2023-01-04 09:33:12

In this part, you can check the multiple ways to develop a website. Commonly, in three ways a website can be developed. 

1.**Low-code and No-code Platforms** - These are the latest advanced level of drag and drop methods of development. There is no need for technical knowledge to develop a website with this kind of tool. Wix and Godaddy are the best examples of low-code and no-code platforms. 

But the website which is developed by these tools couldn’t do complex tasks and interactions. Using these tools is only preferred for developing a static personal blog like a resume, or any others.

2.**Mid-Level Platforms** - It is a platform that has high-level tools to create a website better than the low-code and no-code platforms. It needs very little technical knowledge to build a website with this kind of tool. WordPress, Drupal, and Joomla are examples of this kind. 

Through these tools, you can develop a website with a moderate level of performance. So, it is recommended for developing a secondary website for your small business. However, the primary website should be developed with a more advanced method.

3.**Website Development from Scratch** - It is the high-end website development method. In this method, the website is developed from scratch. So that you’ll get a custom web solution that is tailor-made for your business. Through this, you can include the payment gateway integration to build an e-commerce website. 

To choose the third method of the website development process, you have to find the best [website development and design company](https://www.uplogictech.com/web-app-development-company).
How to trigger useQuery with a button click - React Query
Tags: react, javascript, nextjs
Published: 2023-01-04 09:23:05

A recent site visitor asked me how to trigger useQuery when they click on a button and I pulled up an example that I use.

By default, useQuery fetches immediately when the component calling it mounts, but not everyone wants this behaviour.

## Method 1: Enabled Boolean

You're able to set the default behaviour to NOT fetch data immediately using a key enabled and setting it to false
```js
  const { data } = useQuery("comments", fetchComments, {
    enabled: false
  });
```
If we want to use a button to trigger this we can maintain a piece of state that holds true or false and then pass the setEnabled method to a button.

On click, the query will fetch the data.
```js
  const [enabled, setEnabled] = useState(false);

  const { data } = useQuery("comments", fetchComments, {
    enabled: enabled
  });

<button onClick={() => setEnabled(true)}>Some Button</button>
```
## Method 2: Refetch()

My preferred method is to use refetch . This is a method that comes with useQuery and is closer to the functionality many of us are looking for in this scenario.

The data is not fetched automatically. We have turned it off using enabled: false .

We can then pass the refetch method to our button to grab the data on demand without toggling any state.
```js
export const useComments = () => {
  const { data, refetch } = useQuery("comments", fetchComments, {
    enabled: false
  });

<button onClick={() => refetch()}>Some Button</button>
```
Top 5 React Native UI Libraries
Tags: reactnative, mobile, programming, tutorial
Published: 2023-01-04 09:09:58

Let's begin the React Native Picture...

My last react native application has millions of downloads, check it out here, [Coinswitch](https://coinswitch.co/)


React Native is a cross-platform framework that helps to develop a mobile application using javascript and the so-called JS framework React Native. It is similar to React in functionality and under-the-hood logic, with one more addition of layer called JS bridge which helps this hybrid code to conversate with native code written in (especially used in mobile devices).

Today we will be covering the simple list of top UI libraries that helps you to build the whole application without struggling with basic styling and functionalities.

## 1. React Native Elements —

[Link](https://reactnativeelements.com/)

This library has 20K Github stars with more than 25 components to support. Their community is also decent in size and current issues in progress/raised were 30 plus.

## 2. React Native Paper-
[Link](https://callstack.github.io/react-native-paper/1.0/index.html)
This library has 7.8K stars on Github and provides more than 30 components support. This library is hight extensible and easy to integrate. No extra layering is required to integrate it with bare React-Native or with managed Expo.

## 3. React NativeBase

[Link](https://nativebase.io/)

They have 14K Github stars and doing pretty well in the market so far, their blog section is very helpful in developing all types of products, features, and animations in React Native.

[Blog](https://blog.nativebase.io/)

## 4. React Native UI kitten
[Link](https://akveo.github.io/react-native-ui-kitten/)

This library has 8K stars but the components Demo on the website is quite compelling. They divide every component on the basis of its requirements, for example, we generally need buttons, radio and toggle when we need some data from the user so these components are categorised under the Forms section and so on.

## 5. React Native Material Kit
[Link](http://rnmk.xinthink.com/)
This library has 4.5K stars, but its set of components with the Ripple effect like Material Design provides comprehending experience to the users. In addition, they are aiming to provide the same UI experience in mobile devices and desktop applications.

## Conclusion
I've just released Perfect React Native Roadmap Template, have a look and get the template, I am sure it will certainly help you to learn react-native.


![React Native Roadmap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uw6bjsvrtkgcw6m914ws.png)

Have a look

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ejf8um0icnsf5o3fxf88.gif)

[Check the template](https://shreyvijayvargiya.gumroad.com/l/react-native-roadmap?layout=profile)

Until next time, have a good day & Keep developing
Shrey
[iHateReading](ihatereading.in)
apt-file: which deb package to install to get X?
Tags: apt, aptfile, debian
Published: 2023-01-04 09:05:29

You need to get file X (e.g. hugo), what package to install?

Long time ago, I got used to visit [packages.debian.org](https://packages.debian.org/), scroll down to second search form "Search the contents of packages" and search there.

It's much easier to search with apt-file right from CLI:
Install:

```bash
apt install apt-file
apt-file update
```

Now search:
```
$ apt-file search hugo
fish-common: /usr/share/fish/completions/hugo.fish
gargoyle-free: /usr/lib/gargoyle/hugo
hugo: /usr/bin/hugo
hugo: /usr/share/bash-completion/completions/hugo
hugo: /usr/share/doc/hugo/changelog.Debian.amd64.gz
...
```

but if we will search for 'gcc', we will find 170000+ results because apt-find looks for substring match. (and 30k results for 'mc' substring). We should use `-x`/`--regexp` search:
```
$ apt-file -x search bin/gcc$
gcc: /usr/bin/gcc                         
icecc: /usr/lib/icecc/bin/gcc
nvidia-cuda-toolkit: /usr/lib/nvidia-cuda-toolkit/bin/gcc
pentium-builder: /usr/bin/gcc
```
Discover the New Digital Healthcare Innovation Technologies in Medical Industry
Published: 2023-01-04 09:05:23

[Medigy](https://www.medigy.com/) is leading voice of the digital health therapeutics innovation community and originators of the innovation lifecycle ontology. The Healthcare Delivery Organization (HDO) Innovation Lifecycle Ontology (ILO) is an effort to create a standard framework of shared language that can be adopted by innovoator practitioners to win at innovation.
Top 10 Skills A Front-end Developer Must Have In 2023
Published: 2023-01-04 08:37:58

As a front-end developer, it's important to constantly update and improve your skills in order to stay competitive in the job market. Here are the top 10 skills that a front-end developer should have in 2023:

- HTML and CSS: These are the foundations of front-end development and are essential for any developer working on the web.

- JavaScript: JavaScript is the most widely used programming language on the web and is essential for creating interactive and dynamic websites.

- Responsive design: With the increasing use of mobile devices, it's important for front-end developers to have a strong understanding of responsive design and be able to build websites that work well on different devices.

- Cross-browser compatibility: It's important for websites to look and function the same across all modern browsers, so front-end developers should have a good understanding of how to ensure compatibility.

- Version control: Knowing how to use version control systems like Git is crucial for any developer, as it allows for collaboration and the ability to track changes to code.

- Debugging: Front-end developers should be able to identify and fix bugs in their code quickly and efficiently.

- Performance optimization: With the increasing importance of page load times, front-end developers should know how to optimize the performance of their websites.

- Security: Front-end developers should be aware of common security threats and know how to prevent them in their projects.

- Accessibility: It's important for websites to be accessible to users with disabilities, so front-end developers should have a good understanding of accessibility standards and how to implement them.

- User experience (UX) design: A strong understanding of UX design principles can help front-end developers create intuitive and user-friendly websites.

By mastering these skills, front-end developers will be well-prepared to tackle any project that comes their way in 2023 and beyond.
AWS CloudWatch Dashboard Builder - Namespace Template
Tags: aws, opensource, monitoring, productivity
Published: 2023-01-04 09:03:30

This is the second post in the CloudWatch Dashboard Builder series. In this post, I'll walk you through the Namespace query template, which is the foundation for the AWS CloudWatch Dashboard Builder tool

The namespace query template defines the metric queries for different AWS services. SQL expressions can be used in metric queries. Examples of queries with and without a SQL expression are provided below.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gw9juh97tm4g2a7fvr8m.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lf6qdpoatmst3wtg673g.png)

As long as a naming standard is followed, the namespace template can be customized to match your needs. Certain keywords must be retained when modifying or creating a new namespace template for usage with the Cloudwatch dashboard builder tool. 

The root object of the namespace template is called "**_cloudwatch_template_**" and it is a keyword. Under the root object, you can have multiple child objects, which are called namespaces. Each namespace object has a "**_schema_**" name and different "**_templates_**". Templates are the unique queries for the namespace. The template contains three keys:

- **name:** Name of the template. This name is used as the widget title in the Cloudwatch dashboard.
- **desc:** A short description of the template. Tells what the query template does, reports or measures.
- **query:** A query that will be executed in Cloudwatch to report on the metrics of the namespace. 

The namespace template is located in the template folder. _For queries that have double quotes in them, they will need to be **escaped** for the query to work correctly. So special care needs to be taken when updating or creating the template._

Here is another example of a complex namespace template.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kv5banhafyj5bq9xu5p5.png)

Now that you're familiar with the Namespace template, we can go on to the last post, which explains how to use the tool.
AWS CloudWatch Dashboard Builder - Tool For SRE, Performance Engineers and DevOps
Tags: aws, opensource, monitoring, productivity
Published: 2023-01-04 09:03:16

This is a three-part series. The first post gives background on why I developed the tool, and later posts explain how to use it.

For over five years, I have been using the AWS CloudWatch service for monitoring and troubleshooting application performance. Over that period, I have developed different Cloudwatch metric queries to help me quickly create CloudWatch dashboards or widgets for AWS services.

In the beginning, I used to write these queries in a notepad. From time to time, I would refer them to create a CloudWatch dashboard or widget if I needed them for a new project, client, or application. Also, occasionally, I lacked access to CloudWatch, so I had to ask a colleague to create a widget or dashboard. Before requesting them, I had to transform the query into JSON format. These reasons led me to create a tool for building CloudWatch dashboards.

The CloudWatch Dashboard Builder tool generates a JSON dashboard template with different metric queries. Queries can include SQL expressions as metrics. You can directly create the dashboard or copy the JSON and create it via the AWS Console/CLI.

The flexibility of this tool stems from the fact that it is powered by a namespace query template that you can change to meet your requirements. Next post in the series will explore Namespace template into more detail.

Here is a video showing how to use the tool to generate a dashboard or how to use the JSON to construct a dashboard using the CLI or AWS Console. 

{% embed https://youtu.be/tPCHCc-GiHM %}

The benefits of this tool are:

1. Capability to choose different metric templates for different AWS Namespaces or a custom Namespaces.

2. Saves time in building the right CloudWatch dashboard for your needs.

3. You can directly create the dashboard from the tool or generate the dashboard JSON.

4. You can enhance the Namespace Query template by including your metric queries.

In next post we will explore namespace template. It will explain how to use it correctly with your own CloudWatch metric expressions.