teleren/devto huggingface dataset:
Javascript Methods for Working with Objects {}
Published: 2021-10-25 04:30:34

Objects are a very commonly used data type in which data is stored using key value pairs. To create an object you can do the following. In the example below we create a beer object with key value pairs for name, ABV, and price. There are multiple ways to instantiate an object as shown below.

```js

let beer = { name: 'Hopadillo', ABV: '6.6%', price: '$2.00' }

// OR 

let beer = new Object({ name: 'Hopadillo', ABV: '6.6%', price: '$2.00' })

// OR 

function alcohol(name, ABV, price){
  this.name = name;
  this.ABV = ABV;
  this.price = price;
}

let beer = new alcohol('Hopadillo', 'red', '6.6%', '$2.00')

// OR 

class Alcohol {
  constructor(name, ABV, price) {
    this.name = name;
    this.maker =  maker;
    this.engine = engine;
  }
}

let beer = new Alcohol('Hopadillo', '6.6%', '$2.00');
```
**1. Object.keys()**

This method gets all the keys of an object and puts them in an array. Here is an example using our beer object:

```js
let beerKeys = Object.keys(beer)

// console.log(beerKeys) 
// ["name", "ABV", "price"]
```

**2. Object.values()**

This method gets all the values of an object and puts them in an array. Here is an example using our beer object:

```js
let beerValues = Object.values(beer)

// console.log(beerValues)
// ["Hopadillo", "6.6%", "$2.00"]
```

**3. Object.entries()**

Object.entries() creates a new nested array with each key value pair being converted into an array.

```js
let beerEntries = Object.entries(beer)

// console.log(beerEntries)
// [
//   ['name', 'Hopadillo'], 
//   ['ABV', '6.6%'], 
//   ['price': '$2.00']
// ]
```

**4. Object.fromEntries()**

Object.fromEntries() is used to convert an array into an object. It’s basically the opposite of Object.entries().

```js
let beer = [
  ['name', 'Hopadillo'], 
  ['ABV', '6.6%'], 
  ['price', '$2.00']
]

let beerFromEntries = Object.fromEntries(beer)

// console.log(beerFromEntries)
// {
//   name:"Hopadillo",
//   ABV:"6.6%",
//   price:"$2.00"
// }
```

**5. Object.assign()**

Object.assign() is used to merge multiple objects into one object.

```js
let beer = { name: 'Hopadillo', ABV: '6.6%', price: '$2.00' }
let beerBreweryLocation = { state: 'Texas' }

let beerObj = Object.assign(beer, beerBreweryLocation)

// console.log(beerObj)
// {
//   name:"Hopadillo",
//   ABV:"6.6%",
//   price:"$2.00",
//   state:"Texas"
// }
```

There are of course other methods that you can use on objects, but you likely won’t run into them in the wild too often. To see a more extensive list of methods that can be used on objects check out MDN.
If you found this article helpful check out my open source livestreaming project ohmystream.
Chromium console stopped working. - What's wrong? How do I fix it?
Tags: chromium, webdev, help, linux
Published: 2021-10-25 04:20:13

Recently, after it working for a while, the console in Chromium gave-out, as in doesn't work.
Pressing `ctrl+i`, `ctrl+shift+j`, or `f12` doesn't work. I tried pressing the three-dots, then to "Developer tools"<sup>under "More tools"</sup> manually, but pressing that option doesn't work, nor does "Inspect" in the default content menu work.
The options aren't grayed out (at least not that I can tell), but nothing happens, and I'm not notified of any errors.

I'm on Arch Linux + KDE Plasma, with x86_64 archt.
Extra details:
```
Chromium Version: 95.0.4638.54 (Official Build) Arch Linux (64-bit)
Chromium Revision: d31a821ec901f68d0d34ccdbaea45b4c86ce543e-refs/branch-heads/4638@{#871}
Linux Kernel Version: 5 10.75-1-lts (64-bit)
Date: October 24. 23:20, 2021.
```
Today I successfully completed Hacktoberfest 2021!
Tags: javascript, hacktoberfest, java, opensource
Published: 2021-10-25 04:16:48

Hacktoberfest 2021 was a great kickstart for my open source journey. It was an amazing experience contributing to the projects.
Thank you Hactoberfest and DigitalOcean for bringing this awesome opportunaty for me!!
Exporting Blazor TreeGrid to Excel with Complete Customization
Tags: blazor, dotnet, csharp, webdev
Published: 2021-10-25 04:02:58

