teleren/devto huggingface dataset:
How to make a readonly tuple type in TypeScript?
Tags: typescript
Published: 2022-01-14 00:00:00

---
  title: How to make a readonly tuple type in TypeScript?
  published: true
  tags: TypeScript
  date: Fri Jan 14 2022 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/make-readonly-tuple-type-typescript
  cover_image: https://melvingeorge.me/_next/static/images/main-6e7040e170e4b9b3ccc373462ad7fa92.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/make-readonly-tuple-type-typescript)
  
To make a `readonly` tuple type, we can use the keyword `readonly` before the tuple type declaration body in TypeScript.

### TL;DR

```ts
// a readonly tuple type
type ReadonlyTupleType = readonly [string, number];

// assign the tuple type to an array
const arr: ReadonlyTupleType = ["John Doe", 100];

// add a 3rd element to the array
// ❌ Error.
// Index signature in type 'ReadonlyTupleType' only permits reading.
arr[2] = 1000;
```

For example, let's make a `tuple type` called `ReadonlyTupleType` using the `type alias` declaration like this,

```ts
// a tuple type
type ReadonlyTupleType = [string, number];
```

As you can see we have made a `tuple type` where it can contain only 2 array elements where the first element should be a value of `string` type and the second element should be a value of `number` type.

Now to make it a `readonly tuple type`, we can use the `readonly` keyword before tuple type declaration body like this,

```ts
// a readonly tuple type
type ReadonlyTupleType = readonly [string, number];
```

We have made a `readonly tuple type`. Now let's assign the `tuple type` to an array.

It can be done like this,

```ts
// a readonly tuple type
type ReadonlyTupleType = readonly [string, number];

// assign the tuple type to an array
const arr: ReadonlyTupleType = ["John Doe", 100];
```

Now let's also try to add a 3rd element to the readonly array like this,

```ts
// a readonly tuple type
type ReadonlyTupleType = readonly [string, number];

// assign the tuple type to an array
const arr: ReadonlyTupleType = ["John Doe", 100];

// add a 3rd element to the array
// ❌ Error.
// Index signature in type 'ReadonlyTupleType' only permits reading.
arr[2] = 1000;
```

As you can see from the above code the TypeScript is not allowing us to assign the 3rd array element and shows an error saying `Index signature in type 'ReadonlyTupleType' only permits reading.` which is what we want to happen.

We have successfully made the array into a readonly array using the readonly tuple type in TypeScript.

