teleren/devto huggingface dataset:
Using Filter and Sort in JavaScript
Published: 2022-08-26 17:03:22

Getting a grasp of filtering and sorting arrays in JavaScript can be quite confusing at first.  Let's look at example of an array of objects that a [substitute teacher](https://youtu.be/Dd7FixvoKBw) might collect and see if we can't make it make sense.

```
const students = [
  { id:105, name: "Jessica",   is_present:true },
  { id:101, name: "Denise",    is_present:true },
  { id:103, name: "Blake",     is_present:false},
  { id:102, name: "Jaqueline", is_present:true },
  { id:104, name: "Aaron",     is_present:true },
]
```
Let's say we wanted to see who was not present in class.  We would use .filter like so:
```
let filteredStudents =
students.filter(student=>student.is_present===false)
```

The result would be:
```
filteredStudents=[{id: 103, name: 'Blake', is_present: false}]
```
What if you wanted more than just a subset of your original array out of your filter operation?  Since the filter is really answering a question then the result could be used to create new data.  

We could guess what the result of the following would be:
```
let filteredStudents =  
students.filter(student=>student.name.includes("J"))
```

```
 filteredStudents = [
  { id:105, name: "Jessica",   is_present:true },
  { id:102, name: "Jaqueline", is_present:true }
]
```
But what if we wanted a new array that specified that the names in the array had passed the filter test?
```
let filteredStudentsJ =
students.filter(student=>student.name.includes("J"))
.sort((a,b)=>a.name>b.name?1:-1)
.map(filteredStudent=>({
   name:filteredStudent.name,
   id:filteredStudent.id,
   includes_J:true}))
```
We get a new array of objects that has the 'includes_J' key instead of 'is_present'.
```
filteredStudentsJ =[
 {name: 'Jaqueline', id: 102, includes_J: true}
 {name: 'Jessica', id: 105, includes_J: true}
]
```
The filteredStudentsJ array is also now in alphabetical order due to this tiny yet powerful piece of code:
```
array.sort((a,b)=>a.name>b.name?1:-1)

```
Huh? .sort is being asked to compare (in this case) the name key of a pair of objects within the array.  We want ascending order in this case so we are using greater than (>) for our comparison. This comparison is used in a ternary statement that is applied to the index.  If the value of a is greater than b, you add one to its index, if not you subtract 1 from its index.  .sort then repeats the process through the array until no more sorting can be done.

Phew, now we're ready to take roll.


![A substitute teacher takes roll](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hm1j6e5stzjcz3dksib8.PNG)
[ ازاي تكون مهندس برمجيات جامد ]
Published: 2022-08-26 13:35:11

التطور الوظيفي لمهندسين البرمجيات

نحن تقريبا عايشين وسط محيط برمجي متخبط جدا بالتسميات الوظيفية، تلاقي مبرمج بعد سنة خبرة باطار عمل معين الشركة ترقيه لمدير فريق (صارت بالواقع كثير بشركاتنا السورية) وتلاقي شخص اخر صار سنيور مجرد انه عرف كم مصطلح زيادة بالبرمجة
لذلك رح اطرح من وجهة نظري متطلبات المنصب الوظيفي البرمجيات يلي المفروض تكون عند كل مستوى.
- المستوى الاول ( الDeveloper )
المفروض تكون عرفان مسار صناعة البرمجيات بشكل جيد.
1. بتعرف تحول الbusiness requirements لكود شغال بأداء (performance) جيد.
2. بتكتب clean code وفاهم OOP
3. بتعرف SOLID Principles وبتطبق عليها
4. عندك خلفية عن الdesign patterns
5. عارف unit testing وأهميته الجودة في صناعة البرمجيات.
6. بتعرف تعمل integration مع انظمة أخرى مثل APIs و Databases وهكذا
7. بتعرف تصمم قواعد بيانات بشكل جيد.
8. فهمان SDLC و DevOps و Monitoring.
انت هون صرت قادر على تنفيذ المشاريع البرمجية من الاول للاخر.

