teleren/devto huggingface dataset:
Animated Gauge / Progress
Tags: programming, opensource, mobile, reactnative
Published: 2023-03-31 15:42:02

We've been always struggling using gauge and progress to beautify our metrics in react-native. 

We were used to implement rough gauge components.

But then came a project where, you know, the designer just cracked and designed a complex gauge with gradient inside, we needed to link the gradient color with the progress. Such a mess.

**BUT** instead of trying to bring him back from his crazy ideas, we just took up the challenge.

Then we made a first implementation with `react-native-svg` which was great but not smooth enough and still miss some customizations such as : inner shadow.

And few days later, we heard about `@react-native/skia` which is react-native implementation of Skia.

We dropped `react-native-svg` in favor of `Skia`, we made the right choice as we seen a big performance improvement on the component. Beyond that, we were able also to implement incredible styles features as inner/outer shadow on the gauge.

We made sure that the gauge can also be used without fancy, shining effects. ( Like in the banner )

On our case we needed a heavily customized gauge like below :


![react-native-custom-gauge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n10ul14gr9ymd2kriysh.png)

And today we are happy to share with you the result of that super interesting journey : 

https://github.com/Winzana/rn-gauge
Test in PHP
Tags: php, test
Published: 2023-03-31 15:25:51

Hello guys,i do a mandatory internship at my university, and the professor put me to do test automation, but the programming language to be used is PHP. I had a course where I needed to learn how to use cypress, but I only did these tests in a javascript application, I would like to know if there is a way I can use cypress to run tests in php, including the database and the source code in itself. I've been researching and I saw that people use PHPUnit to do the tests in php, but I didn't find a lot of recent content (I don't know if I didn't know how to search) only old videos, so I don't know if I learn PHPUnit or look for another tool, or even continue with cypress. Also, if cypress works to run these tests, I would like to know if anyone recommends a course, video or documentation so that I can learn how to do my tests in php, use libraries to connect to the database, etc. etc..
Video: Accelerating Stable Diffusion Inference on Intel CPUs with Hugging Face
Tags: transformers, generativeai, deeplearning, hardware
Published: 2023-04-03 10:01:08

---
title: Video: Accelerating Stable Diffusion Inference on Intel CPUs with Hugging Face
published: true
date: 2023-03-31 15:20:55 UTC
tags: transformers,generativeai,deeplearning,hardware
canonical_url: https://julsimon.medium.com/video-accelerating-stable-diffusion-inference-on-intel-cpus-with-hugging-face-f545f20871da
---

In this video, you will learn how to accelerate image generation with an Intel Sapphire Rapids server. Using Stable Diffusion models, the Hugging Face Optimum Intel library and Intel OpenVINO, we’re going to cut inference latency from 36+ seconds to 4.5 seconds!

{% youtube KJDCGyZ2fPw %}
Essential SQL Commands for Data Science
Tags: sqlessential, datascience, sqlbasics, mysql
Published: 2023-03-31 14:45:54