If you want to know more about what a tuple type is, see the blog on [creating tuple types in TypeScript](https://melvingeorge.me/blog/make-array-with-specific-length-or-array-elements-typescript).

See the above code live in [codesandbox](https://codesandbox.io/s/make-tuple-type-readonly-typescript-xmvzu?file=/src/index.ts).

That's all 😃!

### Feel free to share if you found this useful 😃.

---
MongoDB - React drive files
Tags: atlashackathon
Published: 2022-01-13 23:59:37



## Overview of My Submission
I made a MongoDB-Express-React application which allows user to upload files to [mongodb gridFS](https://www.mongodb.com). 

It connects to the database on Mongodb Atlas. My database has collections for storing the files.
In the front-end I usedreact and dropzone-ui/react to upload the files and to display them.

## Submission Category: 

#Choose Your Own Adventure

This project is considered as random category since it does not fit to any category mentioned on the hackaton [announcement](https://dev.to/devteam/announcing-the-mongodb-atlas-hackathon-on-dev-4b6m).

### Link to Code
{% github https://github.com/atlashackathon/mongo-drive-backend %}
{% github https://github.com/atlashackathon/mongo-drive-frontend %}

### Additional Resources / Info
Demo [here](https://mongo-drive.herokuapp.com/):

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

Technology Used: React, Dropzone-ui, Express, Mongodb gridFS, Atlas
MongoDB Hackathon Submission - QrTracker
Tags: atlashackathon, actionstar
Published: 2022-01-13 23:56:32

### Overview of My Submission
[QrTracker](https://qrtracker-yibtf.mongodbstitch.com/) is a multi-purpose tracking alternative that gives small business owners (or anyone else, really) the ability to create, as well as consume, tracking information.

It's similar to the software that companies like FedEx and UPS use to give their customers tracking information, but it's open source.

QrTracker also allows for more freedom in how it's used; it supports, but does not require, geographical information.

Sign up at https://qrtracker-yibtf.mongodbstitch.com/

### Submission Category: 
Action Star

### Link to Code
{% github https://github.com/jsimonrichard/QrTracker-atlas-hackathon %}

### Screenshots

![Landing page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sbmo20u63jruprkget19.png)


![Create tracker form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dq5bs8wafw9pcgorkg2l.png)


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


![Update status form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z0ltlue5xnsphlyg2eo1.png)


![Email notification](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l8n1d7a9ahfsreffmm1v.png)


![Edit tracker form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a4xoh9rxu131mkfxd7pi.png)


### MongoDB Technologies Used
* Realm Functions
* Realm Triggers
* Atlas Search
* GraphQL Integration

### Other Technologies Used
* Git / GitHub
* GraphQL
* [ReactJS](https://reactjs.org/)
* [BlueprintJS](https://blueprintjs.com/)
* [Courier](https://courier.com/)
* [mailersend](https://www.mailersend.com/)
SecureCLI - A custom CLI using .NET Core and MongoDB Atlas 
Tags: webdev, atlashackathon, mongodb, dotnet
Published: 2022-01-13 23:47:58


## The Problem

If you work in a company , they are many reason to access different websites. But sometimes maybe you need permissions from security teams to access these websites, or maybe sometimes you have to wait for 2 days to get this approved. 

## Solution : Reduce the wait time and support tickets

As a developer you like `CLI` tools because its quick. `SecureCLI `tool helps you to check if the website is secure or not by just typing simple command like below:

`   secure https://cloud.mongodb.com/`

## Secure CLI Demo in GIF :)


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

### Submission Category: 

# Automation Innovation : 

Here we have `automated `the security teams job, instead of taking time to approving multiple support tickets , create a DB of approved links in Mongo DB :)


## The Mongo Collection


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

## The API Behind the CLI


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

### Link to Code

 {% github https://github.com/shaijut/SecureCLI %}


### Additional Resources / Info

- https://www.mongodb.com/languages/how-to-use-mongodb-with-dotnet
- How to create your own .NET CLI tools to make your life easier - YouTube · Nick Chapsas
- https://docs.microsoft.com/en-us/dotnet/core/tools/global-tools-how-to-create


Was busy but still I did this project in less time, So feel free  open issues in github if you face any problem running the projects. 

## Future Plans:

- Create a back end with `UI `for security teams add or remove links
- Make the `CLI `respond like a chat bot
- Add options to check mail domains
- Do the above as time permits :)

I enjoyed building a custom `CLI`. Thanks **Mondodb** and **devto** .

### Enjoy the CLI :)
#Data4Good: Find an At-Home COVID-19 Test Kit Near You
Tags: atlashackathon
Published: 2022-01-13 23:42:12

### Overview of My Submission

We built a web application using the Shiny framework from the R programming language to help users locate & report at-home COVID-19 test kits. You can check out the web app live in action [here](https://ketchbrookanalytics.shinyapps.io/covid_test_spotter/) for the State of Connecticut!

This app works very similar to the [Waze app](https://www.waze.com/), in that the data that populates the app is entirely user-driven. Through the UI, users have the ability to add a new record to the back-end MongoDB Atlas database (i.e., where/when they saw COVID-19 at-home test kits *in* stock), and remove a record (where/when they saw COVID-19 at-home test kits *out of* stock).

The purpose of this project spawned from seeing *so many* disjointed Facebook forum questions/answers about where people could find at-home COVID-19 antigen test kits. There was no *single* place to centralize this information -- so we set out to build just that!

Furthermore, we wanted to open-source this effort, so that anyone can reproduce this app to serve their own town/state/region/country/etc.

### Submission Category: 

Choose Your Own Adventure

### Link to Code

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github link_to_your_repo %}` to share a GitHub repository)

{% github https://github.com/ketchbrookanalytics/covid_test_spotter %}

### Additional Resources / Info

As stated in our overview, you can check out the web app live in action [here](https://ketchbrookanalytics.shinyapps.io/covid_test_spotter/), tailored for the State of Connecticut.

This projects utilizes a really neat combination of R, Shiny, Google Maps & Places APIs, and MongoDB Atlas to provide a seamless user experience that serves as a benefit to the public. See for yourself in the screenshot below:

![App screenshot showing Google map and UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vx9rpbzc04ewm85akt1g.PNG)

We have already gotten amazingly positive feedback about how this app helped people in our local community find an at-home COVID-19 test kit that they had been desperately searching for. We sincerely hope that the project only continues to grow -- and winning the **MongoDB + DEV Atlas Hackathon** would be a tremendous help to ensure that it does.
React Inner Image Zoom Version 3.0.0
Tags: react, javascript, news, release
Published: 2022-01-13 23:09:03

My first DEV Community release announcement! Hopefully I tagged it correctly.

[React Inner Image Zoom](https://github.com/laurenashpole/react-inner-image-zoom) version 3.0.0 went out earlier this week with a handful of bug fixes, test and build improvements, and one major change. 

What's the big thing to look out for? By popular demand, the `imgAttributes` prop was added to pass down (almost) any valid React `img` attributes in a single object instead of as individual props. That means `scrSet`, `sizes`, `alt`, and `title` are gone but in exchange you get all the data attributes and event handlers you could  want. I haven't submitted updated type definitions to [DefinitelyTyped](https://definitelytyped.org/) yet but I'll try to get that done in the next few days.

This release also included a handy new Changelog so I would be remiss not include the official record here:

**Changed**

- Replaced `srcSet`, `sizes`, `alt`, and `title` props with `imgAttributes` to set the original image's attributes.
- Show close button when `moveType` is set to "drag" on all breakpoints.
- Switched from `setTimeout` to `onTransitionEnd` to check that zoomed image has finished fading out.

**Added**

- This handy CHANGELOG.

**Fixed**

- Added `stopPropagation` on touchmove to prevent events below fullscreen modal.

If you run into any bugs, please let me know in the [GitHub issues](https://github.com/laurenashpole/react-inner-image-zoom/issues).
Bad Programmer
Tags: deeplearning, hooked, distraction
Published: 2022-01-13 22:55:04

This is my first post in Dev, after clear all of my distractions,  happens that I have many years developing differents web apps, desktop app, and more, but when the pandemic start I did get bad habits and I need to change them because I want to get to my previous shape when I was a very productive programmer, I started to read a recommended book called "Hooked" to fight with the bad habits and in this book found some tips that I like to share with the community and if you have tips to fight with the bad habits you can to share with me in the comments.
<ul>
<li>
Multitasking is fake in real life, stay focus on only one thing.
</li>
<li>
Minimize Distraction.
<ul>
<li>
Put your phone in a distance while working.
</li>
<li>
Avoid Social networks.
</li>
<li>
Don't read emails and other messages type that send information that your brain needs analyses.
</li>
<li>
Use a someone application to help you with the selfcontrol, actually I use [Forest App](https://bit.ly/3y73wNd)
</li>
</ul>
</li>
<li>
Break task into chunk
<ul>
<li>It's easier when you work a task in separate chunks than you work the task completely, always use Git
</li>
</ul>
</li>
<li>
Sleep always that you can and take breaks, this is the best part of my routine because, for a long time, I never took the time to rest until the end
</li>
</ul>

See ya!
xChange-MongoDB Realm and SwiftUI
Tags: atlashackathon
Published: 2022-01-13 22:42:45

 
 [Instructions]: # (To submit to the MongoDB Atlas Hackathon on DEV, please fill out all sections.)


### Overview of My Submission
[Note]: # (Please make sure the project links to the appropriate GitHub repository, and includes the [Apache-2 permissive license](https://www.apache.org/licenses/LICENSE-2.0)  and README.)

xChange is an app designed in SwiftUI for iOS that helps meet users from different parts of the globe. It uses “Letter”, in which users can create letters, through which users can share their thoughts and feelings as notes to which users within the local region can react and get in touch with. Users with premium features can get access to the global feature where they can interact with letters all over the globe. The app uses MongoDB Realm for authentication and CRUD operations as local persistence storage, and is deployed on to MongoDB Atlas whenever a trigger to the app is viewed. The app mainly focuses on how people can interact with each other, merely based on their thoughts. 


### Submission Category: 

[Note]: # (E-Commerce Creation, Prime Time, Action Star, Automation Innovation, or Choose Your Own Adventure)
Action Star


### Link to Code

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github link_to_your_repo %}` to share a GitHub repository)

{% github ameysunu/xchange %}


### Additional Resources / Info

The application uses MapKit, and CoreLocation for determining current location using Apple Maps to analyse the current location of users to deploy the letter in such a way that it binds the users of the same location. Using Realm, the data is bound with local CoreData within the iPhone and can be deployed to MongoDB Atlas. 

#### Future Work
Using Artificial Intelligence, illegitimate users shall be removed. The AI will also monitor and handle abusive images, and NSFW content.


#### Screenshots
![Home](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bqzp1mi3d34j0rfiitgl.png)

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

![Letters](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sgqqbcyvjewm5531zjsm.png)
 
![Realm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4dhwd7z6s8s5l6234w00.png)
 
 ![Premium](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mxbw4k52qa49rqacjef6.png)
Data Manipulation in Python
Published: 2022-01-09 18:50:18

As a data scientist, one may study where information comes from, how data fits together and what those patterns signify for business outcomes. Data can be collected via internal and external sources, data analysis can be used to create econometric and statistical metrics models for projections, classification through data summarization and visualization.
Since I have had a career in Finance & Accounting while working with numbers, I wanted to explore different techniques using data analysis in order to data manipulation.

Data manipulations is the process of changing data to make it easier to read. Data manipulation is often used on machine learning before the start of model building as part of the data processing also during the model building to transform the data into a more suitable form for processing. However, on of the common problem data scientists face is accessing the right data or consistency of data quality. 
In phase one, the topics are focused on how to clean and analyze different data set with Pandas, SQL, API. Pandas is an open-source library that is used to analyze data in Python. It takes in data like a CSV database and creates a data frame with rows and columns. For the end of phase project, several CSV file of containing data about movie ratings, budget, runtime, genres were given a source to determine what makes a movie successful. Database were collected from sources such as imdb, rt. Dataset were merged using Pandas and filtered out "0" value or "NaN" in order to find correlation between which movie popularity and effects of runtime, budget, studio, release year.

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

One of the advantages of data science is that organizations can find when and where their products see=ll best. this can help companies to develop new products to their customers needs. As a data scientist, one can enable companies to make smarter business decision by eliminating risks.For example, in the article called "A Machine Learning Framework to Identify Students at Risk of Adverse Academic Outcomes", an extensive framework was outlines that uses machine learning approaches to identify students who are at risk of not graduating high school on time. The analysis was done in order to give the participated schools proactive tools that are assigned for their needed and to help them identify and prioritize students who are at risk of adverse academic outcomes.
http://www.dssgfellowship.org//wp-content/uploads/2016/04/montogmery-kd2015.pdf

Interested in becoming a data scientist? Let's start with beginners python. Let's begin with being familiarized with variables, lists, strings, tuples, dictionaries etc.
Search Job Postings on HackerNews
Tags: atlashackathon, react, mongodb, serverless
Published: 2022-01-13 22:06:03

[Instructions]: # (To submit to the MongoDB Atlas Hackathon on DEV, please fill out all sections.)


### Overview of My Submission
[Note]: # (Please make sure the project links to the appropriate GitHub repository, and includes the [Apache-2 permissive license](https://www.apache.org/licenses/LICENSE-2.0)  and README.)

Hacker Job Search let you search job postings on HackerNews.
It used Realm Scheduled Triggers and Functions to scrape job postings from HackerNews at an hour interval.

Atlas Search index is built on top to enable searching by keyword functionalities. 

The searching endpoint is exposed as HTTPS endpoints with Realm Functions to serve incoming requests from frontend

The frontend website is hosted by Realm Hosting.

So basically, the entire stack is run on Atlas and Realm.

### Submission Category: 

[Note]: # (E-Commerce Creation, Prime Time, Action Star, Automation Innovation, or Choose Your Own Adventure)

Automation Innovation

### Link to Code

{% github https://github.com/yuhuishi-convect/hacker-job-search no-readme %}


### Additional Resources / Info

[Demo Site](https://hacker-job-geiwg.mongodbstitch.com/)


[![demo video](https://cdn.loom.com/sessions/thumbnails/43df624c66ae46489bf6285fbc027868-with-play.gif)](https://www.loom.com/share/43df624c66ae46489bf6285fbc027868)
How I target an Element By Class Name in JavaScript
Tags: javascript, beginners, webdev, programming
Published: 2022-01-13 21:58:39

This concept deals with the classes you create in HTML.

IF I want to target a specific class in JavaScript, I'll do something like this first in HTML:
   `<div class="next"></div>`

That is my HTML class. And in JavaScript, 

  `document.getElementsByClassName('next')[0]`

You want the document, or DOM, to "get" the element by it's class name in HTML. But why did I add that 0 with the brackets like this [0]?

Each class is listed as an array, or group of items. So to choose the one I want, I simply choose the specific "index" in the array which is equal to the class I'm trying to target.

This is one way you can target an HTML class in JavaScript.
Compilers, Hand coded scanners
Published: 2022-01-13 21:55:36

After discussing the basics of table and hand coded scanners, it is the time to write a post about the hand coded one, the two previous  scanners are auto generated and use the DFA as the backbone for all the operations, but the hand coded scanners is totally different with a goal of reducing the cost of simulating the DFA, in order to achieve this a careful implementation is needed.

The author of Engineering a compiler mentioned that they did an official survey, the results was that this hand coded scanners was used in the most of opensource and commercial compilers.

This last mentioned scanner has some disadvantages, for example doing an i/o to read a character has significant impact in the performance, if we compare it to the DFA.

To solve this issue the compiler writers use a buffered i/o, where each read operation return a longer character, we keep track of the current position by using a pointer.
Solidity: AppStorage for distinguishing state variables and preventing name clashes
Published: 2022-01-13 21:47:51

Solidity state variables, immutable variables, constants, local variables and function names can look the same and it is possible to have name clashes, where for example a local variable or function name is named the same thing as a state variable, which can reduce code clarity and cause frustration.

AppStorage is a variable naming technique which makes state variables clear in your code and prevents name clashes with other kinds of variables and function names.

This is how it is done: Define a struct in a file and name the struct AppStorage. Define all the state variables in your application within the AppStorage struct.

Then in your smart contracts import the AppStorage struct. Then define this state variable: `AppStorage internal s;`.

That's it. Now you can access all your state variables by prepending an "s." to them.

Here is a simple example:

1. Define AppStorage that contains all your state variables:

```Solidity
// AppStorage.sol
struct AppStorage {
  uint256 secondVar;
  uint256 firstVar;
  uint256 lastVar;
  ...
}
```

2. Import it and use it in contracts:

```Solidity
import "./AppStorage.sol"

contract Staking {
  AppStorage internal s;

  function myFacetFunction() external {
    s.lastVar = s.firstVar + s.secondVar;
  }
```
January 13th, 2022: What did you learn this week?
Tags: weeklylearn, discuss, weeklyretro
Published: 2022-01-13 21:47:24

It's that time of the week again. So wonderful devs, what did you learn this week? It could be programming tips, career advice etc.

<center>

![Image of the brain](https://media.giphy.com/media/ojmB7lOn3VUU8/giphy.gif)
</center>

Feel free to comment with what you learnt and/or reference your TIL post to give it some more exposure.

{%tag todayilearned %}

And remember, if something you learnt was a big win for you, then you know where to drop it as well.👇👇🏻👇🏼👇🏽👇🏾👇🏿

{%link https://dev.to/devteam/what-was-your-win-this-week-2b5k %}

<center>

![Little kid making a fist as if to say "Yes!"](https://media.giphy.com/media/6brH8dM3zeMyA/giphy.gif)
</center>
Looking for a fantasy description of HTML section tag
Tags: html, webdev, help, beginners
Published: 2022-01-13 21:12:07

Guys, I need your help. I am working on a HTML flashcard deck, and can not figure out a fantasy description for section tag. Can you help pls? Attached is a card for iframe for reference! 🙏🙏🙏


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