- المستوى التاني (Mid Level)
الشركات غالباً يكون عندها لخبطة كبيرة في المنصب هذا وخاصة شركاتنا المحلية
المرحلة هذه تكون مدخل الى قيادة الفريق وايضاً تتضمن تمكين مهاراتك وخبراتك التقنية اكثر
1. تبدأ تعمل coaching للمهندسين الاقل خبرة
2. تقدر تبقا Tech lead لفريق صغير مكون من 3 افراد
3. تقدر تشارك في الsoftware architecture و الsystem design تبع المشروع
4. تعلم الفريق بالnew practices
5. بتفكر في الmaintainability و الlong term
6. تقدر تعمل breakdown للtasks
7. فهمان كيف تعمل operate للمشروع بعد ما يطلع live من scalability و monitoring و alerting
8. عندك خلفية عن اكتر من جزء في المشروع مو مجرد الجزء الي انت شغال عليه.
9. تقدر تختار نوع قواعد البيانات المناسب للمشروع مو بس مجرد الdiagram
في المرحلة هي المفروض تبقا عرفت بعض المصطلحات القادمة وتعرف تطبق عليها حتي لو ما استخدمتها من قبل :
Cqrs - event sourcing- DDD- microservices - clean architecture - analytics & reporting - Messaging - events - gateways - proxies - load balancing - Scalability - Cache - resilience - fault tolerance
مبروك انت هيك بقيت معلم تقدر تعمل lead لفريق ومشروع صغير والمشروع يعيش سنين لقدام وتبقا كمان عامل حساب المشاكل لما تحصل.

المستوي التالت وlevel الوحش (Senior Developer او Tech Lead)
هون التأثير تبعك يبقى تأثير الEng Manager بس الScope يبقى مختلف والCareer Path مختلف.
ممكن فريق كبير مكون من 10 افراد يبقا فيه واحد فقط من المستوى التالت وبقية الفريق من المستويات الاقل.
1. تقدر تعمل Software architecture و system design لمشروع كبير.
2. تقدر تبقا tech lead لفريق من 10 افراد
3. عندك مهارات الproject management و الdelivery management
4. تقدر تشارك في الPlanning لفريق العمل.
5. تعمل Development Plans للمبرمجين
6. يبدأ التأثير بالقرارات يبان في فرق أخرى مو بس الفريق يلي انت تديره.
هون انت صرت ملك البرمجيات، والمستويات يلي بعدها رح تتعلق اكثر بالقيادة والتوجيه.
- أنا برأيي الانتقال من مستوى الى المتسوى يلي بعده يحتاج بالمتوسط 3 سنين
- خارطة المناصب السابقة شاركتها من مهندس مصري اسمه ابراهيم اسامة وانا مقتنع فيها جداً وتبقى وجهة نظر شخصية انا اتبعها في تحديد المنصب الوظيفي

بس كدا خلاص انا بعرف اني صدمتك ببعض الامور ولكن هذا الواقع يلي لازم نستوعبه.
الختام سلام.
Coding the infrastructure
Published: 2022-08-26 16:47:19

### A New Sense of Direction
We've finally managed to get our tech stacks implemented. Although not complete and now needing changes, we got it put together. However the thing is, we discovered that the best way to achieve our app would be to transition from the offline mobile application to a web app that is dynamic and mobile friendly. As such the stack does need to change. But we have a good idea where it should go from here as well.

Still have a ways to go, but now we have an even better understanding as to the path we should go. Along with that, we have a good idea for the milestones we want to prioritize.

---