Learn how to perform excel exporting in our [Blazor TreeGrid](https://www.syncfusion.com/blazor-components/blazor-tree-grid) component. You will also learn how to customize the file name, theme, header, and footer of the exported excel document. 

Download an example from GitHub: https://bit.ly/3vq2rjE

 Refer to the following documentation on excel exporting in the Blazor TreeGrid component: https://bit.ly/3DZjcFk 

Check out this online example of excel exporting in the Blazor TreeGrid component: https://bit.ly/3G0DAYK 
 

{% youtube FNVCqLmaF1A %}
Slots
Published: 2021-10-25 03:57:18

Slots is definitely a topic that when I first started working with them and seeing them in code, I was left utterly confused. After working with a team and taking a web components class, slots aren't as hard as I originally saw them as and have learned how to use them. Currently, my team is working with cards such as the one attached. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/43xg4iu5u4ioeqkhehdo.png)
#Example of slots in our Card
While I am currently focused on the Icon portion of the project, the example I am attaching in our code is within the card banner section because of how organized it is and the use of it. There are two slots defined in this as name slots. Using slots it allows us to have structure and share content within the elements that are created. Slots are more clear to read and use. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7l8ngolposopz7tpcx2c.png)

github link: https://github.com/njd5435/project-two/blob/master/src/SciCardBanner.js
Slot Tags in LitElements
Published: 2021-10-25 03:53:05

In a recent post I discussed a card project I am working on. (shown below)

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

To recap this card is made up of four components:
1. icon
2. banner
3. scaffold
4. card

For this project my group and I are utilizing the slot tag to make out card more dynamic and flexible.  The slot tag acts a placeholder in web components that you can then populate with any mark up you would like.  This allows for flexibility when creating different web components.

To do this we give the slot a name attribute.  We later then can use that name to determine where to put that HTML.

Our approach is to import the icon into the banner and slot in it to the render function, as well as the main header and sub header.  This will allow the program to easily fill the banner with the correct header, sub header, and icon for that specific card.

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

  
For scaffold we are importing the banner and slotting the banner, icon, and content that will be in the body of the card (below the banner)

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

Here is my team's [repo] (https://github.com/table-in-the-corner/project-two) if you want to look more in depth on how we used the slot tag and our team's progress.
Slot Slot Slot
Tags: webdev, programming, css
Published: 2021-10-25 03:31:19

If you are following along with my post, as you may know I am on a team with my fellow peers and we are continuing to work on our web components to make a working card. The census of the team was to break the card up among all of us through different components such as the icon, the card framework, the banner, everything all together.

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

**Slot Composition:**

Utilizing slots can help to make content look and seem more aseptically pleasing. I took the liberty of drafting some very basic level HTML to further show how to create separate DOM trees with different elements all rolled up into one, together.

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

We are looking to use slots to pass the HTML into the different parts of the card such as the header, sub header, and the overall body as mentioned above.

**Our Code & Examples:**
Our code is still a work in progress and we are still working out some kinks as we speak. Learning-card has been recently created with a decent amount of slots.

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

In this image, the div wraps around the entire created banner with icon called with the header. The two slots inside that are contained, pertain to the header and the sub header. This maps on a different scale to what I mentioned above. This shows how slots are used inside the component.


**Link to Repo:** 
https://github.com/TheKodingKrab/project-two
https://github.com/Taylor-Bracone/project-two
Slot Composition 
Published: 2021-10-25 03:24:27

Slot composition is a helpful skill that I have been trying to understand more and more.  Currently, I am working along a team of 3 other students to create a card project.  The final product of this project should look similar to this image below. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qhl6hj5up5o70umywtd4.png)

My group and I are using four different elements to complete this project.  Those four elements are a card, card scaffolding, an icon, and a header.  I have been looking into how I can use slot composition to complete these different elements and create a smooth relationship between these elements. I have never used the slot while coding and it is not the most simple thing to understand as I have come to find out through examples I have seen in class and my own independent research.  What I have found is that I can use the slot tool to place the information that I would like to be rendered in a more organized fashion taking that information from a separate position in my code. 

If you take a look at the code below from my project, you can see how slot is being used in js file to call the information from header. 

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

The slot is being used within the div.  This is the same architecture that I am trying to get myself more familiar with as this will create much more organized elements that work well with each other internally.
Why is Python popular?
Tags: programming, python, datascience, machinelearning
Published: 2021-10-23 14:12:18