![Essential SQL Commands for Data Science](https://www.simplilearn.com/ice9/free_resources_article_thumb/Concat_in_SQL.jpg)

**Structured Query Language**, or **SQL** as it is more commonly known, is a standardized language used to query or retrieve data from a relational database. Additionally, it can be used to modify the data in various ways, including filtering rows and columns and basic data manipulation. 

A *relational database* is a collection of clearly defined tables that enable data access, editing, updating, and other operations without requiring changes to the database tables themselves. Relational databases' standard (API) is SQL.

Returning to SQL programming, it is possible to use it to perform a variety of operations on data, including querying, inserting, updating, and deleting database records. MySQL Database, Oracle, and other relational databases are examples.
Basics of SQL To modify data tables, SQL provides a set of straightforward commands. Here are a few of these commands:

__Basics of SQL__
To modify data tables, SQL provides a set of straightforward commands. Here are a few of these commands:
CREATE DATABASE :This command creates a new database.
USE: The database is activated using this command. 
CREATE TABLE :This command creates a new table.
INSERT INTO command : adds new data to a database.
SELECT : pulls information out of a database.
UPDATE : Performs a database update.
DELETE : removes information from a database.
ALTER DATABASE : Changes a database.
ALTER TABLE : changes a table.
DROP TABLE : eliminates a table.
CREATE INDEX : creates a searchable index for an element.
DROP INDEX : Removes an index
Backend Developer Roadmap 2023
Tags: career, motivation, beginners, developer
Published: 2023-03-31 15:03:06

There is so much to learn as a software developer it can be difficult to work out where to start and what you should be learning. To help I have decided to put together a learning roadmap for backend developers. 

I have been a professional backend developer for over 12 years and this is my opinion of everything I think backend developers need to know. I have purposefully made this roadmap as language-agnostic as possible. With things like ChatGPT and GitHub Copilot, the language you use is becoming less important. I have included a few examples for C#, JavaScript and TypeScript which are the languages I would pick if I were to start all over again.

{% embed https://www.youtube.com/watch?v=CWAi_2oLhYg %}

<yt></yt>

The roadmap below is just a static image but I have created an [interactive version](https://www.alexhyett.com/backend-developer-roadmap/) on my website where you can click on each of the topics and learn more about them. I am going to be expanding this roadmap over time so make sure you bookmark it.

![Backend Developer Roadmap](https://res.cloudinary.com/dlgglwrvf/image/upload/v1679565161/backend_developer_roadmap_fa16bb19d9.jpg)
High Level Architecture
Tags: aws, devops
Published: 2023-03-31 14:55:24

We have our accounts, and we have our requirements - the next step is to sketch out at a high level what services we will use, where they will reside, and a quick point on CI/CD.

# Services

There are several AWS services that we will be utilizing in this project:

- [AWS Amplify](https://aws.amazon.com/amplify/)
- [AWS Location Services](https://aws.amazon.com/location/)
- [API Gateway](https://aws.amazon.com/api-gateway/)
- [Lambda](https://aws.amazon.com/lambda/)
- [DynamoDB](https://aws.amazon.com/dynamodb/)
- [S3](https://aws.amazon.com/s3/)
- [CloudFront](https://aws.amazon.com/cloudfront/)

## Amplify

This is a neat little service that allows us to build out web and mobile applications. This service integrates our front end using Flutter or ReactNative, and hooks it straight up to the back end! 

## Location Services

Launched back in June 2021, this service specializes in maps, geocoding, geofencing, tracking, and routing. Something that will be pretty important when navigating the rivers.

## Serverless

API Gatweay, Lambda, and DynamoDB make up the primary serverless triad. By serverless, in this context, it means that we do not manage the underlying infrastructure. Indeed these three services allows our application to scale in and out dynamically while minimizing operational overhead. 

## File Storage

S3 and CloudFront will be used to manage any media that is uploaded - from logos and images for the application, to images other users upload. They will be stored with an S3 bucket, and then hosted by CloudFront. CloudFront is a content delivery network (CDN), the content in edge locations that are closest to the user, reducing the amount of time it takes to fetch and deliver the content. This improves the user experience by reducing latency and improving performance.

![Service Setup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q95qq3kw0ypdhaehuxps.png)

# CI/CD

We will be building our application using [GitHub](https://github.com) and [GitHub Actions](https://github.com/features/actions) to deploy the code. 

Before we get into deployment, we want to setup our Git Repositories and align them with our AWS Accounts.

Due to the simplicity of this project, I will only setup 2 repos - one for the application that will be deployed to Development and Production, and a second one that manages the Shared Services account.

![Git Repo To AWS Accounts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bs7tlcfsfn3wgb6h8mly.png)

Next we will setup AWS SSO to allow us to login to our AWS Accounts and also grant our GitHub repos permission to deploy to the AWS Accounts.
Translate Markdown to Any Language (GitHub Bot)
Tags: opensource, i18n, ai, chatgpt
Published: 2023-03-31 14:38:32

Most open-source projects are written in English, raising barriers to participation from speakers of other languages. In addition, translation is a labor-intensive process, so documentation has yet to be internationalized to a great extent. 
I have created a [GitHub Actions](https://github.com/marketplace/actions/gpt-translate) that automatically translate documents using multiple AI models.
It is [open source](https://github.com/3ru/gpt-translate) and requires an individual API key, but it is free.

---

## Setup
All you need is an Open AI API Key and Actions workflow settings. Please see [README ](https://github.com/3ru/gpt-translate#readme)for details.

To prevent your API KEY from being misused, we only allow people who have write permission to access the repository to run the bot.

## Usage

Once the workflow is set up, comment on the issue or pr with a command to translate the input file.

```zsh
/gpt-translate [input filepath] [output filepath] [target language] 
```

### Comment on Issues
![Entering commands](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rfzm2dfv8be2ahizdqgy.png)[View Actual Issues](https://github.com/3ru/gpt-translate/issues/1#issuecomment-1491882236)

### Auto-generated PR
A PR is created depending on where the command is entered. (If you comment on a PR, the commit is added to that PR.)

![Auto-generated PR](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3rfay4lq60nfn0rczhyo.png)[View actual PR](https://github.com/3ru/gpt-translate/pull/4)

Interestingly, I could translate Voynich's Manuscript (undeciphered script), ancient Greek, and other languages. (Not possible with GPT-4)
We could also build a kind of OSS document for time travelers :)




## Human-in-the-Loop

Originally, the texts translated by GPT are of fairly high quality.

However, a human can also review the translation files created by this bot to perfect the translation further.


![PR review](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9xx41cfhlg83cnmd9rmc.png)
GitHub's function to accept reviews as is on a new commit allows us to build a very seamless translation experience.



---
If you have any suggestions for improvement or bugs, please feel free to write them in Issues!

🌎As a non-English speaking person, I would be happy if the various OSS are easier to understand!

---
### Repo

**Thanks for the 100 stars🌟**

{% embed https://github.com/3ru/gpt-translate %}
This is my very first OSS and I would be happy if you like it.
Screenshot all your pages
Tags: screenshot, puppeteer
Published: 2023-03-31 14:34:11

We migrated our landing page [woovi.com](https://woovi.com/) from Gatsby to Next.js. Gatsby was a good idea back then, but Next.js evolved better and faster. We need to modify our landing page faster to add new products, articles and experimentation, so the migration to Next.js was worth it.

## Validating if all the pages are the same
To validate that all migrated pages have the same design as the old one, we create an automation to screenshot all the pages from the old and next website, so we can easily check for "bugs"

```jsx
export const snapshotPages = async (
  pages: string[],
  snapshotDir: string,
  toRelative: (url: string) => string,
) => {
  const browser = await puppeteer.launch();

  if (!fs.existsSync(snapshotDir)) {
    fs.mkdirSync(snapshotDir);
  }

  // process 10 pages at a time
  await processPromisesBatch(pages, 10, async (url) => {
    const page = await browser.newPage();

    // eslint-disable-next-line
    console.log(`Opening ${url}`);
    await page.goto(url, {
      waitUntil: 'networkidle2',
    });

    const relative = toRelative(url);

    const snapshotPath = path.join(snapshotDir, relative);

    const dir = path.dirname(snapshotPath);
    try {
      if (!fs.existsSync(dir)) {
        fs.mkdirSync(dir);
      }

      await page.screenshot({ path: `${snapshotPath}.png`, fullPage: true });
    } catch (err) {
      // eslint-disable-next-line
      console.log('err: ', err);
    }
  })

  await browser.close();
};
```


## In Short


---
Woovi
[Woovi](https://www.woovi.com) is a Startup that enables shoppers to pay as they like. To make this possible, Woovi provides instant payment solutions for merchants to accept orders.

If you want to work with us, we are [hiring](https://woovi.com/jobs/)!

---
Photo by <a href="https://unsplash.com/@ishonshots?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Ishon Studios</a> on <a href="https://unsplash.com/photos/dHB6KHR31JA?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Configure Spacing in VSCode by Language
Tags: vscode, devsetup, tutorial
Published: 2023-03-31 14:28:21

I like to use 2 spaces for indenting when writing HTML and 4 spaces for python, but it can be a pain adjusting the tabs or spaces settings in the command palette, as I would usually end up with the wrong spacing convention, which then takes time to refactor.

So I was wondering - is there a way to customise the spaces/tabs used per language? Well I did some research, and it turns out there 
 is! Read on below to learn how to create language specific settings within VSCode.

1. Hit `ctrl` + `Shift` + `P` to open command palette and search **settings**
2. Select the option **Preferences: Open User Settings (JSON)**
3.  This will open a JSON file in your editor. within the json you can include the following code:

    ```json
    "[python]": {
        "editor.detectIndentation" : false,
        "editor.insertSpaces": true,
        "editor.tabSize": 4   
    },
    ```

You can update the language and the number of spaces to be used in the tab size to your personal preferences, so for example if you choose 4, your indents will be 4 spaces long. 

⚠️ Have a quick check of your JSON file to make sure there is not already a language identifier already present (for example, this may have already been created if you've specified a formatter for that language). If the language identifier already exists, you can just add your keys and values to the existing record.

To find a list of language identifiers you can check out this document: [VSCode Language Identifiers](https://code.visualstudio.com/docs/languages/identifiers#_known-language-identifiers)

There are tons of other settings you can configure using the settings.json file other than spacing and formatters, I've previously written an article covering fonts and ligatures: 

* [VSCode Fonts & Ligatures](https://dev.to/keracudmore/vscode-fonts-ligatures-18pf)

Share in the comments below if there are any other configurations you use that make coding a breeze! 😊
In today's digital age, cybersecurity has become an essential aspect
Tags: cybersecurity, cloud
Published: 2023-03-31 14:13:38


In today's digital age, [cybersecurity](https://msphub.io
![Image description] has become an essential aspect for business organizations to protect their assets from cyber threats. With the increasing reliance on technology for everyday operations, businesses face a multitude of risks ranging from hacking and data breaches to phishing and malware attacks. It is imperative for businesses to implement proactive cybersecurity measures to safeguard their confidential data, financial assets, and reputation.

(https://dev-to-uploads.s3.amazonaws.com/uploads/articles/umknw6xjyj392p1jfrsv.jpg))


Visit our website here:
[https://msphub.io](https://msphub.io)
The Benefits of Using Node.js for Big Data Processing
Tags: webdev, javascript, tutorial, node
Published: 2023-03-31 14:12:50

Node.js has been gaining popularity as a platform for big data processing. With its event-driven, non-blocking I/O model, Node.js is well-suited for handling large volumes of data. In this article, we will explore the benefits of using Node.js for big data processing.

- **High Performance**
Node.js provides high performance for big data processing due to its non-blocking I/O model. This means that Node.js can handle multiple requests simultaneously without blocking any of them, resulting in faster data processing. Additionally, Node.js runs on Google's V8 JavaScript engine, which is known for its speed and efficiency.

- **Scalability**
Node.js is highly scalable, making it a suitable choice for big data processing. It can handle multiple requests simultaneously, making it easy to scale up or down depending on the size of the data set. Additionally, Node.js can easily integrate with other technologies and services, making it a flexible solution for big data processing.

- **Easy to Learn and Use**
Node.js is based on JavaScript, a widely used programming language. This makes it easy for developers to learn and use Node.js for big data processing. Additionally, Node.js has a vast ecosystem of open-source libraries and tools that make it easy to build and deploy big data processing applications.

- **Real-time Processing**
Node.js is particularly well-suited for real-time big data processing. Its event-driven architecture allows it to handle real-time data streams without any lag, making it ideal for applications that require real-time data processing, such as stock trading or social media monitoring.

- **Cost-Effective**
Node.js is a cost-effective solution for big data processing. It is open-source and free to use, which makes it accessible to businesses of all sizes. Additionally, Node.js is designed to run on commodity hardware, which means that it can be run on inexpensive servers or in the cloud, reducing infrastructure costs.

In conclusion, Node.js is an excellent choice for big data processing. Its high performance, scalability, ease of use, real-time processing capabilities, and cost-effectiveness make it an attractive option for businesses looking to process large volumes of data quickly and efficiently. With the vast ecosystem of open-source libraries and tools available for Node.js, developers can easily build and deploy big data processing applications.

Thanks for reading...
**Happy Coding!**
Want to create a mobile app power by AI? [Hackathon]
Published: 2023-03-31 14:08:04

Are you someone who is constantly thinking about the future and artificial intelligence along with machine learning? Here is your chance to prove your metal. One of the best AI hackathons out there.

[Join here](https://passio.ai/hackathon-sign-up)

Let's train a custom classifier in under 60 seconds! 
Check out the AI magic in action and test yourself at http://labs.passiolife.com

https://www.youtube.com/shorts/1VBpmg4hYms
CSS Creator Håkon Wium Lie Interview
Published: 2023-03-31 13:57:45

We had a nice chat with Håkon Wium Lie, a prominent figure in the web industry. Håkon has made significant contributions as a standards activist and web pioneer. He served as the Chief Technology Officer of Opera Software from 1998 until the company was acquired by new owners in 2016. Håkon is most notably recognized for his work in the development of Cascading Style Sheets (CSS) while collaborating with Tim Berners-Lee and Robert Cailliau at CERN in 1994.

[Enjoy the full interview here!](https://evrone.com/hakon-wium-lie-interview)
Using SwiftLint with XcodeGen
Tags: ios, swift
Published: 2023-04-02 13:06:19

---
title: Using SwiftLint with XcodeGen
published: true
date: 2023-03-31 13:46:53 UTC
tags: iOS,swift
canonical_url: https://www.rockandnull.com/using-swiftlint/
---

 ![Using SwiftLint with XcodeGen](https://images.unsplash.com/photo-1518275977322-89b19f57b129?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDMwfHxnZW5lcmF0b3J8ZW58MHx8fHwxNjgwMjY4NTI4&ixlib=rb-4.0.3&q=80&w=2000)

Recently I was working on a project using [Xcodegen](https://github.com/yonaskolb/XcodeGen) and we needed to install SwiftLint to enforce the code style. This is usually a straightforward procedure but since Xcodegen and CI/CD process were involved it got quite tricky.

Since I started using Swift Package Manager I find it hard to go back to CocoaPods for any reason, but unfortunately, SPM wouldn't support it. I found a way to make it work but it wasn't as stable as I thought it would be.

So I decided to insert the `swiftlint` executable into the project and run it using a build phase script.

## The steps

1) Download the latest `swiftlint` from [Github](https://github.com/realm/SwiftLint/releases/tag/0.51.0) (it's named `portable_swiftlint.zip`), unzip it, and place it in your project directory. I prefer to place it in `/Scripts/SwiftLint/`.

2) Now we need to run `swiftlint` locally and on CI/CD to make sure that the style code is enforced. So we have to add a script in the build phase to run it using XcodeGen on each build. We will do that by adding the following code snippet in the `project.yml` (I will assume that you are already familiar with XcodeGen and you already built your `project.yml`):

```
targets:
  MyProject:
    postCompileScripts:
      - script: |
          ./Scripts/SwiftLint/swiftlint lint --quiet
        name: Swiftlint
```

That's it! Run `xcodegen` and you will notice the script added to the build phase and is ready to run on the next build.

Happy coding!