### Key Moments of the Apprenticeship so Far
It's difficult to just be constantly researching or trying to learn things rather than actually doing things. So getting the opportunity to do some code to set up the project was so refreshing. Seeing it output a simple "Hello, World" with no errors for the dependencies and packages was such a great moment. And then connecting it to our database to output our tables? That was amazing as well. Even with such small steps and small outcomes, it's easy to forget how important they are and the importance to celebrate every victory you can, regardless of how small they are.
![Victory Screen](https://i.redd.it/8fyo1xzuqqc41.jpg)

With those moments, every time I was approaching them, it was difficult and somewhat stressful or overwhelming in that I didn't know what to do or how to do it. But once I got through it, it was incredibly relieving and helped give so much insight on what to do and how to do it.

---

### Not Much to Add
Sorry for the shorter blog, as over the last week not much has happened it feels like, my time at my host company is still very open due to not being on a project and other than that it's still very foundational. But I'm eager to get into everything.
Typescript Series - Array Unshift Type
Tags: javascript, typescript, webdev, postgres
Published: 2022-08-26 16:46:03

I'd like to start by saying that I am doing this series to learn and understand better Typescript, so feel free to correct me or contact me.

Let's create a type for the JavaScript Array.unshift function. Which takes pushes an element into the array in the last position. 

```
Unshift<[1, 2], 0> // [0, 1, 2,]
Unshift<['1', 2, '3'], boolean> \\ [boolean, '1', 2, '3']
```

So we know we have an array and our type should return the new value + array.

```
type Unshift<TArray extends unknown[], U> = [U, ...TArray]
```

`TArray extends readonly unknown[]` We first check our TArray is of type array.

Then we pass the value and we spread the array into an array `[U, ...TArray]`


Thank you!

you can find me here [My Twitter] (https://twitter.com/sarmunbustillo?t=pztqXmT7DH2pa9lDLjfrdQ&s=09)
What was your win this week?
Tags: discuss, weeklyretro
Published: 2022-08-26 16:27:23

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

Hey there! 


Looking back on this past week, what was something you were proud of accomplishing?

All wins count — big or small 🎉

Examples of 'wins' include:

- Starting a new project
- Fixing a tricky bug
- Achieving a personal milestone
---

Have a wonderful weekend!


![Kip from Napoleon Dynamite scoring a bowling strike](https://media.giphy.com/media/vvbGMpbhZMcHSsD50w/giphy.gif)
Battleships in a Board Count
Tags: leetcode, python
Published: 2022-08-26 16:25:38

Given an m x n matrix board where each cell is a battleship 'X' or empty '.', return the number of the battleships on board.

Battleships can only be placed horizontally or vertically on board. In other words, they can only be made of the shape 1 x k (1 row, k columns) or k x 1 (k rows, 1 column), where k can be of any size. At least one horizontal or vertical cell separates between two battleships (i.e., there are no adjacent battleships).




```js
var countBattleships = function(board) {
    
    if (board === null || board.length === 0 || board[0].length == 0 ) 
        return 0;
    
    let res = 0;
    
    const m = board.length;
    const n = board[0].length;
    
    for(let i = 0; i < m; i++) {
        for (let j = 0; j < n; j++) {
            if (board[i][j] === '.' 
                || 
                    (i > 0 && board[i - 1][j] === 'X') 
                || 
                    (j > 0 && board[i][j - 1] === 'X')
               ) 
                continue;
            res++;
        }
    }
    
    return res;
};



```
Build and Package Manager Tools for Absolute Beginners📌
Tags: beginners, webdev, programming, productivity
Published: 2022-08-26 16:22:37

##What are Build and Package Manager Tools?

Assume you are a group of developers working on an application for your startup or a project in a big company.
When you have done the implementation of your application, it must be made available to **end users**.
So it must be **Deployed**, which means that the application you created and stored in the _code repository_ must find its way to the **Production Server** and run there.
So, **How Do You Deploy a Software Application?** That is, how do you move your code, its dependencies, and everything else it requires to run to a Server or location where the application will run?
It could be a **Production** or **Staging** server that is accessible to end users.
You package your application into a single movable file, then upload it to a server and run it there; this single package file is referred to as an application **Artifact**.

**Packaging an application** is also known as **building the code** into a single **Artifact** that you can move around and **Deploy** or install on servers. This will involve **compiling** the code from hundreds of files into a single file because you can't move around hundreds of files and **compressing** to make it smaller so that it isn't too large and slow to move around.

After creating the **Artifact**, we not only copy it to the server, but we also keep it in **Storage**. In case we need to _deploy it more than once_.
**For example**, if we deploy an Artifact in Deployment Server, we will then deploy the same Artifact in the Test environment, and if the Production environment or Development Server where we copied and started the Artifact directly crashes, we will need a backup of that Artifact to Deploy it again. So there are lot of different use cases.
The Storage where we keep Artifact after we build it is called **Artifact Repository**.
Example of Artifact Repository is **Nexus**, **JFrog Artifactory** Repository.
When you release a new version of your application or want to make a new version available for testing before release, you create an Artifact, save it to the Artifact repository, and deploy it to the server.

##What kind of file is this Artifact? 🤷

Well it depends on your programming language because Artifact file is different for each programming language.
_For example_, for **Java application** the Artifact will be **JAR** or **WAR** file and it will include whole code with all dependencies your code uses.

######Thanks for reading this article do follow me for more
[2022-07-09] AWS ML Weekly Updates
Published: 2022-08-26 16:20:00


2022-07-09 업데이트 전달 드립니다 !

---

### Machine Learning University 소개
Amazon의 개발자들이 머신러닝 관련 내용을 공부할때 사용하는 코스와 동일한 학습자료(영상, 예제)가 공개 되어있네요. 자연어 처리, 테이블 데이터, 컴퓨터 비전을 3일 동안 진행하는 기본 과정을 시작하도록 설계되었고, 트리 기반 및 앙상블 모델에 대해서는 5일 동안 진행되는 고급 강의 시리즈를 제공합니다 ! 영상은 YouTube에서도 볼 수 있고, 강의 자료는 Github에 업로드 되어 있습니다. 아마존 개발자들 어떤 자료로 공부하는지 궁금하신 분들은 확인해보셔도 좋을 것 같습니다. 

[바로가기](https://aws.amazon.com/blogs/machine-learning/use-a-custom-image-to-bring-your-own-development-environment-to-rstudio-on-amazon-sagemaker/?sc_channel=sm&sc_campaign=Machine_Learning&sc_publisher=LINKEDIN&sc_geo=GLOBAL&sc_outcome=awareness&trk=machine_learning)


---

### What is OpenSearch?
Amazon OpenSerch Service에 대한 글이 공개되었네요. 오픈서치는 실시간 애플리케이션 모니터링, 로그 분석, 웹사이트 검색과 같은 분야에서 광범위하게 사용할 수 있는데요 Apache 2.0 라이선스로 100% 오픈 소스 제품 입니다. 기존에 텍스트 검색에 널리 사용되고 있지만, 개인적으로는 오픈서치가 k-nearest neighbors (KNN)에 잘 사용 될수 있을지 관심이 많습니다. OpenSearch 소식 및 설명이 궁금하셨던 분들은 살펴보셔도 좋을 것 같습니다. [바로가기](https://aws.amazon.com/blogs/machine-learning/use-aws-ai-and-ml-services-to-foster-accessibility-and-inclusion-of-people-with-a-visual-or-communication-impairment/)

---

### Amazon Data Wrangler 및 SageMaker Autopilot을 통한 통합 데이터 준비 및 모델 훈련 블로그 글 소개
Data Wrangler를 사용하여 손쉽게 데이터를 가공하고, SageMaker Autopilot을 사용해서 모델을 자동 훈련시키는 방법에 대한 블로그 글이 공개 되었습니다. 개인적으로 간단하게 데이터 가공을하고, 모델 훈련을 자동으로 진행하는 것이 생성성이 엄청 좋다고 생각하는데요. 두 서비스에 관심있는 분들 블로그 확인해보시면 좋을 것 같습니다 ! 
[바로가기](https://aws.amazon.com/blogs/machine-learning/unified-data-preparation-and-model-training-with-amazon-sagemaker-data-wrangler-and-amazon-sagemaker-autopilot/)


![Solution overview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/66z253li4qr23ucsqcbv.png)
 
---

### Weight & Biases를 사용하여 ML 개발자 생산성 향상시키키: Amazon SageMaker의 컴퓨터 비전 예제 블로그 글 소개
Weights & Biases와 AWS가 함께 작성한 블로그 글이네요. 이 글에서는 Weight & Biases(W&B) 와 Amazon SageMaker를 사용하여 자율 주행 차량 객체 인식 모델을 훈련 합니다. 두 솔루션이 ML 개발자의 수작업을 줄이고 모델 개발 프로세스의 투명성을 높이며 팀이 프로젝트에서 협업할 수 있도록 하는 방법을 공유합니다. 관심 있으신 분들 읽어보시면 좋겠습니다 ! [바로가기](https://aws.amazon.com/blogs/machine-learning/improve-ml-developer-productivity-with-weights-biases-a-computer-vision-example-on-amazon-sagemaker/)

---

[더 많은 AWS ML Weekly Updates 리스트](https://dev.to/yoon/aws-ml-weekly-updates-44nk)
Add Tool Tips with just CSS
Published: 2022-08-26 16:17:14

Tool tips are an important part of the user experience. Below is the absolute simplest way to add them to your website.

> Tooltips provide contextual information about an element when that owning element receives focus or is hovered over, but is otherwise not visible on the page. The tooltip is displayed automatically, after a brief delay; the user does not request it. While a tooltip can be placed on any content, they generally are tips for tools or controls, such as providing additional content for icons that have brief labels (or no labels at all, which is not accessible!).

~ Mozilla Developers

```html
<!-- Place this in oyur documents <head> -->
<link href="https://gh.wkmn.cloud/CSSTooltip/tooltip.css" rel="stylesheet">

<!-- Demo -->

<a href="#" data-tooltip="Click Me!">Link</a>

<!-- It's that easy -->
```

You can find an example [here](https://tooltip.ju.mp/).

![Button hovered with tool tip popping up](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7n32lezygdd2r4rztjcu.png)
📌 Live - Creating a Modern NPM Package
Tags: livestream, programming, opensource, javascript
Published: 2022-08-26 16:08:39

---
title: 📌 Live - Creating a Modern NPM Package
published: true
description: Clarkio hosts a livestream to share what he's learned about creating modern npm packages.
tags: livestream,programming,opensource,javascript
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

Hey there and thanks for checking out this post. I'm building the habit of sharing what I have planned for upcoming livestreams. I have one scheduled for today, Friday, August 26th, 2022. If you're interested in joining our welcoming community as we learn together drop by the stream today starting at 12:30pm ET ([time zone conversions](https://time.is/1230PM_26_Aug_2022_in_ET/PT/UTC)).

### Stream Plans
Here's an outline of what you can expect on the stream today:

1. Celebrating community wins
2. Wordle and [Words on Stream](https://wos.gg) game together
3. Contributing to Open Source Software

#### Wins of the Week
If you've not joined us for the livestream before you might be wondering what this is all about. It's the beginning segment of the show where we take time to reflect on the past week and look to find the positive things that happened for which we're grateful.

The idea behind this is that I personally have had a tendency to dwell on the negative things. This exercise has helped me to break out of that habit (not all the time but more often now than before). My hope is that it'll help folks dealing with the same thing.

#### Wordle
We do this as a transition segment where I hide the chat and turn off the text-to-speech feature of my chatbot (something we built on stream) so folks don't spoil the game. Viewers seem to have fun laughing at my frustrations as I try to solve the puzzle.

#### Technical Topic
After we're warmed up from the previous two segments we dive into a technical topic for the day. This can vary from stream to stream but for this particular one we're jumping into contributing to some open source software projects from the community. The first one we'll look to help out with is [TAU](https://github.com/Team-TAU/tau) which stands for Twitch API Unifier. This project is super helpful for developers looking to interact with the various Twitch API's and interfaces. It makes it much simpler than trying to follow the Twitch developer documentation directly.

### How to Join
If any or all of that interests you and you'd like to see what this community is all about you can join us over on [Twitch](https://twitch.tv/clarkio). Hope to see you there 🙂👍

✌ Clarkio
Follow Friday: Open Source Edition (26 August 2022)
Tags: meta, writing, opensource
Published: 2022-08-26 16:06:56

---
title: Follow Friday: Open Source Edition (26 August 2022)
published: true
description: 
series: Follow Friday
tags: meta, writing, opensource
---

_Happy Friday, friends! 🎉 Follow Friday is your weekly opportunity to shout out fellow DEV Community members doing awesome work. Check out the comments and follow someone new!_

It’s no secret that we ❤️ open source. It’s a way of life here at DEV and [Forem](https://github.com/forem), and for that reason there are lots of brilliant open sourcerers in our community 🧙


So, devs: who are your favorite DEV community members writing about the highs and lows of developing in the world of open source?

P.S. If you’re interested in Commercial Open Source Software (COSS), you might enjoy hanging out with our friends at [COSS Community](https://www.coss.community/)!

_**Formatting tip**: to populate a card with a follow button, use the liquid tag syntax `{% embed https://... %}` and insert the URL of your favorite author's profile._

Join in on the #FollowFriday fun by @mentioning your favorite author to follow for all things OSS (and letting us know why you love their posts!) ⤵️
Data engineering 101: Introduction to Data Engineering
Published: 2022-08-26 13:25:00

#Data engineering
Data engineering is the process of building and designing systems for collection, storage, processing and analysis of raw data from multiple sources and formats. The aim of data engineers is to making quality data available for other users such as data scientist for better decision making. People who execute data engineering roles are called data engineers.

**Why is Data engineering important**
1.Helps source datasets across the globe managed by different technologies and stored in different formats.
2.Gives quality output data by cleaning any erroneous and duplicated data.
3.Helps convert data into a common format that can be used easily.
4.Allows manipulation of large scale data (big data).
5.Allows easy interpretation of data in multiple ways.

Data engineers are increasing in demand due to evolving technology in companies that collect numerous data day in day out. Data is important as it provides answers and solutions to arising questions about businesses and companies.

**The ecosystem of data engineering**
Data engineering has four major elements that form its ecosystem.

- Data
Raw information translated into a form ready for movement and/or processing. It comes in different formats, types and sources.
- Data stores and repositories
A store/repository is a storage space used for storing and managing collected data. In data engineering they include databases, warehouses, lakes and marts.
- Data pipeline
A set of tools and process that enable the flow of data from source system to the target repository/store.
- Data driven decision making
The use of data to inform strategic decisions that promotes critical thinking instead of intuition. However interpretation of the data is highly dependent on its quality, analysis and interpretation.

**Tools and Technology used in data engineering**
- ETL Tools
ETL (Extract, Transform, Load) tools are used to access data, move it between systems and transform it to a suitable and acceptable format.
- Python
Python is a general programming language, open source and able to work with different formats. It is mainly used for ETL tasks.
- SQL
Structured query language (SQL) is the standard language for querying relational databases.
-Cloud Data Storage
Includes platforms like Microsoft Azure, Amazon Web services (AWS), Google cloud platform.
- Query engines
This is a software that executes queries on large data on its server or database such as Hadoop and Spark.