teleren/devto huggingface dataset:
What the heck are MIME types?
Tags: mime, html, http, https
Published: 2021-03-23 15:24:24

---
title: What the heck are MIME types?
published: true
description: what are MIME types
tags: mime, html, http, https
---

# What the Heck Are MIME Types?

There is a good chance that you have heard of the term "MIME types" (no, not MEME types... MIME types). What are those?

MIME stands for Multipurpose Internet Mail Extensions that defines a media type. It is a specification standard to describe the format of a document file.

## Why Did We Use MIME Types?

The internet revolves around client-server interactions. Client sends a HTTPS request. Server receives the request and sends a responds back to the client with some data. Client receives the response data, processes it accordingly, and displays the rendered product to the user. Repeat.

*Question: how do client and server tell each other how to interpret those data?*

If the server sends a HTML page, the client needs to know that it is a HTML page. You don't want your browser to process a HTML file like a Stylesheet file!

This is where the MIME type comes in. A MIME type is a way for the server to inform the client the type of the file being sent.

For example, you're bored at work so naturally you need to see pictures of cute cats. You found a URL for cute cat photos. Your client tells the server of that URL, *"Hey server, GET me everything I need for the page `https://example.com/super-cute-cats`!"*. 

Let's say that the server sends back a HTML file and a CSS file. If you check the HTML file, in the HTTP response header, it would say `Content-Type: text/html`. If you check the CSS file, it would say `Content-Type: text/css`. These "content-type" headers are examples of MIME types. The types `text/html` and `text/css` are standards. When the client receives them, they'll know what to do. 

## MIME Type Structure

The basic structure of a MIME type is the type and the subtype, separated by a slash. There is no white space between them.

```
type/subtype
```

Sometimes you may see a parameter with the following syntax:

```
type/subtype; parameter=value
```

For example: `content-type: text/css; charset=UTF-8`.

## MIME Type Examples

You can actually look it up yourself! Open up the Devtool and go to the Network tab. Refresh the page. You should see a number of files being downloaded (HTML document, Stylesheet documents, images, Javascript files, etc.). Click on any of them. Go to the response headers section. You should see a line that says `Content-Type`. See what type of MIME type that file has.

There is a MIME type for video, font, text, audio, even application, and more. Here are some examples of common MIME types:

```
application/zip
application/json
audio/aac
audio/mpeg
font/woff
font/woff2
image/tiff
image/png
image/jpeg
text/plain
text/javascript
text/css
video/mpeg
```

For a list of all discrete types, check out the Mozilla page on [MIME types](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types).
On .NET Episode: C# Source Generators
Tags: dotnet, csharp
Published: 2021-03-23 15:10:59

The source generators feature was adding in .NET 5. They allow you to do interesting things like generate additional source files that will get added to a compilation.

In this video, Kathleen chats with Jared Parsons to find out what source generators are capable of.

{% youtube cB66gOHConw %}

