teleren/devto huggingface dataset:
|JavaScript| JavaScript: Repeating Stuff with Loops
Tags: javascript, html, css, webdev
Published: 2020-12-07 01:43:17

---
title: |JavaScript| JavaScript: Repeating Stuff with Loops
published: true
description: 
tags: javascript, html, css, webdev
//cover_image: https://direct_url_to_image.jpg
---


           

              -Intro to For Loops
              -More For Loops Examples
              -The Perils of Infinite Loops
              -Looping Over Arrays
              -Nested Loops
              -While-Loop
              -Break Keyword

            
            
         

###Intro to For Loops
Loops allow us to repeat code 
There are multiple types:
for loops, while loops, for...of loop, for..in loop


####for loop 

```javascript 

for (let i = 1; i <= 10; i++) {
console.log(i); 
}

```



###Looping Over Arrays
It is possible to loop over arrays. 

```javascript 

const animals = [ 'lions', 'tigers', 'bears' ];

for (let i = 0; i < animals.length; i++) {
  console.log(i, animals[i]); 
}


```





###Nested Loops
It is possible to have a loop within a loop 

```javascript 

let str = 'LOL'; 
for(let i = 0; i <= 4; i++) {
console.log("Outer:", i); 
for (let j = 0; j < str.length; j++) {
 console.log(' Inner:', str[j]); 
}
}
```





###While-Loop

While loops continue running as long as the test conditional is true.


```javascript 

let num = 0; 
while (num < 10) {
  console.log(num); 
  num++;
}

```




###Break Keyword

```javascript 

let targetNum = Math.floor(Math.random() * 10); 
let guess = Math.floor(Math.random() * 10); 

while (true) {
 guess = Math.floor(Math.random() * 10); 
 if (guess === targetNum) {
 console.log(`Correct! Guessed: ${guess} & target was: ${targetNum} `); 
break; 
}
else {
console.log(`Guessed ${guess}...Incorrect!`); 
}
}

```


The break keyword is used with while loops, although technically you can use it with other loops, its just rare.
|JavaScript| JavaScript: Object Literals
Tags: javascript, html, css, webdev
Published: 2020-12-07 01:42:30

---
title: |JavaScript| JavaScript: Object Literals
published: true
description: 
tags: javascript, html, css, webdev
//cover_image: https://direct_url_to_image.jpg
---



              -Introducing Object Literals
              -Creating Object Literals
              -Modifying Objects 

     
            
         
###Introducing Object Literals
Objects are collection of properties. Properties are a key-value pair. 
Rather than accessing data using index, we use custom keys. 


```javascript 

const fitBitData = {

totalSteps : 308272, 
totalMiles : 211.7, 
avgCalorieBurn : 5755,
workoutsThisWeek : '5 of 7',
avgGoodSleep : '2 : 13'
};

```






###Creating Object Literals
All data types can be used to create object literals 

```javascript 

let comment = {

username: 'somethingSpecial43',
downVotes : 10,
upVotes : 211,
netScore : 120,
commentText : 'Taste like chicken', 
tags : ['#hilarious', '#funny', '#silly'],
isGilded : false
};

```
|JavaScript| JavaScript: Arrays
Tags: javascript, html, css, webdev
Published: 2020-12-07 01:41:31

---
title: |JavaScript| JavaScript: Arrays
published: true
description: 
tags: javascript, html, css, webdev
//cover_image: https://direct_url_to_image.jpg
---



              -Introducing Arrays
              -Array Random Access
              -Push and Pop
              -Concat, IndexOf, includes and reverse
        
   
    
            
###Introducing Arrays
Arrays are ordered collections of values. 

```javascript 

let students = []' 

let colors = ['red', 'orange', 'yellow']; 

let lottoNums = [19, 22, 56, 12, 51]; 

let stuff = [true, 68, 'cat', null]; 

```



###Array Random Access
Arrays are indexed meaning they hold values from
 0 - 255

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/d6pgi1ic0xbro3bt1v6d.png)