Python is a high-level, general-purpose programming language. It was created to have a syntax that would be easy to read and simple to understand. [Python](https://pythonscholar.com/) is also used for data science, machine learning, artificial intelligence, and other tasks where one needs a language that handles computation very efficiently.

Python is popular because it’s not too hard to learn and read. This makes it ideal for beginners or those looking for a way to make their code more efficient without learning another programming language. Even though Python isn’t as popular as other languages like C++, JavaScript, or Ruby on Rails, it still has its community of users who use the coding language for different purposes spanning [web development, data science, or machine learning projects](https://pythonscholar.com/python-projects/).

Python is one of the most popular programming languages in the world. It’s one of the easiest to learn and use for people who are new to programming. It is also very versatile and can be used for various types of applications such as web development, networking, data analysis, multimedia, etc.

Since Python is open-source and has a large community of developers contributing to it, it has become an attractive language among programmers.

Python is a [popular programming language](https://pythonscholar.com/python-programming/) because it is simple, powerful, and versatile. Python has an easy-to-learn syntax and has powerful libraries like scikit-learn, pandas, NumPy, and Matplotlib, to name a few.
Python is also considered to be an excellent data science language for data analysis. Python offers many features that make it an excellent choice to learn in the data science arena, including its scalability and a wide variety of packages to choose from.
Python is also used in scientific computing for scientific visualization. It also has libraries specifically designed for this purpose, such as matplotlib or seaborn, which users can use without having much knowledge of graphics programming languages like C++ or Fortran.
Laravel How to Get .env Variable in Controller and Blade
Tags: laravel, beginners, webdev, programming
Published: 2021-10-25 03:14:11

In this tutorial I will give you information laravel how to get .env variable in controller and blade. many time we need to required of .env variable in controller and blade file like if you are creating google map integration then you have stored app id and secret key in env file. But if you haven't any idea how to get it in controller or blade file. You can also set app URL and many other things on .env file.

So, let's check how to get those variable data from .env file.

Syntax : 

```
env('VARIABLE_NAME');
``` 

Example :  

just put the same line in your .env file.

```
Google_API_Key=XXXXX
```

Access set variable in .env file using env() function.

```
env('Google_API_Key');
``` 

Blade file

```
@if(env('APP_ENV') == 'local')
   Match
@endif
```

Controller

```
if(env('APP_ENV') == 'local')
{ 
  echo 'Match';
}
```

So, it is very simple to get variable data from .env file like this.
code every day with me
Tags: javascript, programming, 100daysofcode, algorithms
Published: 2021-10-25 03:06:30

**--DAY 7--**
Hi, I am going to make #100DaysOfCode Challenge. Everyday I will try solve 1 problem from leetcode or hackerrank. Hope you can go with me until end.
**Now let's solve problem today:**
-Problem: Remove Element
-Detail: https://leetcode.com/problems/remove-element/
-My solution (javascript):
```
var removeElement = function(nums, val) {
    let i=0;
    for(let j=0;j<nums.length;j++)
        if(nums[j]!=val){
            nums[i]=nums[j];
            i++;
        }
    return i;
};
```
-->*If you have better solution or any question, please comment below. I will appreciate.*
Slot Composition
Published: 2021-10-25 02:52:43

I am currently working on a project to create a card using this layout:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5nvwbtes8oikdyjvhkzm.png)

**Defining Slot Composition**
In our code we are using slot composition. Slot composition is used to pass code through elements. Code from things like the icon or the header of the card can be passed through. Below are a couple of examples on how slot composition works.

**Examples of Slot Composition**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7rf808m3jxthuj1hpovy.png)
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/praye2wjsw26d7iia7ph.png)
 