If you liked this video and would like to see some more of our .NET content, please subscribe to our [.NET Developers YouTube Channel](https://www.youtube.com/channel/UCvtT19MZW8dq5Wwfu6B0oxw).


<ul>
<li><a href="https://devblogs.microsoft.com/dotnet/introducing-c-source-generators/?WT.mc_id=dotnet-00000-cephilli" target="_blank">Introducing Source Generators</a></li>
<li><a href="https://github.com/dotnet/roslyn/blob/main/docs/features/source-generators.cookbook.md" target="_blank">Source Generators Cookbook</a></li>
<li><a href="https://devblogs.microsoft.com/dotnet/new-c-source-generator-samples/?WT.mc_id=dotnet-00000-cephilli" target="_blank">New C# Source Generator samples</a></li>
<li><a href="https://github.com/dotnet/roslyn-sdk/tree/main/samples/CSharp/SourceGenerators" target="_blank">Source Generator Samples</a></li>
<li><a href="https://docs.microsoft.com/dotnet/core/dotnet-five?WT.mc_id=dotnet-00000-cephilli" target="_blank">What&rsquo;s new in .NET 5</a></li>
</ul>
The basics of Programming
Tags: codenewbie, programming, coding, computerscience
Published: 2021-03-23 14:59:39

Hello 👋 Coders, This is my first blog post so thought why not cover the basics as it will be easy for me  to start with and easy for you to understand if you're beginning your coding journey.

**So, let's start with one step at a time..**

**What is Programming?**

Programming is the process of giving computer intructions on how to act. Yes, this is it. Wait wait..how can one give instructions of computer. Do Computers understand us? The answer is no, Computers cannot understand us. They understand only binaries (0 and 1). The instructions that we give them are given through code.
This code can be in various programming languages. 

Programming language is a language that is used by programmers to communicate with computers. It is a set of instructions written in any specific language like C++, Java, Pyhton, etc.

There are five basic concepts in any Programming Language..

* **Variables**
* **Conditional Statetments**
* **Looping & Iteration**
* **Data types and Data Structures**
* **Functions**

**Variables**

Consider them a boxes, that are used to store data or reference to data. There can be many properties of variables like a name, type, value, scope, lifetime and location. We'll discuss them in details in my future posts as this is out of scope for now.

**Conditional Statements**

These statements are also known as "if-else" statements, and it is as simple as it sounds. Yeah, you guessed it right. If the given condition satisfies do this or do that (execute else codition).

**Iteration & Looping**

Let me ask you something. What if you want to print some statement more than 100 times. What will you do? OK OK I am not considering that your typing speed is 200 wpm. Even if you have, why will you type something again and again if you can do the same in less than 3 lines. Here comes iteration and looping. If program repeats a sequence or process, that is an iteration. Loops are a type of iteration, where a program carries out an action until new condition is met. In easier words, you will not need to write the same thing again and again.

**Data Types & Data Structures**

A Data Type is the most basic classification of a data. So, basically it is the type of any variable used in the code. Some of the basic examples are int, double , string, etc.

Data Structures on the other hand are a collection of data types. It is a way of organizing the items in terms of memory, and also the way of accessing each item through some defined logic. Some examples of data structures are stacks, queues, linked lists, binary tree and many more. I know this might be too much. Don't worry about them now, you do not need to deal with them initially.

**Functions**

A function is a contained block of code that can perform an action. For now you can remeber them as they are the "something" which can be used multiple times in a program and allows use to reuse the same piece of code instead of writing it again and again.

This was it? Write down in comments and let me know if it was helpful.
Creating a Wine Recommendation Application using React
Tags: react, javascript, webdev
Published: 2021-03-23 14:46:45

So I started by looking first for an API I could use for any project idea and I stumbled upon Spoonacular API, [https://spoonacular.com/food-api]. This API has many different end points that could be used for different projects. (*Possibly more projects to come using this API). However for this project, I used two of their end points. 

I used their *“Get Dish Pairing for Wine”* end point where you type in a type of wine (*ex. Malbec, Pinot Grigio, Rose Wine, … etc*) and the API will return a couple of different dishes that would pair nicely with that wine. The second end point I used was *“Get Wine Pairing”* where you type in a dish name (*“steak”*), or an ingredient name (*“salmon”*), or a cuisine (*“Italian”*) and it will return a couple of different wines that would go well with that food given. 

So I created an input field where you get the value of what was typed into the input field. Then I added that value to the url of the end of both of the end points. Each one is an AJAX call in their own component. I then put both components into a ternary operator. Whichever one returns JSON info that is not an error becomes the data that is shown on the web page because I created variables looking for certain info in the JSON that are not errors. So the one that returns info that is able to populate the variables then that gets passed down into another component that is responsible for creating a paragraph element with the JSON information. Finally the app re-renders and populates the info on the web page for the viewers to see.
Configuring Twilio account in webMethods.io Integration Workflow
Tags: twilio, integration, configuration, tutorial
Published: 2021-09-02 14:20:17

---
title: Configuring Twilio account in webMethods.io Integration Workflow
published: true
date: 2021-03-23 14:32:39 UTC
tags: #twilio, #integration, #configuration, #tutorial
canonical_url: https://tech.forums.softwareag.com/t/configuring-twilio-account-in-webmethods-io-integration-workflow/239941/1
---

## Summary:

This article describes configuring an account to **Twilio** in **[webMethods.io](http://webMethods.io) Workflow**

## Pre-requisites:

• Active **Twilio** account

• Active **[webMethods.io](http://webMethods.io) Integration** tenant

## Contents:

Section 1: Configure a **Twilio** account

Section 2: Setting up a **Twilio** account in **[webMethods.io](http://webMethods.io) Integration** tenant

### Section 1. Configure a Twilio account

1. [Sign up](https://www.twilio.com/try-twilio) to **Twilio** or [login](https://www.twilio.com/login) if you already have an account.
2. You can use the default project or create a new custom project. To create a project, click on the dropdown in the top left corner and select **Create New Project** option.
![Twilio](https://aws1.discourse-cdn.com/techcommunity/original/3X/c/3/c3e3c5af67f300cb5fc10b92266e6bc0466b45a5.jpeg)
3. Fill in required fields and verify your account to create the project.
![Twilio](https://aws1.discourse-cdn.com/techcommunity/original/3X/e/2/e271c181e6a5bd781d99b882ade9f8f510ed2ad1.jpeg)
![Twilio](https://aws1.discourse-cdn.com/techcommunity/original/3X/7/a/7a51783001b9fd6db1757bba8fc4a52131236af5.jpeg)

4. Note down **Account SID** and **Auth Token**.
![Twilio](https://aws1.discourse-cdn.com/techcommunity/original/3X/9/7/97405594111e612a53591652101f29ecb1c6bb4f.jpeg)

### Section 2: Setting up Twilio account in [webMethods.io](http://webMethods.io) Integration Workflow

1. Login to **[webMethods.io](http://webMethods.io) Integration** tenant and choose your project or click on **+** to create new project.
2. Switch to **Connectors** tab.
3. Search for **Twilio** connector in the available connectors list.
![Twilio](https://aws1.discourse-cdn.com/techcommunity/original/3X/4/8/48a687c62c77befb82f377674466675395800565.jpeg)
4. Mouse hover on the **Twilio** connector icon and then click on the **+** icon.
![Twilio](https://aws1.discourse-cdn.com/techcommunity/original/3X/6/a/6ace2d8d6c8958609b6c67b84f6020d76e3f9f74.jpeg)
5. Fill in the **Account name** , **Username** (Account SID) and **Password** (Auth token) obtained from Step 4. Click on **Add**.
![Twilio](https://aws1.discourse-cdn.com/techcommunity/original/3X/c/1/c12a13daa390fae652c71b77662fb19705d747ce.jpeg)
6. An account for **Twilio** connector has been added successfully, it can now be used in Workflows or Flowservices.

[Read full topic](https://tech.forums.softwareag.com/t/configuring-twilio-account-in-webmethods-io-integration-workflow/239941/1)
Adding Permissive CORS to Netlify
Tags: netlify, cors
Published: 2021-03-23 15:34:41

---
title: Adding Permissive CORS to Netlify
published: true
date: 2021-03-23 15:32:04 UTC
tags: [Netlify, CORS]
canonical_url: https://codelab.farai.xyz/snippets/permissive-netlify-cors/
---

_[Adding Permissive CORS to Netlify](https://codelab.farai.xyz/snippets/permissive-netlify-cors/) was first published on [Farai's Codelab](https://codelab.farai.xyz/)._
* * *

[CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) can be pretty annoying, but it’s important for security. Thing is, most sites don’t need strict CORS. Not saying that you should ignore CORS, just that you need to examine whether you need it and you typically don’t.

For me, I’m mostly okay with a permissive CORS so that people can run client-side scripts without a proxy, like a browser based RSS reader<sup id="fnref:1"><a href="#fn:1" role="doc-noteref">1</a></sup>. The only exception is fonts because I don’t want anyone hotlinking them and using my site as a CDN. I do plan on adding videos at some point.

Anyways, here’s part of my `headers.toml` file.

```
[[headers]]
    for = "/*"
    [headers.values]
        Access-Control-Allow-Origin = "*"
[[headers]]
    for = "/*.woff2"
    [headers.values]
        Access-Control-Allow-Origin = "codelab.farai.xyz"
```

Previously, if you wanted to fetch something like the RSS feed, it would fail with an error like this:

> <code>Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://faraiscodelab.netlify.app/index.xml. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin">[Learn More]</a></code>

With the aforementioned CORS headers set, fetching everything but the fonts works fine. They could always pass the fetch through a proxy, but it’d probably easier to host the [fonts themselves](https://recursive.design/).

<section role="doc-endnotes">
<hr>
<ol>
<li id="fn:1" role="doc-endnote">
<p>This annoyed me with Youtube’s RSS feeds since they block fetches for them, even though it’s supposed to be shared! <a href="#fnref:1" role="doc-backlink">↩︎</a></p>
</li>
</ol>
</section>
* * *

Thanks for reading! If you liked this post, consider [supporting my work](https://codelab.farai.xyz/support/) by:

- sharing my work,
- refering me for a job (or hire me for freelance work),
- sponsoring me on [Patreon](https://patreon.com/faraixyz),
- [buying Me A Coffee](https://www.buymeacoffee.com/faraixyz),
- [buying Me A Ko-Fi](https://ko-fi.com/faraixyz),
- [sending me a tip on Paypal](https://paypal.me/fgandiya),
- ~~[buy something on Amazon with my affiliate link](https://amazon.com/?tag=faraixyz03-20) (I’ll earn a commision on this as an amazon affiliate)~~,
- or [buy a domain on Namecheap with my affiliate link](https://shareasale.com/r.cfm?b=467188&u=2110247&m=46483&urllink=www%2Enamecheap%2Ecom%2F&afftrack=).
PlatformIO 的客製化設定
Tags: platformio, arduino, vscode
Published: 2021-03-23 14:29:00

[PlatformIO](https://platformio.org/) 是個很棒的開發環境, 不過預設安裝下, 有些設定可能不符所需, 本文將介紹幾個使用 PlatformIO 前需要注意的小技巧。

## 讓 PlatformIO 使用非預設的資料夾

[PlatformIO](https://platformio.org/) 預設會將各平台的工具鏈安裝在使用者資料夾下的 .platformio 資料夾下, 如果你和我一樣 C 磁碟快爆了, 就會想讓 PlatformIO 使用其他磁碟下的資料夾。要做到這件事, 只要設定 [PLATFORMIO_CORE_DIR](https://docs.platformio.org/en/latest/envvars.html#envvar-PLATFORMIO_CORE_DIR) 環境變數為你希望的路徑, 再重新安裝 PlatformIO 即可, 例如我就改成在 D:\\\.platformio：
![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bebk5qevmzprlmfihp31.png)
這樣我就不怕 C: 爆了。

## 修改預設的專案資料夾

在我安裝的 PlatformIO 中, 建立專案時雖然可以取消勾選 **Use default location** 選項, 可是我在交談窗中選好資料夾卻無法按 **Finish** 鈕, 不知道是我安裝的問題還是 PlatformIO 的問題。即使可以, 每次建專案都要選擇資料夾也是有點麻煩, 還好, 只要透過 [PlatformIO Core CLI 下指令](https://gist.github.com/shnam7/953d19da155ecb32b4a2923589d6748d)就可以了：

1. 在 VSCode 的指令區中執行 **PlatformIO: Open PlatformIO Core CLI**
2. 執行以下指令即可更改預設的專案資料夾：

    ```
    # pio settings set projects_dir "D:\code\espidf\"
    ```

上例就是將我的專案預設資料夾更改為 "D:\code\espidf\"。

3. 以下指令可查詢目前的預設專案資料夾：

    ```
    # pio settings get projects_dir
    Name          Current value [Default]                           Description
    ------------  ------------------------------------------------  ----------------------------------------------------------
    projects_dir  D:\code\espidf                                    Default location for PlatformIO projects (PlatformIO Home)
                  [C:\Users\ShinWei\Documents\PlatformIO\Projects]
    ```

    可以看到已經修改成功了。
Single line of code! No more!

Published: 2021-03-23 13:20:33

Check if an array is empty

// `arr` is an array
const isEmpty = arr => !Array.isArray(arr) || arr.length === 0;

// Examples
isEmpty([]);            // true
isEmpty([1, 2, 3]);     // false


-------------------------------
Clone an array
-------------------------------.

// `arr` is an array
const clone = arr => arr.slice(0);

// Or
const clone = arr => [...arr];

// Or
const clone = arr => Array.from(arr);

// Or
const clone = arr => arr.map(x => x);

// Or
const clone = arr => JSON.parse(JSON.stringify(arr));

// Or
const clone = arr => arr.concat([]);


-----------------------------
Compare two arrays regardless of order

// `a` and `b` are arrays
const isEqual = (a, b) => JSON.stringify(a.sort()) === JSON.stringify(b.sort());

// Examples
isEqual([1, 2, 3], [1, 2, 3]);      // true
isEqual([1, 2, 3], [1, 3, 2]);      // true
isEqual([1, 2, 3], [1, '2', 3]);    // false

-----------------------------
Compare two arrays
// `a` and `b` are arrays
const isEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b);

// Or
const isEqual = (a, b) => a.length === b.length && a.every((v, i) => v === b[i]);

// Examples
isEqual([1, 2, 3], [1, 2, 3]);      // true
isEqual([1, 2, 3], [1, '2', 3]);    // false
-----------------------------

Convert an array of objects to a single object

const toObject = (arr, key) => arr.reduce((a, b) => ({ ...a, [b[key]]: b }), {});

// Example
toObject(
    [
        { id: '1', name: 'Alpha', gender: 'Male' },
        { id: '2', name: 'Bravo', gender: 'Male' },
        { id: '3', name: 'Charlie', gender: 'Female' },
    ],
    'id'
);
/* 
{
    '1': { id: '1', name: 'Alpha', gender: 'Male' },
    '2': { id: '2', name: 'Bravo', gender: 'Male' },
    '3': { id: '3', name: 'Charlie', gender: 'Female' },
}
*/
-----------------------------
Convert an array of strings to numbers
const toNumbers = arr => arr.map(Number);

// Or
const toNumbers = arr => arr.map(x => +x);

// Example
toNumbers(['2', '3', '4']);     // [2, 3, 4]
-----------------------------
Count by the properties of an array of objects

const countBy = (arr, prop) => arr.reduce((prev, curr) => (prev[curr[prop]] = ++prev[curr[prop]] || 1, prev), {});

// Example
countBy([
    { branch: 'audi', model: 'q8', year: '2019' },
    { branch: 'audi', model: 'rs7', year: '2020' },
    { branch: 'ford', model: 'mustang', year: '2019' },
    { branch: 'ford', model: 'explorer', year: '2020' },
    { branch: 'bmw', model: 'x7', year: '2020' },
], 'branch');

// { 'audi': 2, 'ford': 2, 'bmw': 1 }

-----------------------------
Count the occurrences of a value in an array

const countOccurrences = (arr, val) => arr.reduce((a, v) => (v === val ? a + 1 : a), 0);

// Examples
countOccurrences([2, 1, 3, 3, 2, 3], 2);                // 2
countOccurrences(['a', 'b', 'a', 'c', 'a', 'b'], 'a');  // 3


-----------------------------
Matt's Tidbits #92 - A few neat IDE tidbits
Tags: mattstidbits, android, vscode, tidbittuesday
Published: 2021-03-23 14:18:31

[In my last post, I wrote about the RxJava share operator.](https://medium.com/nerd-for-tech/matts-tidbits-91-the-power-of-sharing-31e5407d456c) This week, I have a few quick IDE tidbits!

I've written about some fun IDE plugins before in [Tidbit #6](https://matthew-b-groves.medium.com/matts-tidbits-6-useful-android-studio-plugins-bb67fe640c89), but I recently got a new work laptop, and in the process of reinstalling Android Studio discovered a new one!

Previously I had been using the [NyanCat progress bar](https://plugins.jetbrains.com/plugin/8575-nyan-progress-bar) (because work should be fun!), but when I found out there's a MARIO PROGRESS BAR I knew I needed to check it out:
https://plugins.jetbrains.com/plugin/14708-mario-progress-bar

If Mario isn't your thing, that's ok - there are a LOT of different options, depending on your preferences:
https://plugins.jetbrains.com/search?search=progress%20bar

---

I alluded to multiple tidbits in the title of this article, so hopefully you're still with me! My next project is going to be written in React Native, so I have been refreshing my JavaScript and learning all about the new frameworks. Part of the change means leaving the familiar confines of Android Studio for other editors - in this case, Visual Studio Code.

I've used Visual Studio before at a previous job, and VS Code is a fine editor, but I've really gotten used to working in Android Studio. For me, part of the biggest challenge of switching development languages is changing tools.

The good news is, I discovered a plugin for VS Code that applies many of Android Studio's keyboard shortcuts to VS Code! You can find it here: https://github.com/kasecato/vscode-intellij-idea-keybindings

I'm still refreshing my JavaScript skills, learning TypeScript, and getting used to programming in a dynamically-typed language (that's the *real* challenge), but being able to navigate in the editor in a way I'm used to has been very helpful thus far.

This type of plugin is available for many other different editors. So, if you're moving to a new project, and aren't comfortable with the tools, see if there's a keymapping plugin that will make the editor behave like one you already know!

Two questions this time:
1. What editor has your favorite keybindings? (Not your favorite editor per-se - I'm not trying to start a vi vs. emacs war)
2. What is your preferred progress bar for Android Studio? Standard? Nyan Cat? Mario? Something else?

Let me know in the comments!

Interested in working with me in the awesome Digital Products team here at Accenture? [We're hiring!](https://www.intrepid.io/careers)

*These tidbits were discovered on March 10, 2021.*
Four types of DBMS(Database Management System)
Published: 2021-03-23 14:16:21

→Hierarchical database
→Network database
→Relational database
→Object-Oriented database


→Hierarchical DBMS

In a Hierarchical database, model data is organized in a tree-like structure. Data is Stored Hierarchically (top down or bottom up) format. Data is represented using a parent-child relationship. In Hierarchical DBMS parent may have many children, but children have only one parent.

→Network Model

The network database model allows each child to have multiple parents. It helps you to address the need to model more complex relationships like as the orders/parts many-to-many relationship. In this model, entities are organized in a graph which can be accessed through several paths.

→Relational model

Relational DBMS is the most widely used DBMS model because it is one of the easiest. This model is based on normalizing data in the rows and columns of the tables. Relational model stored in fixed structures and manipulated using SQL.

→Object-Oriented Model

In Object-oriented Model data stored in the form of objects. The structure which is called classes which display data within it. It defines a database as a collection of objects which stores both data members values and operations.