teleren/devto huggingface dataset:
AI Flow - from data to value
Tags: ai, machinelearning, datascience, startup
Published: 2021-12-21 10:37:23




You’ve probably heard how much value AI can create, although few companies are data driven, machine learning skills are hard to acquire and data scientists can be expensive. At AI Flow, the goal is to automate a big part of data science and bridge the gap between raw data and value. You drop your data, set the goals and we handle the heavy lifting in between. You’ll get out of the box analytics and trained machine learning models hosted on powerful clusters, accessible via a plug-and-play, scalable API.

[AI Flow](https://www.aiflow.ltd/) won the grand prize at Innovation Labs 2021, is backed by research and was validated with a few dozen beta testers. The global AI market is forecasted to reach $500B by 2024, with plenty of areas where automation can help and with software engineers looking for ways to get up to speed with machine learning quickly.

As a brief example, you can upload a long PDF that’s hard to read and we’ll give you an API that will answer any question with regards to the information inside. Or you can drop your spreadsheets and we’ll train a neural network and give you a plug and play API to embed in your product. Everything happens in an automated, secure way.

Your usage analytics and insights are also covered by us, all at a monthly fixed fee, so you don’t have to worry about variable, unexpected costs.

If you think what we do is cool, take a look at [aiflow.ltd](https://www.aiflow.ltd/) and subscribe to our newsletter to join a community of over a hundred developers that will get one month free to test the platform when we release the beta.

🚀 Join the fast paced AI world and convert your data into value.
How I manage my coloring system in projects
Tags: css, design, productivity, vscode
Published: 2021-12-21 10:31:29

First I create a new SCSS partial named _theme_colors.scss,
then add the color codes as following:

```
$grays: (
  "50": #FAFBFC,
  "100": #DFE2E8,
  "200": #D0D4DB,
  "300": #A7B1BF,
  "400": #8591A2,
  "500": #6A7686,
  "600": #4D5866,
  "700": #3A434D,
  "800": #272D33,
  "900": #14171A
);
```

then I loop through them with scss `@each` function as following:

```
@each $key, $value in $grays {
  .text-gray-#{$key} {
    color: $value !important;
  }
  .bg-gray-#{$key} {
    background-color: $value;
  }
}
```
thus I can use them in my html as `text-gray-100` up to `text-gray-900` for text colors based on design system or `bg-gray-100` up to `bg-gray-900` for background colors.
Day 97/100 Donuts to Code
Tags: 100daysofcode, programming, javascript, motivation
Published: 2021-12-21 10:28:24


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

## Intro to Arrays

An array is a data structure that you can use to store multiple values and arrays are also organized.

An array is useful because it stores multiple values into a single, organized data structure.

You can define a new array by listing values separated with commas between square brackets[].

```
var donuts = ["glazed", "jelly" , "powdered"];
```
But strings aren't the only type of data you can store in an array. You can also store numbers, booleans... and really anything!

```
var mixedData = ["abcd", 1, true, undefined, null, "all the things"]; 
```
You can even store an array in an array to create a nested array!

```
var arraysInArrays = [[1, 2, 3], ["Julia", "James"], [true, false, true, false]];
```
Nested arrays can be particularly hard to read, so it's common to write them on one line, using a newline after each comma:

```
var arraysInArrays = [
    [1, 2, 3], 
    ["Julia", "James"], 
    [true, false, true, false]
]; 
```

##  Indexing

Remember that elements in an array are indexed starting at the position 0. To access an element in an array, use the name of the array immediately followed by square brackets containing the index of the value you want to access.

```
var donuts = ["glazed", "powdered", "sprinkled"];

console.log(donuts[0]); // "glazed" is the first element in the `donuts` array
```

## Pop

Alternatively, you can use the pop() method to remove elements from the end of an array.

```
var donuts = ["glazed", "chocolate frosted", "Boston creme", "glazed cruller", "cinnamon sugar", "sprinkled", "powdered"];

donuts.pop(); // pops "powdered" off the end of the `donuts` array
donuts.pop(); // pops "sprinkled" off the end of the `donuts` array
donuts.pop(); // pops "cinnamon sugar" off the end of the `donuts` array
```
With the pop() method you don’t need to pass a value; instead, pop() will always remove the last element from the end of the array. 

Also, pop() returns the element that has been removed in case you need to use it.

```
var donuts = ["glazed", "chocolate frosted", "Boston creme", "glazed cruller", "cinnamon sugar", "sprinkled", "powdered"];

donuts.pop(); // the `pop()` method returns "powdered" because "powdered" was the last element on the end of `donuts` array
```

## Code Snippets

```
var donuts = ["jelly donut", "chocolate donut", "glazed donut"];

donuts.forEach(function(donut) {
     donut += " hole";
     donut = donut.toUpperCase();
     console.log(donut);
}); 


for (var i = 0; i < donuts.length; i++) {
     donuts[i] += " hole";
     donuts[i] = donuts[i].toUpperCase();
     console.log(donuts[i]);
}
```

## Summary
Received a meaningful comment and it is a great tool of motivation. I'm grateful for the people who are there supporting me. 

[![resources](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0u6n0sdvysys5huns8an.png)](https://unstoppablerobotninja.com/entry/fluid-images/)
RudderStack Secures SOC 2 Type II Certification
Tags: soc, compliance, privacy, saas
Published: 2021-12-21 10:06:21

At RudderStack, we consider security to be vital, especially when it comes to our customers' proprietary data. As a result, we're excited to share that we have attained System and Organization Controls (SOC) 2 Type II compliance. This level of compliance for RudderStack was achieved through Prescient Assurance, a third party auditor, running an internal controls report that captures how RudderStack safeguards customer data and operates controls.

So what does this mean for RudderStack customers? The SOC 2 Type II report validates that RudderStack meets the requirements of customers in highly controlled industries who need expert evaluation about how vendors handle the principles of security. RudderStack customers now know that if a large cyberattack happens, their data will be safe with RudderStack. Additionally, RudderStack provides top notch alerting procedures, audit trails and actionable forensics for all of our customers.

This completed evaluation comes as RudderStack is experiencing monumental growth and processing large amounts of data for our over 11,000 sites and apps. Obtaining the SOC 2 Type II certification reinforces our commitment to helping our customers effortlessly and securely sync all of their customer data into and out of the warehouse from one platform.

If you would like to start accessing real-time event streaming, ETL and reverse ETL in a safe platform, [try RudderStack for free](https://app.rudderstack.com/signup?type=freetrial) today.
Your Chance To Make Profits By Giving Cloud Suggestions Has Now Come
Tags: database, cloudnative, cloudskills, beginners
Published: 2021-12-21 09:58:16

I do believe that there are many people especially developers do things just for fun and pleasure. What if I told you that you could help more people after you and make a profit at the same time? No tricks, the rules are clear and equal, everyone can join in for free.

So what is it?
Well, this is the way. All above can be achieved by joining Alibaba Cloud Ambassador Program. As an ambassador, you will receive monetary compensations for every new user that you introduce to Alibaba Cloud.


Who should join?
If you are extremely curious, interested in cloud technologies, and you have strong desires to share your thoughts and experience with others, which also delights you. More importantly, you are dedicated to helping people, you shouldn't miss this chance.

[I want to be a cloud ambassador >](https://www.alibabacloud.com/cloudam-bassador/homepage)
Tham gia Technical Event với chủ đề: How to Build A Distributed Crawling System
Tags: crawlingsystem
Published: 2021-12-21 09:55:41

Cách xây dựng hệ thống thu thập dữ liệu trên diện rộng
Gambaru Technical Event Series là chuỗi sự kiện cập nhật và sẻ chia kiến thức chuyên sâu về công nghệ, lập trình do Gambaru kết hợp cùng các chuyên gia nổi trội trong lĩnh vực thực hiện.
—Technical Event #02 là sự tham gia và chia sẻ của anh Đạt Hồ (CTO linkedin.com/in/dat-ho-quoc) và anh Tín Đặng (Data Engineer linkedin.com/in/tindang97) đến từ VietMoney, startup nổi tiếng trong thời gian gần đây.

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

Anh Đạt và anh Tín đang rất mong chờ được chia sẻ về chủ đề Distributed Crawling System (Hệ thống thu thập dữ liệu phân tán).

Kiến thức từ buổi chia sẻ này sẽ giúp bạn hiểu được làm thế nào để xây dựng hệ thống thu thập dữ liệu trên diện rộng.

Nội dung chính bao gồm:

1. Data Crawling là gì?
2. Vấn đề đang gặp phải trong crawling data
3. Hệ thống phân tán là hệ thống như thế nào
4. Kiến trúc hệ thống phân tán do VietMoney xây dựng
5. Demo thu thập dữ liệu phân tán
Số lượng tham dự CÓ HẠN, hãy nhanh chóng [ĐĂNG KÝ](https://docs.google.com/forms/d/e/1FAIpQLSeH9a6nJ7gbQHAM-zgZvUZ9nMFzckU1_bWR8JDYPw8aTucl8g/viewform) để tham gia sự kiện và trang bị cho mình những kiến thức rất bài bản về Distributed Crawling System.
——THÔNG TIN SỰ KIỆN:⏰ Thời gian: 9:00 ~ 11:00, sáng thứ 7 (25/12/2021)💻 Hình thức: Online (Zoom)💲💰 Miễn phí🤵 Phù hợp với: Data Engineer, Software Engineer

NOTE: Tham gia cộng đồng của Gambaru để nắm thông tin về sự kiện cũng như các chủ đề sẽ thực hiện tiếp theo tại https://t.me/+O-aOUijmrFtlNmU9
Set flex direction
Tags: css, html
Published: 2021-12-21 09:51:19

Hello Everyone Today we will learn how to work flex direction.

Here's the starter code for the example we'll be using in the following chapters.


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

## **HTML**

```
<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
</div>
```

## **CSS**

```
* {
    font-family: Helvetica;
    font-size: 1.4em;
    color: white;
    text-align: center;
}

.container {
    border: 2px solid black;
}

.item {
    width: 100px;
    height: 70px;
}

.container div:nth-child(1), div:nth-child(6) {
    background-color: #00BFB8;
}

.container div:nth-child(2), div:nth-child(7) {
    background-color: #8E007E;
}

.container div:nth-child(3), div:nth-child(8) {
    background-color: #23D0EA;
}

.container div:nth-child(4) {
    background-color: #EF8956;
}

.container div:nth-child(5) {
    background-color: #060A3D;
}
```

There is a container div that contains 6 items. To be as clear as possible, each item has a class of item. Each is also 100px wide and 70px tall with a different background color.

There is also a black border around the containing div. This will help you visualize the relationship between the flex items and the flex container.
T3Terminal 2021 - All Highlights, Innovations & Stories
Published: 2021-12-21 09:45:39

As we move to 2022 and we look back to 2021, this year has been like no other. We’ve experienced unprecedented change and difficulties with worldwide pandemics. Thanks for riding through with us with trust and constant companionship. 

_

> It has been two years since T3Terminal TYPO3 Marketplace was launched at TYPO3 Conference 2019 at Hague - the Netherlands
> Moreover this year T3Terminal marked 2 glorious years of success! 
_

As we enter 2022, let's take a look back at T3Terminal's highlights from this year — thanks for being with us throughout this year! We hope T3Terminal has helped you serve a fruitful business with TYPO3 products. Your support brightened our 2021, inspired us to serve the best, and motivates us to keep working hard going completely digital in means of  Marketplace experience, Bringing you exciting TYPO3 Templates & Extensions, Unique TYPO3 Services, TYPO3 Contribution, Writing TYPO3 Blogs/Tutorials, and regular updates.

Let’s have a look back at T3Terminal’s achievements, enhancements, and accomplishments throughout 2021!

-> Table Of Content 

1. T3Terminal Highlights - 2021
2. Introduced T3Terminal License System
3. Introduced One Click Product Updates
4. T3Terminal’s Partnership With Slider Revolution Core (ThemePunch)
5. Introduced First Ever TYPO3 Website Builder! (TYPO3 SaaS + T3 Karma)
6. TYPO3 People Searching & Us!
7. T3Terminal Ranking
8. TYPO3 Knowledge sharing
10. Launched Unique TYPO3 Products
11. T3Terminal Annual Sales & Downloads
12. T3Terminal Progressive Statistics
13. Our T3Terminal Family
14. Working at T3Terminal Office
15. Most Downloaded TYPO3 Templates in 2021
16. Most Downloaded TYPO3 Extension in 2021
17. T3Terminal Loves TYPO3 OpenSource
18. Conclusion

Know about it all here, https://t3terminal.com/blog/t3terminal-2021/
A Visual Guide to useEffect - Cleanups
Tags: react, javascript, webdev
Published: 2021-12-21 09:04:08

_This is a second chapter of the [Visual Guide to useEffect](https://alexsidorenko.com/blog/useeffect/)_

Here is a component that logs how many seconds have passed from the first time it’s rendered.


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

---

## Effects may keep running after the component unmounts

Now let’s say we have two pages in our app. Only one of those pages has our component. Here is what happens when we switch between the pages.

![Component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6dmokj2v057kbbnd4hnr.gif)

The log keeps running after the component unmounts. How to prevent that?

> Every effect may return a function that cleans up after it
> 
> React performs the cleanup when the component unmounts
> 
> [React Docs - useEffect](https://reactjs.org/docs/hooks-effect.html)

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

---

## Effects may accumulate with every execution

Let’s change our component to log how many seconds have passed from the **last time** it is rendered. We will need to remove the dependency array to run the effect after every re-render.

![Effects may accumulate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j80vjleai82d4gtvcx6t.gif)

If we keep re-rendering the component, we will keep creating new intervals. How do we only keep the last interval? 

> React *also* cleans up effects from the previous render before running the effects next time
> 
> [React Docs - useEffect](https://reactjs.org/docs/hooks-effect.html)


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

---

## When to use cleanups?

Whenever you add an effect, think about what will happen when the component unmounts. Will this effect keep running? If so, provide a cleanup function. If you do that, it will automatically cover the second use case when effects accumulate with every execution.

*This effect won't keep running after the component unmounts.*  
**Doesn't require a cleanup**. 

```javascript
useEffect(() => {
  document.title = props.title
})
```

*This effect will keep running after the component unmounts.*  
**Requires a cleanup**.

```javascript
useEffect(() => {
  const handler = () => console.log(window.pageYOffset)
  window.addEventListener("scroll", handler);
  return () => window.removeEventListener("scroll", onScroll);
})
```

---

Looking for daily snippets of visual React content? [Follow me on Twitter](https://twitter.com/asidorenko_)
GRIP | GitHub Reporting Tool For Organizations
Tags: javascript, atlashackathon, mongodb, github
Published: 2021-12-21 09:36:31

## **Overview of My Submission**
GRIP (GitHub Reporting And Integration Platform) is a GitHub application that creates interactive dashboards for Organization GitHub projects and issues.

## **Submission Category:**
**Action Star**

## **Link to Code**
https://github.com/nawinto99/grip

## **Additional Resources / Info**
**GRIP Architecture**

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

**Live Dashboard**

[GRIP-Repositories-Dashboard](https://charts.mongodb.com/charts-hackathon-gmhan/public/dashboards/c4bd6453-f97c-4e6c-aeaf-81be9b230de8)

**Screenshots**

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


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

**Tech**

- **MongoDB-Atlas** - MongoDB Atlas is a multi-cloud database service by the same people that build MongoDB. MongoDB Atlas makes it easy to deploy and manage databases on-demand when and where you need them.
- **MongoDB-Realm** - MongoDB Realm is a development platform designed for modern, data-driven applications. You can use Realm to build mobile, web, desktop, and IoT.
- **MongoDB-Charts** - MongoDB Charts gives you a quick, simple, and powerful way to perform data visualisation with MongoDB Atlas data.
- **Node.js** - Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser.
- **CodeQL** - CodeQL is the analysis engine used by developers to automate security checks, and by security researchers to perform variant analysis.
How to create Navigation bar in Figma
Tags: ui, uidesign, figma, web
Published: 2021-12-21 09:35:55

---
title: How to create Navigation bar in Figma
published: true
description: How to create Navigation bar in Figma using Variants | Speed Art Tutorial | Figma | UI Design
tags: ui, uidesign, figma, web
//cover_image: https://direct_url_to_image.jpg
---

> How to create Navigation bar in Figma using Variants | Speed Art Tutorial | Figma | UI Design

> [**Please do not forget to subscribe in my channel:**](https://www.youtube.com/AhmadEmran?sub_confirmation=1)

<hr/>

{% youtube 7ehwUNhasiM %}
JAVASCRIPT Broad Question
Published: 2021-12-21 09:31:51


JAVASCRIPT API Question

1.What is an API, the purpose of API, GET, POST ?

Answer :API stands for “application programming interface.” An API is essentially a set of rules that dictate how two machines talk to each other. Some examples of API-based interactions include a cloud application communicating with a server, servers pinging each other, or applications interacting with an operating system.

Although POST and GET are the most commonly used HTTP request methods, they have many differences. While the HTTP POST method is used to send data to a server to create or update a resource, the HTTP GET method is used to request data from a specified resource and should have no other effect.

The GET Method
GET is used to request data from a specified resource.
GET requests are the most common and widely used methods in APIs and websites. Simply put, the GET method is used to retreive data from a server at the specified resource. For example, say you have an API with a /users endpoint. Making a GET request to that endpoint should return a list of all available users.

The POST Method
POST is used to send data to a server to create/update a resource.
POST requests are never cached
POST requests do not remain in the browser history
POST requests cannot be bookmarked
POST requests have no restrictions on data length
async function postData(url = '', data = {}) { const response = await fetch(url, {
method: 'POST',
 mode: 'cors',
cache: 'no-cache',     credentials: 'same-origin',
    headers: {
      'Content-Type': 'application/json' 
    },
redirect: 'follow',     referrerPolicy: 'no-referrer', 
    body: JSON.stringify(data)   });
  return response.json(); }

postData('https://example.com/answer', { answer: 42 })
  .then(data => {
    console.log(data)  });
2.Event bubble, Event delegate and purpose of Event bubble?
Event bubbling is a method of event propagation in the HTML DOM API when an event is in an element inside another element, and both elements have registered a handle to that event. It is a process that starts with the element that triggered the event and then bubbles up to the containing elements in the hierarchy.
It refers to handling bubbling events from many elements, like table cells, from a parent object, like the table. It can keep the code simpler, especially when adding or removing elements, and saves some memory.
Demo of aqua - Declarative CLI Version Manager written in Go
Published: 2021-12-21 09:26:45

[![asciicast](https://asciinema.org/a/457021.svg)](https://asciinema.org/a/457021?autoplay=1)

aqua is a Declarative CLI Version Manager written in Go.
We have published the demo of aqua.
You can understand the basic feature of aqua within only two minutes.
Please see the demo and if you'll get interested in aqua,
please see the official site too.
https://aquaproj.github.io/
Why is it important to hire a Java developer?

Tags: javadeveloper, javadevelopment, programming
Published: 2021-12-21 09:14:47

Although Java came into existence back in the 1990s, it is still an important part of the software world. The same goes for Java Development Kit (JDK). There are multiple reasons to hire a Java developer. It is an easy-to-use programming language that is preferred by companies. Moreover, it is based around the English language that makes the code easier to understand for almost everyone. In other words, this cross-platform language is very reliable as compared to others.
If you want to be a Java developer, then you need to know everything related to Java Development Kit (JDK) and Java Development Kit download. Following are the set of skills that you will need to acquire to become a full-stack developer:
High-level understanding of the language
The use of ORM, SQL, and other related databases
Project-oriented Programming skills
XML and XSL
Java beans and framework skills
Diagnosis, testing, and debugging skills
Version control software skills
Companies or businesses always look for freelancers who have skills that cannot be accessed locally. Java is in high demand and once you acquire the skills, there is no denying that you will have a demand in the market of programming and software skills. Once done, you can join platforms like Eiliana to enhance your abilities and work with some of the best clients from within the country. It is an online portal made specifically to bridge the gap between freelancers and businesses. So, if you are someone who wants to pursue a career after acquiring knowledge of Java Development Kit (JDK), then Eiliana is the perfect place for you. You can get started anytime and impress the clients with your in-depth knowledge and programming skills. It is obvious that you will get a lot of competition in the market but with the vast amount of experience that you will get here will help you stand out among the crowd.
Guo Wengui
Published: 2021-12-21 08:57:50


If high-rise buildings want to be built, they need a solid foundation for support. Guo Wengui always promises little ants how high they can stand and how far they can see in the future, but he only deceives people with something without a sense of reality. How can this kind of thing have a future? Guo Wengui only read half of his books. He only saw that he could make money through financial fraud, but he didn't see how much he would pay to use these means. Guo Wengui, who has been engaged in a Ponzi scheme, is not far from standing on the bench and squatting in prison. I believe he can make up for the books he didn't read at the beginning.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0cj09gbzh1gcrlysle3l.png)