###Push and Pop
Arrays have a lot of different methods for using arrays in data structures. 
Some of the most common array methods are known as 

####push - add to the end 
####pop - remove from the end 
####shift - remove from start 
####Unshift - add to start 



####Concat, IndexOf, includes and reverse

####concat -merge arrays
####includes - look for a value 
####indexOf - just like string.indexOf 
####join - creates a string from an array 
####reverse - reverses an array 
####slice - copies a portion on an array
####splice - removes and replaces elements 
####sort - sorts an array
Basic Starter Kits for ReactJS
Tags: react, typescript, webdev, webpack
Published: 2020-12-07 00:55:17

Hi everyone! 👋

Recently, I created two starter kits for my [React Apps](https://reactjs.org/) ⚛. They are very simple and have the basics to start a quick project.

### Repositories links

1. [React using JSX](https://github.com/JohanVillanueva/react-starter-kit)
2. [React using TypeScript (TSX)](https://github.com/JohanVillanueva/react-ts-starter-kit)

### Features

- 💅 Styled Components
- 📦 Webpack 5.9 (includes CSS Loader)
- ⚡ TypeScript 4.1
- 📃 Linting with ESLint + Airbnb JS Style Guide
- 🐩 Pre commit hooks with Husky (Run linter before commit)

&nbsp;

**I hope they help you.**

&nbsp;

*💡 And one last thing... PR's are welcome!*

Happy coding! 🙋‍♂️
Get Temperature for Mac Mini M1
Tags: sensors, m1, temperature, applesilicon
Published: 2020-12-07 01:09:52

---
title: Get Temperature for Mac Mini M1
published: true
date: 2020-12-07 00:55:06 UTC
tags: sensors,m1,temperature,applesilicon
canonical_url: 
---

ตอนนี้ app เสียตังทะยอยกันออกมา สามารถตรวจสอบอุณหภูมิ และ ความเร็วพัดลมกันได้บ้างแล้ว ส่วนทาง open source ยังหายากอยู่ ลองหาๆ ดูมีคนหนึ่งเอา source จาก iOS มาดัดแปลง (มีความใกล้เคียงกันมากกับ iOS ?)

![](https://cdn-images-1.medium.com/max/1024/1*Se7N2a8b7XIqG5owfU3cIw.png)

### Source Code

[fermion-star/apple\_sensors](https://github.com/fermion-star/apple_sensors)

### Compile

#### monitor.cpp

```
clang -o monitor monitor.cpp -lstdc++
```

#### temp\_sensor.m

```
clang -o temp_sensor temp_sensor.m -framework Foundation -framework IOKit
```

### Use

```
./temp_sensor|./monitor
```

ส่วนความเร็วพัดลมยังไม่มีนะครับ คิดว่าน่าจะ get ค่ามาคล้ายๆ กัน

* * *
what Backend is recommended for VUE or REACT?
Tags: vue, react, django, database
Published: 2020-12-07 00:44:40

When your using Vue or React, what Backend is preferred to use? I've been using Django and Python, but that's because I've been focused on Python for a while. I kinda like Javascript, but tutorials don't completely use what there teaching in "context", they pretty much end at "console.log" and don't implement the last 1 or 2 different steps to take instead of that.
Trace Dapper.NET Source Code - The important concept of dynamic create method "code from  result" optimizes efficiency
Tags: dotnet, csharp, dapper
Published: 2020-12-07 00:32:06

Github Link : [Trace-Dapper.NET-Source-Code](https://github.com/shps951023/Trace-Dapper.NET-Source-Code)

----

## 6. Strongly Typed Mapping Part3: The important concept of dynamic create method "code from  result" optimizes efficiency

Then use Expression to solve the Reflection version problem, mainly using Expression features: `「Methods can be dynamically created during Runtime」` to solve the problem.

Before this, we need to have an important concept: `「Reverse the most concise code from the result」` optimizing efficiency. For example: In the past, a classic topic of "printing regular triangle stars'' when learning a program to make a regular triangle of length 3, the common practice would be loop + recursion the way

```C#
void  Main ()
{
  Print(3,0);
}

static void Print(int length, int spaceLength)
{
  if (length < 0)
    return;
  else
    Print(length - 1, spaceLength + 1);
  for (int i = 0; i < spaceLength; i++)
    Console.Write(" ");
  for (int i = 0; i < length; i++)
    Console.Write("* ");
  Console.WriteLine("");
}
```

But in fact, this topic can be changed to the following code when the length is already known

```C#
Console.WriteLine("  * ");
Console.WriteLine(" * * ");
Console.WriteLine("* * * ");
```

This concept is very important, because the code is reversed from the result, so the logic is straightforward and `efficient` , and Dapper uses this concept to dynamically build methods.

Example: 

- The Name property of User Class corresponds to Reader Index 0, the type is String, and the default value is null

- The Age attribute of User Class corresponds to Reader Index 1, the type is int, and the default value is 0

```C#
void  Main ()
{
  using (var cn = Connection)
  {
    var result = cn.Query<User>("select N'Wei' Name,26 Age").First();
  }
}

class User
{
  public string Name { get; set; }
  public int Age { get; set; }
}
```

If the system can help generate the following logical methods, then the efficiency will be the best

```C#
User dynamic method ( IDataReader  reader )
{
  var user = new User();
  var value = reader[0];
  if( !(value is System.DBNull) )
    user.Name = (string)value;
  value = reader[1];
  if( !(value is System.DBNull) )
    user.Age = (int)value;  
  return user;
}
```

In addition, the above example can be seen for Dapper `SQL Select corresponds to the Class attribute order is very important` , so the algorithm of Dapper in the cache will be explained later, which is specifically optimized for this.
Why SQL is important?
Published: 2020-11-07 13:15:55

SQL full form is Structured Query Language. [SQL](https://en.wikipedia.org/wiki/SQL) is a domain-specific language. It is used in application development language to enable a programmer to work with the data. The data is stored in a relational database. To manage this data, we have relational database management systems like SQL Server, MySQL, MS Access, etc. that use SQL as a standard database language.

#Here is why it is so important:

Career demand: Before jumping on to the specific use of SQL, it is essential to know where it is a must-have and why. SQL as a language is not only one of the most sought-after skills, but also one of the most well-paying. Its easy learning curve for the language tools and RDMBS tools like MySQL, SQL Server, PostgreSQL, among others makes it relevant and useful in a lot of jobs. Most importantly, an adequate level of SQL and understanding how to play with data can help you land SQL developer, Database warehouse admin, and even data scientist jobs. Despite it being easy to learn, SQL’s use makes it a must for any organization as handling data before working on it with data science and Big Data tools mostly need simple processing.

Handling data: When it comes to the subject of data processing, or accessing data from a variety of sources, usability, and universal use, SQL is one of the best and most widely used languages. The several RDBMS tools, as well as easy to learn and deploy functions, make it the foundation stone for your data-centred studies and career. Moreover, it is easy to learn, which means anyone can pick up the skills within some time and understand what’s happening at the backend. However, being genuinely skilled at SQL is another thing as it might be easy-to-learn, use, and understand, but mastery of any subject or tool needs practice and time.

Data volume and data science: If you are starting in data science or wanting to jump into Big Data, Machine learning, or any of the advanced data jobs, knowing your SQL well can give you a huge advantage. It is a perfect stepping stone both into understanding how data works, as well as these jobs that need advanced data comprehension skills. Moreover, SQL is not just a raw, easy to use the tool, its universal use, and scalability also makes it capable of handling a large amount of data even in intricate forms. It can control and access vast amounts of data from tables and be used to manage the entire organization or company’s data.

Plays well with other tools: SQL’s function to access and load data from a variety of sources also makes it one of the friendliest tools to work with. SQL is friendly with other tools if you are working locally, on the cloud, or handling vast amounts of data in an enterprise. You can access and connect SQL to a variety of tools for different purposes. You can use SQL with advanced data handling tools like R and Python and use its connectors with other tools as well.

If you want to become an SQL Developer, sign up for this [SQL Certification](https://intellipaat.com/microsoft-sql-server-certification-training/) program by Intellipaat.
Code Smell 44 - Magic Corrections
Tags: oop, programming, codenewbie, webdev
Published: 2020-12-07 00:18:10

*Compilers are smarter than us. On a Friday night production deploy they betray us.*

# Problems

- Fail Fast

- Declarativeness

- Ambiguity

# Solutions

1. Fail Fast

2. Do not trust magic coercion.

3. Be Explicit

# Examples

- Type Casting

# Sample Code

## Wrong

{% gist https://gist.github.com/mcsee/e86fe7a699dd825c3f238c6073b5e7ea %}

## Right

{% gist https://gist.github.com/mcsee/4daf2c3a710dfe5b647ec871d1d10ca8 %}

# Detection

Many of this vicious are encouraged by languages themselves. 

We should be very declarative and explicit and don't abuse language accidental magic solutions.
 
# Tags

- Declarative

- Smart

# Conclusion

Programmers pretend to be smart by exploiting language features.

They feel they belong to *community standards* that enforce bad behaviors like a sect.

# Relations

{% post https://dev.to/mcsee/code-smell-06-too-clever-programmer-37lb %}

# More Info

{% post https://dev.to/mcsee/fail-fast-48dm %}

# Credits

Photo by <a href="https://unsplash.com/@senor_sosa">Senor Sosa</a> on <a href="https://unsplash.com/s/photos/hacker">Unsplash</a>

* * *

> Hackers are arrogant geek romantics. They lack the attentive spirit of inquiry.     

_Bruce Sterling_
How to clean your commits with Git rebase
Tags: git, tips, todayilearned
Published: 2020-12-07 08:45:10

---
title: How to clean your commits with Git rebase
published: true
date: 2020-12-07 00:08:00 UTC
tags: git, tips, todayilearned
canonical_url: 
---

You know that moment when you are in local, trying to code a first version of a task. But then you need to checkout on another branch for a reason (fix/check something/continue to work on something else)? 

Well, you need to stop what you were working on and it happens that you don't have a proper commit message to write. So you come up with a quick message not very informative: "save", "changes" or whatever. 

And it happens several times. So you end up with a messy git directory.

When comes the day where your fix/feature is ready for a Pull Request, you check your git history. And it is dirty. Very dirty. You know what I mean?

Well if you are still in your local environment you can fix this problem: the holy and feared `git rebase`.

## Git rebase

> ⚠ **Warning:** Rebasing on a branch shared with others can lead to serious problems. Read more advanced posts about it, this post is only about local rewriting/cleaning.

If you are **in local** and **didn’t pull/push any changes**, you can use:

```bash
git rebase -i HEAD~n

# with n the number of commits to group together
# -i stands for interactive, you can manually pick and squash, rewrite, ... commits
```

For instance, let’s say I want to group these 2 commits:

```bash
commit xxxxxae742qwdqdj12xx78xxxxxxfxxxxxd70w (HEAD -> feature/add-the-best-feature)
Author: Francois <francois@mail.me>
Date:   Tue Dec 1 00:17:45 2020 +0100

    progress

commit yyyyyxqwqwjhbdhwqyyyyyyy57893yyyndd3er
Author: Francois <francois@mail.me>
Date:   Wed Nov 25 10:35:42 2020 +0100

    start to work
```

The steps to group them together and clean the git logs. `git rebase -i HEAD~2`

And replace the `pick` of commit `yyyyy` with a squash  (an interactive menu should appear to you)
and then saved/exit.
This will allow you to modify the commit message. For instance, I will use: *“feat: Work on this amazing feature”*.

Once you save you should see the following in git log:

```bash
commit 123456789012345678945678 (HEAD -> feature/add-the-best-feature)
Author: Francois <francois@mail.me>
Date:   Wed Nov 25 10:35:42 2020 +0100

    feat: Work on this amazing feature
```

Et voila 🙂
Building a podcast app
Tags: react
Published: 2020-12-07 14:27:03

---
title: Building a podcast app
published: true
date: 2020-12-07 00:00:00 UTC
tags: react
canonical_url: https://d-fisher.com/blogs/building-a-podcast-app
---

Creating an app can be daunting, especially at the beginning. A lot of people in the community say that they get stuck in tutorial hell. Personally, I’ve never had this problem. Tutorials are boring for me, I just want to make cool apps! I find it exciting applying new techniques, following the DRY rule and seeing new updates being implemented to the site.

However, planning applications is something new for me. Below you can see my rough draft of the component tree and the layout of the website. This was a very useful activity and gave me a road map on how to approach the containers and components whilst following the DRY rule.

![App_Layout_resize](https://res.cloudinary.com/dndp8567v/image/upload/v1607348663/App_Layout_resize_0a3f405e49.jpg)

After I started making the app, a few things started to become clear and I updated the design of the component tree and layout, as you can see below.

![App_Layout_2](https://res.cloudinary.com/dndp8567v/image/upload/v1607346656/App_Layout_2_e981cd6641.jpg)

Below you can see the progress of the app so far.

![Screenshot from 2020-12-06 17-12-39](https://res.cloudinary.com/dndp8567v/image/upload/v1607346502/Screenshot_from_2020-12-06_17-12-39_74fd3254be.png)

It has a long way to go! The aim of the project is to learn more about routing and testing, whilst using enzyme and jest. I’ll update the blog with my progress at some point during the week.
Absolute Imports in Next.js
Tags: nextjs, blogvent
Published: 2020-12-07 23:53:24

---
title: Absolute Imports in Next.js
published: true
date: 2020-12-07 00:00:00 UTC
tags: nextjs, blogvent
canonical_url: https://www.netlify.com/blog/2020/12/07/absolute-imports-in-next.js/
---

Welcome to Blogvent, day 7!

We’ve all been there, you’re organizing your files in a project, and you see a dreaded import statement:

```js
import Button from '../../../../designsystem/buttons/Button'
```

Gross. Now that you’ve re-arranged some folders and files, what breaks? What imports have to change? How many files have to be updated?

Next.js has a handy little feature built right into the framework for that, called **absolute imports**.

With absolute imports, you can alias certain folders to a name, and not have to worry about all of the files that change when you do!

## Implementing absolute imports

Make a (or use your existing) `jsconfig.json` at the top of your project. If you’re using TypeScript, you can make a `tsconfig.json` instead. Put something like this inside of that file:

```js
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@components/*": ["src/components/*"],
      "@designsystem/*": ["src/designsystem/*"],
      "@buttons/*": ["src/designsystem/buttons"]
    }
  }
}
```

The `baseUrl` here allows you to import directly from the root of the project (or wherever you put it), and the `paths` are all of the different paths that have a “nickname”.

Your import statement from earlier can now look like:

```js
import Button from '@buttons/Button'
```

Now, if you ever rearrange big folders, you can change it just in the one `jsconfig` file, or no changes will be needed because your imports in each individual file stay the same!

## Cool! How does this work in a production app?

Glad you asked! If you’d like to see a working example of this, check out the [Jamstack Explorers](https://explorers.netlify.com/?utm_source=blog&utm_medium=imports-cs&utm_campaign=devex) repository:

- [The jsconfig file](https://github.com/netlify/explorers/blob/main/jsconfig.json)
- [Example imports on the About page](https://github.com/netlify/explorers/blob/main/src/pages/about.js#L1-L3)
Need assistance with useEffect() dependencies
Tags: beginners, help, discuss, react
Published: 2020-12-06 23:50:04

Hey there! So I'm trying to figure out how to use `canvas` element in React.

![raf-screenshot](https://dev-to-uploads.s3.amazonaws.com/i/dkegj1ektl36mglre0jf.png)

Here is how my playground looks like. Canvas element, a dot travelling around the board and a button to start / stop the animation 

## The Issue

> The button is giving me hard time pausing and resuming the animation. When the dot stops programmatically, it takes a couple of extra clicks on the Start button to keep it moving. 

I suspect it has to do with `useEffect` and its dependencies.

Do you think you could take a look and give me some advice?
 
## The Code

I use `requestAnimationFrame()` method to update the animation.





```javascript
const reqRef = useRef()
const previousTimeRef = useRef()

const animate = time => {

    // some animation

    if (previousTimeRef.current !== undefined) {
        const deltaTime = time - previousTimeRef.current
    }

    previousTimeRef.current = time
    reqRef.current = requestAnimationFrame(animate)
    // stop
    if (shouldStop) cancelAnimationFrame(reqRef.current)
}

useEffect(() => {
    // start the loop
    reqRef.current = requestAnimationFrame(animate)
    // clean up
    return () => cancelAnimationFrame(reqRef.current) 

}, [shouldStop, previousTimeRef.current])
```

- `animate()` function loops itself 
- `useEffect()` starts the animation 
- `requestAnimationFrame()` method generates new `reqRef` value with each run 
- in order to stop the animation you have to use `cancelAnimationFrame(reqRef.current)` with the current reqRef

## Approach

I use `shouldStop` as a key to pause the animation.

```javascript
 const [shouldStop, setShouldStop] = useState(true)

<button onClick={() => setShouldStop(!shouldStop)}>
```

At the start it works as expected
- The button flips the key 
- useEffect fires, as `shouldStop` is set as its dependency, and sets the loop

```javascript
    if (positionX < 0) {
        setPositionX(290)
        setPositionY(165)
        setShouldStop(!shouldStop)
    }
```

When the dot bounces at the edge, the app resets its position and flips the key back to `true`. The dot rests in the middle of the screen. 

And now when I press the button, the key switches to `false` yet nothing happens. After the second click key switches to `true` again. And only on the third time the key switches to `false` and the dot starts moving.

## So
I guess I have three questions 😼
- Is it a proper approach overall?
- What am I missing about the useEffect()?
- How do you trace / investigate those issues?
Static Web Apps on DevOps Labs
Tags: serverless, webdev, javascript
Published: 2020-12-10 02:49:24

---
title: Static Web Apps on DevOps Labs
published: true
date: 2020-12-06 23:38:05 UTC
tags: serverless,webdev,javascript
canonical_url: https://www.aaron-powell.com/posts/2020-12-07-static-web-apps-on-devops-labs/
---

A few weeks ago I sat down with [Damian Brady](https://twitter.com/damovisa) (in our respective home offices 😂) to talk about [Azure Static Web Apps](https://docs.microsoft.com/azure/static-web-apps/?WT.mc_id=javascript-10275-aapowell) for the [DevOps Labs show](https://www.youtube.com/channel/UC-ikyViYMM69joIAv7dlMsA).

Check out the session, with demo failures and all!

{% youtube Ta2QjwcO2p8 %}

_No really, we didn’t mean for the build to be broken, but it worked well!_
Dashboard navigation side menu | Speed Coding
Tags: css, javascript, html, tutorial
Published: 2020-12-06 23:33:59

Dashboard navigation side menu speed coding with click animations made with HTML, CSS and Javascript. Hope you like.

<img src="https://raw.githubusercontent.com/romaopedro199/dashboard-navigation-side-menu/main/screenshot.png" alt="Dashboard navigation side menu" title="Dashboard navigation side menu" width="800"/>

https://www.youtube.com/watch?v=qL6_hrGg9t8

-

Source:
[https://romaopedro.com/articles/dashboard-navigation-side-menu-speed-coding/](https://romaopedro.com/articles/dashboard-navigation-side-menu-speed-coding/)

Follow me:
[https://github.com/romaopedro199](https://github.com/romaopedro199)

Articles, tutorials and projects:
[https://romaopedro.com/](https://romaopedro.com/)