*Sources*
[Javascript.info](https://javascript.info/slots-composition)
[vuejs.org](https://vuejs.org/v2/guide/components-slots.html)
[lwc.dev](https://lwc.dev/guide/composition)
Caddy Server 簡介
Tags: caddy
Published: 2021-10-25 02:50:16

## 簡介

[Caddy](https://caddyserver.com/) 是一個年輕的 web server，以 Go 語言撰寫，特色：

- 支援自動從 Let’s Encrypt 取得與更新 TLS 1.3 加密憑證。
- 以 HTTPS 作為預設的通訊協定。
- 支援 HTTP/3。
- 支援 IPv6。
- 不依賴其它套件或 runtime，可獨立執行，因此很適合放在容器內跑。
- 以 production 為目標，可替代爺爺級的 Apache 或 Nginx。
- 提供組態設定 API。
- 支援 virtual host。
- 支援 reverse proxy。
- 支援 rewrite。
- 支援壓縮。

當然其它特色還很多，但其中比較值得一提的就是上面這幾點。

## 下載

前面提到 Caddy 本身不用依賴其它套件，所以官方發布的就只是個單一的執行檔，撇開之後由我們自己產生的設定檔不算的話，這就是 Caddy 的全部了！也或許是這樣的緣故，Caddy 並沒有提供任何的套件包或安裝檔。

依照 Caddy 網站的路徑下載 caddy，這裡我們直接抓 Caddy 2 的版本（以下的範例也都是以 Caddy 2 為基準），抓下來的檔名因版次或平台不同會有差異，先改名成簡潔的 `caddy`，再幫它加一下可執行的屬性：

```sh
> chmod a+x ./caddy
```

## 靜態網頁伺服器

在 Caddy 所在位置新增一個 index.html，內容如下：

```html
<h1>Hello Caddy!</h1>
```

最單純的用法，這個簡易的指令體現了 Caddy 的簡潔：

```sh
> ./caddy file-server

2019/11/30 00:36:24.301 WARN admin admin endpoint disabled
2019/11/30 00:59:38.744 INFO tls cleaned up storage units
2019/11/30 08:36:24 [INFO][cache:0xc0000d0140 Started certificate maintenance routine
2019/11/30 08:36:24 Caddy 2 serving static files on :2015
```

從最後一行我們可以知道埠號是 2015，Caddy 會去找當前位置下的 index.html 來顯示，因此用瀏覽器開 127.0.0.1:2015 應該會看到如下圖畫面：

![Hello Caddy!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6z0wn9nc5cc88innn4sk.png)

## 檔案伺服器

先把剛剛的 index.html 改名或刪除，再加上 `--browse` 來跑，`--browse` 表示如果找不到 index.html，就列出當前位置下的檔案：

```sh
> ./caddy file-server --browse

2019/11/30 00:36:24.301 WARN admin admin endpoint disabled
2019/11/30 08:36:24 [INFO][cache:0xc0000d0140 Started certificate maintenance routine
2019/11/30 08:36:24 Caddy 2 serving static files on :2015
```

從最後一行我們可以知道埠號是 2015，打開 127.0.0.1:2015 應該可以看到類似下面的畫面：

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

前面指令內的 `--browse` 表示開啟瀏覽目前 Caddy 所在位置的目錄檔案清單 ，也就是上面看到的抓圖內容。

## Caddyfile

前面都是簡單的範例，如果要做比較正規的應用，則需要一些組態設定，在 Caddy 的世界，除了用 API 之外，還支援 Caddyfile 的設定檔，API 與 Caddyfile 不同之處在於，API 必須使用 JSON 格式傳遞溝通，而 Caddyfile 的語法更像是傳統的定檔的格式，對人類來說更容易讀寫。

這裡必須再提一次這篇文章是講 Caddy 2，因為 Caddy 1 與 Caddy 2 的 Caddyfile 是不同的，雖然不同，但只是設定檔的關鍵字與格式不同，整體的 Caddyfile 語法結構還是相同的，所以還是得參考 Caddy 1 的 [The Caddyfile Syntax](https://caddyserver.com/docs/caddyfile) 來了解 Caddyfile 的結構。

沿用剛才的例子，做一個簡單的 index.html，以及一個 Caddyfile 內容如下：

```
localhost:8080 {
  file_server
}
```

應該很容易理解，第一行表示監聽 localhost:8080，並且後方以大括號包住的區塊都是這組 localhost:8080 的設定。（在  Linux 針對埠號 1024 以下的常用埠號有權限限制，如果沒有權限的用戶要監聽埠號 80 的話會被系統阻擋，故要監聽 1024 以下的埠號須以 root 權限跑 Caddy。）

第二行表示啟動靜態檔案伺服，有 index.html 就會回應出去，並且未開啟目錄瀏覽。

跑起來看看：

```sh
> ./caddy run
```

`caddy run` 會自己去找同樣位置下的 Caddyfile，所以應該會看到同樣的 Hello Caddy! 網頁：

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

## Virtual Host

如果想要設定兩組網址，以 www1.example.com 與 www2.example.com 為例，可能的 Caddyfile 會長這樣：

```
www1.example.com:80 {
  root /www/www1.example.com
  file_server
}

www2.example.com:80 {
  root /www/www2.example.com
  file_server
}
```

在上面的例子中，我們用 `root` 來指定該組網址對應到的真實路徑。

## 結語

這篇文章介紹了 Caddy 2 的特性與 Caddyfile 的基本設定，並且只涉及到 Caddy 本身，關於 Caddy 與其它 web framework 之間的整合之後有機會再另外寫一篇。

Caddy 2 的文件還沒有很完整，想要用的人還是必須多多參考 Caddy2 網站或 Caddy wiki 的文件。
COOL Compiler for AArch64
Tags: compiler, computerscience, aarch64, mips
Published: 2021-10-25 02:47:56

[Repo](https://github.com/tingwei628/cool-compiler-1/blob/tingwei628-aarch64/doc/aarch64.md)

  There're several things to share after I changed target code generation of [COOL](https://en.wikipedia.org/wiki/Cool_(programming_language)) Compiler from [MIPS32](https://en.wikipedia.org/wiki/MIPS_architecture) to [AArch64](https://en.wikipedia.org/wiki/AArch64).

  First of all, I learned basic instructions of AArch64 and how to cross compile COOL codes into AArch64 assembly codes via [dockcross](https://github.com/dockcross/dockcross).

  Secondly, "Alignment" is so important from 32-bit system to 64-bit system, especially [stack pointer](https://community.arm.com/arm-community-blogs/b/architectures-and-processors-blog/posts/using-the-stack-in-aarch32-and-aarch64) in AArch64.

  Thirdly, "[watch](https://sourceware.org/gdb/download/onlinedocs/gdb/Set-Watchpoints.html)" in gdb is helpful while debugging segmentation faults.

  Finally, I appreciate [CS143 Compilers](https://web.stanford.edu/class/cs143/), which is a very wonderful course.

Thanks~
Handling JavaScript Promises with Async/Await
Tags: javascript, tutorial
Published: 2021-10-25 02:24:18

While working on a Node.js project at work recently, I had the opportunity to expand on a number of concepts I learned during my bootcamp studies. I really got into a zen place where I was jamming out code the way I had during my projects!!

One of the things I delved into was learning async/await. The sample code we were using as a resource was using async/await to ensure data was returning from a call to a remote source. While I understood in theory how it should work, I hadn't had the chance to implement that syntax myself. I recalled one of my Flatiron instructors stating that I would be able to understand async/await when I was ready to study it, so I held onto that thought and dove into the code.

During my bootcamp studies, I learned to resolve promises by chaining callbacks, like this simple `GET` request.

```JavaScript
const getCats = () => {
    return fetch('./cats.json') // get the contents of a file
        .then(response => response.json()) // parse the return data as JSON
        .then(data => {
            console.log(data) // display the data in the console
        })
}
```

One of the reasons I selected Flatiron School for my studies was their use of spaced repetition to cement a concept. I practiced writing these kinds of promise resolutions at various intervals across several weeks. Both the syntax and the way the code was handling the data and callbacks became very ingrained in my working memory.

Because of this deep-seated knowledge, I was quickly able to comprehend and apply the example provided in the official Node documentation knowledge article ["Modern Asynchronous JavaScript with Async and Await"](https://nodejs.dev/learn/modern-asynchronous-javascript-with-async-and-await) to switch to using async and await. I explained the concepts to my colleagues with a similar alignment to that included in the article; the analogous lines are marked with the same comment.

**Resolving promises with callbacks**
```JavaScript
const getCats = () => {
    return fetch('./cats.json') // get the contents of a file
        .then(response => response.json()) // parse the return data as JSON
        .then(data => {
            console.log(data) // display the data in the console
        })
}
```

**Resolving promises with async/await**
```JavaScript
const getCats = async () => {
    const response = await fetch('./cats.json') // get the contents of a file
    const data = await response.json() // parse the return data as JSON
    console.log(data) // display the data in the console
}
```

Using async/await makes the code easier to read and understand. Per the Node.js article, another benefit relates to debugging. Because the compiler sees async/await as similar to synchronous code, it is possible to step into the code and resolve issues.

I enjoyed implementing an elegant solution using async/await and will be looking for more opportunities to practice using this new tool.
I created my first NPM package
Tags: javascript, typescript, npm, webdev
Published: 2021-10-25 02:04:29

Hello all! I am excited to announce that I have published my first NPM package. It's not super fancy or anything and is most certainly a work in progress. That being said, if anyone has time to check it out and provide feedback, [here is the link](https://www.npmjs.com/package/gedate). The library provides useful methods when working with dates in JavaScript/TypeScript. I wrote it in TypeScript, so you get type declarations right out of the box. 

I'd appreciate any feedback. Also, if you want to contribute, just let me know :)

This has definitely been a learning experience for me. I live in my own little world as a front end developer. I install and use npm packages but never really considered that anyone can write one and publish it.
Slot Composition
Published: 2021-10-25 01:32:05

As mentioned in the previous post, I am working on a project to create the following card. 

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

Slot composition is used to pass slotted code between multiple elements. It can be used to pass code form the header or content of the card and then into scaffold. One example of how this is used is shown below.

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