teleren/devto huggingface dataset:
The lesser known MVVM
Tags: programming, concepts, architecture
Published: 2021-02-21 03:29:34

###What is MVVM
MVVM combines the advantages of separation of concerns provided by [MVP](https://dev.to/akashshyamdev/all-about-mvc-3pn7), while leveraging the advantages of data bindings. The result is a pattern where the model drives as many of the operations as possible, minimising the logic in the view.

###Components of MVVM
##### View
The view represents the data and informs the model-view about the users actions. The view holds a reference to the model view.

>The view model is an abstraction of the view exposing public properties and commands.

##### Model View
The model view exposes or shows relevant parts of the available data to the view. The model view can be used for many views like a many-to-one relationship. So, the model view is ignorant of the view that is using it.

>The view model is an abstraction of the view exposing public properties and commands.

##### Model or Data Model
The model gets or saves the data, prepares the data and sends it to the model view.

>Model refers either to a domain model, which represents real state content (an object-oriented approach), or to the data access layer, which represents content (a data-centric approach)

###A simple diagram to understand better

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

###Some Disadvantages of MVVM
1. Can be overkill in small and simple applications
2. Generalising the view model upfront can be difficult
3. Large-scale data binding can lead to low performance

Do share your views in the comment section. The next post is probably about MVP
My First Website (Node and Express)
Tags: node, math4u, express, mongodb
Published: 2021-02-21 03:20:06

# My new Website
## [math4u.co.in](https://www.math4u.co.in)


### This is a website created for my Mom
---------------------------------------

# Here is the details of the webapp.
## Technologies used:
## **Nodejs**: To build the server for the backend of the web application and to install npm packages

## Bootstrap: To get the site look better with pre made css


# NPM PACKAGES:
### Body parser : To parse the text from the form , to store it in the mongodb    database  and send an email.

````
npm install body-parser
```
### Express: For building the server ,make it listen in different ports and specify     routes like `/trial` or `/class10`

````
npm install express
```
### Nodemailer :To send an email when the form is submitted, with its contents.

````
npm install nodemailer
```
### MongoDB: All the trial registrations are stored in MongoDB
````
npm install mongodb
```
### Mongoose: To create models and schemas in order to store it in the mongodb database.
````
npm install mongoose
```
### Nodemon : In order to restart the server when the server's javascript files are modified.
````
npm install -g nodemon
```
 
# WEB HOSTING
 The web application is hosted on a [Microsoft Azure](https://azure.com) app service plan (Web App)

# Applications Used to develop the website:
 ## IDE: [Microsoft Visual Studio Code](https://code.visualstudio.com)
 ## Browser: [Google Chrome] (https://chrome.google.com)
# Command Line: Bash Shell on Windows on [Git](https://git-scm.com/)
### I have also dockerized the app into a container.
### I started with game development in UNITY scripted with C# and created multiple 2D&3D games. One of his game is published in play store.
https://play.google.com/store/apps/details?id=com.codnas.neonrails

Currently I am interested in improving my skills in Python and JavaScript. Also learning about containers(docker) and container orchestration (kubernetes).

### Do visit the [website](https://www.math4u.co.in) and let me know your feedback.

Thank You
 
Regards

Naseel Niyas
Fun with Quines
Tags: github, programming, codenewbie, inthirtyseconds
Published: 2021-02-21 02:01:29

I was recently watching Dylan Bettie's talk "Art of Code" in NDC 2020 and honestly, it made me fall in love with coding all over again. If you haven't yet watched [here](https://youtu.be/6avJHaC3C2U), you are missing a hell lot of fun that coding can bring you. 

In his talk, among all other things, he also mentions of quines. A quine is basically a program that prints its own source code. You can read about it all over the internet. But that's not the point, the point is do you want to write one in the programming language you are most familiar with? Do you want to challenge your expertise in your comfort language? IF yes, this is an open invite to everyone here, to contribute to the repo [QuineInAllLangs](https://github.com/MadhuNimmo/QuinesInAllLangs) where I plan to accumulate quines in all possible programming languages for learning purposes. And, hope that you learn something as well in the process of writing your own equine and contributing to this repo.

Have a great weekend.
Learning JavaScript Simplified!
Published: 2021-02-21 01:49:54

**JavaScript** is a frontend programming language, which makes the web page interactive with HTML and CSS. In JavaScript, only one thing ever happens at a time. This means it is single-threaded.
It is streamlined into different variables, which include;

* Objects
* Arrays
* Functions
* Strings
* Numbers

##Objects##
This is a collection of data, it is a variable in JavaScript which helps the developer to group like-information together, each key has to be unique per object but values do not have to be unique. It contains curly brackets. They contain named values called properties or methods.
Example:
```
Objects properties                 Property value
firstName                           Mike
lastName                            John
age                                 45
hairColour                          brown
```

**Method**
This is a function stored as a property. They are actions that can be performed on objects.
Example:
```
var person = {
firstName:    "Mike",
lastName:     "John",
id      :      5566,
fullName:     function() {
 return this.firstName + "" + this.lastName;
} 
};

```

##Arrays##
They are single objects that contain multiple values, it is also an ordered collection of data. Array Objects reduces the time and stress of calling the code for every item in a separate variable.
The first element of an array is index zero.
**Creating Arrays**
Arrays contain single square brackets and elements that are separated by commas. In arrays, we can store various data types: strings, numbers, objects, and also other arrrays. 

**Array Methods**
The **Sort()**Method sorts the elements of an array in-place and returns the sorted array. The time and space complexity of the sort cannot be guaranteed as it depends on how it is implemented.
Example:
```
const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]
```
Explosiv, static JSX site generator
Tags: javascript, npm, react, jsx
Published: 2021-02-21 01:00:27

[Explosiv](https://github.com/vixalien/explosiv) is a static site generator that consume JSX pages to generate a static HTML site.

Let's get started

### 1. Install it to your development dependencies.

```bash
npm i explosiv -D
```

### 2. Write your first page.

Explosiv allow you to build static sites written in JSX. To get going, create a file called `pages/index.js`:

```js
// pages/index.js
export default () => (
  <main>
    <Head>
      <title>Home page</title>
    </Head>
    <h3>This is my home</h3>
    <p>On the internet obviously</p>
  </main>
)
```

### 3. Build your static site!

```bash
npx explosiv build
```

Building your site will transform your JSX into static HTML. Your site will be exported into the `out/` directory.

### 4. Serve your site!

```bash
npx explosiv serve
```

Your site will be ready at [http://localhost:3000]()

> Explosiv is so lightweight that the sample fully featured blog builds in just 3 seconds (that's not a typo) and it does this with no dependencies to React, React DOM, Babel or Webpack. 100% always Lighthouse scores.

## Further reading

- [Github](https://github.com/vixalien/ explosiv)
- [NPM](https://npmjs.com/package/explosiv)
- [How Explosiv works](https://vixalien.ga/post/explosiv)
- [Dhow, on which Explosv was forked](https://github.com/kartiknair/dhow)
- [Using JSX without React](https://kartikn.me/writing/jsx-without-react)
- [Differences between Explosiv, Dhow and React](https://github.com/vixalien/explosiv/blob/master/NOTES.md)

## Explosiv and React

Sure if you have used React building a simple site, like a blog, you know that your site will be always be overloaded with stuff like: 1 minute Babel builds, Webpack making your simplest page 600kb, loading React, React-DOM, Webpack, a router and even the fs module on the client just to say Hello World.

> Explosiv tries to be as lightweight as possible, so it is not a viable option for complex sites. [NextJS](httpa://nextjs.org) will always be there for such scenarios.
NoctisTuanChannel - kênh buôn bán chia sẻ tổng hợp kiến thức, cẩm nang vận hành sức khỏe và sắc đẹp, 
Published: 2021-02-21 00:39:35

NoctisTuanChannel - kênh buôn bán chia sẻ tổng hợp kiến thức, cẩm nang vận hành sức khỏe và sắc đẹp, mỹ phẩm miễn phí cho mọi người 
Chủ đề trính của website chúng tôi đang theo đuổi như sau : 
Chủ đề một : Chia sẻ kinh nghiệm làm tiếp thị liên kết, Chia sẻ kinh nghiệm làm đẹp, Chia sẻ kinh chọn mua khóa học. Chia sẻ cảm âm sáo trúc việt nam.,Mua bán trên Sàn thương mại điện tử, Video trên kênh Youtube NoctisTuanChannel,Tải app ứng dụng điện thoại, Tin tức.
Chủ đề hai : Cách căng da trẻ hoá,Thuốc điều trị bệnh đau dạ dày.,Thuốc trị mụn thâm,Thuốc trị nám tàn nhang.,Thuốc giảm cân, Thuộc trị bệnh xương khớp,Thuốc tăng cân,Cách trang điểm,Thuốc trị bệnh tóc,Thuốc trị hô hấp. Thuốc Sinh Lí Nam,Thuốc Sinh Lý Nữ.
Chủ Đề ba : Chăm sóc vùng kín ,Chăm sóc vòng một, Chăm sóc da ,Chăm sóc mắt, Cẩm nang sức khoẻ, Cẩm nang làm đẹp, Cẩm nang dinh dưỡng, Cẩm nang bệnh, Rối loạn giấc ngủ, Rối loạn tiêu hoá, Rối loạn tiền đình, Phòng tập gym.
Chủ Đề bốn : Bệnh da liễu, Bệnh gan, Bệnh kí sinh trung, Bệnh mỡ máu,Bệnh tiêu đường,Bệnh phụ hoa,Bệnh tim mạch,Bệnh trĩ,Bệnh Viêm Họng, Bệnh viêm xoang, bệnh viêm loát dạ dày Mọi chi tiết liên hệ ngay bên dưới : 
SĐT : 0935691293. 
Gmail : NoctisNQT@Gmail.com.
website : https://www.noctistuanchannel.com/
100 Bytes Of Wisdom: Day 7
Tags: career, journey, advice
Published: 2021-02-21 00:31:05

---
title: 100 Bytes Of Wisdom: Day 7
published: true
description: Bytes of Wisdom is a new project by Sam Jarman that brings together snippets of advice for software engineers
tags: career, journey, advice
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lqg6tlyu0ek94k24v32h.png
---

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

A commit log, similar to code, is not for you, it's for your team, later. They will read them like an archaeologist trying to figure out what you were doing, what you were thinking and why you were doing it. Make them meaningful, thoughtful and helpful. 



You can catch up with all the other bytes at http://bytesofwisdom.com/
Making a Dropdown
Tags: react
Published: 2021-02-21 00:29:04

I was trying to make a dropdown button with React. It turns out to be more tricky than I first thought 🤯.

After discussing with my _React Si-Fu_ @_denb, I finally managed to make a prototype. Below are the libraries I need to use.

- `downshift`: a base library for making a dropdown. 
- `react-useportal`: a library to move the dropdown items to the end of body
- `react-popper`: a library to fix the position of the dropdown items

##### Step 1: make a dropdown menu
{% codesandbox quizzical-currying-g71gd initialpath=/src/dropdown.js %}
- It is already a dropdown-ish component. However, you will notice when the dropdown list opens, it pushes the content below it down. This is not ideal.

##### Step 2: adding in Portal
{% codesandbox upbeat-thunder-pywhl initialpath=/src/dropdown.js %}
- now, if the dropdown list open, it is appended at the end. This is still not what we want

##### Step 3: adding in Popper
{% codesandbox goofy-pasteur-lcf4p initialpath=/src/dropdown.js %}
- finally, the dropdown list open, it is rendered below the dropdown button on top of the text. This is what we want. However, the dropdown items still doesn't align with the dropdown button (It will if you resize the window). I think this is because the component reference is set up before rendering and thus confused Popper for the sizing


##### Step 4: fixing alignment issue after resizing window
{% codesandbox beautiful-night-3n37g initialpath=/src/dropdown.js %}
- Now, I tried to use `useState` instead of `useRef`. It seems to solve the initial alignment issue


##### What's next?
I hope to add a transition components wrapper next to make it look even better✌🏻
Flatiron JavaScript Project Georgia Brews
Published: 2021-02-20 23:47:43

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dhjxo1jyhgg1f8yoeiab.JPG)
For my fourth project at Flatiron school, I was tasked with building an application with an HTML, JavaScript, and CSS frontend and a Rails API backend.   All communication between the two would be through JSON fetch requests.  The project also needed to be a Single Page Application (SPA).  I decided to display some local brewers and their beers. 
 
For this project, I would be using two repositories.  One for the frontend and another for the backend.  Rails generators simplified things by automating a lot of the initial setup.  For example, (rails new {project name} –api) generated the folder structure leaving out the items that would not be needed for an API such as views.

Another requirement was that the application must use Object-Oriented JavaScript (classes) to encapsulate related data and behavior.  I found this part to be particularly challenging since it was my first attempt.  The relationship in this project was that a Brewer could have many Beers.  Setting this up in an object-oriented manner required having a Brewer class js file and a Brewer API js file and matching two files for the Beer class.  This was in addition to the standard Index file.

The SPA needed to function in a way that the information would change on the page without reloading the page.  This required manipulating the DOM to provide all the different displays.  Once the information was fetched from the server for each class, it was stored locally in an array.  This made it easy to sort and redisplay the page without having to make additional fetch requests to the server.

In the end, this turned out to be a great learning experience.  Getting everything working together often required line-by-line debugging to find out why something was not providing the result that I expected.
Sending PR notifications through SMS and GitHub Actions
Tags: github, twilio, githubactions, devops
Published: 2021-02-21 00:16:23

GitHub Actions thrive thanks to its ecosystem of community actions. In that community, you will find several open-sourced actions from solo developers looking to improve their workflows, but amongst those actions, you will find a number of your popular developer tools with actions in the marketplace. 

GitHub Marketplace is a new way to discover and purchase tools that extend your workflow. _[Learn how you can publish your Action to Marketplace](https://dev.to/github/publish-your-github-action-to-marketplace-3i8f)_.

{% github https://github.com/twilio-labs/actions-sms %}

To begin, you will need a GitHub Actions workflow YAML. I copied mine directly from the [twilio-labs/actions-sms](https://github.com/marketplace/actions/twilio-sms). The Twilio team maintains the action from an open-source repo, so if you have questions or looking for other features, definitely reach out to them there.

```yml
name: PR text MSG
on: [pull_request]
jobs:
  text:
    runs-on: ubuntu-latest
    steps:
    - name: 'Sending SMS Notification'
      uses: twilio-labs/actions-sms@v1
      with:
        fromPhoneNumber: '+1(267)8282212'
        toPhoneNumber: ${{ secrets.PAGER_NUMBER }}
        message: 'Hello from Twilio'
      env:
        TWILIO_ACCOUNT_SID: ${{ secrets.TWILIO_ACCOUNT_SID }}
        TWILIO_API_KEY: ${{ secrets.TWILIO_API_KEY }}
        TWILIO_API_SECRET: ${{ secrets.TWILIO_API_SECRET }}
```

Something to keep in mind is that you will need a Twilio trial account and create a Programmable Messaging service to generate your secret key and SID. If you are also curious about how to set up secrets in a GitHub rep, check out my previous article on [The Secrets of An Authenticated GitHub Action Workflow
](https://dev.to/github/the-secrets-of-authenticated-github-action-workflow-3i5o). You will want to put the **PAGER_NUMBER** in a secret too.

Finally, set sending phone numbers to the one generated in Twilio. Also, to trigger the action I have it set to pull_request, but for testing, purposes you can also set it as **[workflow_dispatch](https://dev.to/github/github-actions-manual-triggers-with-workflowdispatch-3di1)**.

And that is it. Enjoy your new text messages. 

![example of my message sent](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gbmv0j1dtv1fyetdsk02.png)
 

_This is part of my 28 days of Actions series. To get notified of more GitHub Action tips, follow the GitHub organization right here on Dev. Learn how to build action with Node.js_

{% link https://dev.to/github/conditional-workflows-and-failures-in-github-actions-2okk %}
How to get the index of the current item in a for...of looping statement in JavaScript?
Tags: javascript
Published: 2021-02-21 00:00:00

---
  title: How to get the index of the current item in a for...of looping statement in JavaScript?
  published: true
  tags: JavaScript
  date: Sun Feb 21 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/get-index-of-current-item-in-for-of-loop-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-99bb40dd8575e5654d213106439e476f.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/get-index-of-current-item-in-for-of-loop-javascript)
  
To get the index of the current item being looped in a `for...of` looping statement in JavaScript, you need to make the iterable into a `key: value` pair in case of `strings` or an Array iterator in case of an `array` and then use the array destructuring to get the `index` as the first value and the current looped value as the second.

This is because the native `for...of` looping statement doesn't provide the index of the current item.

### TL;DR

```js
// array
const arr = [1, 2, 3, 4, 5];

// for...of loop
for (const [index, value] of arr.entries()) {
  console.log(index + ":" + value);
}

/*
OUTPUT:

0:1
1:2
2:3
3:4
4:5
    
*/
```

### For Arrays

Consider this array of strings,

```js
// Strings array
const strArr = ["John", "Roy", "Lily"];

// for...of loop
for (let [index, value] of strArr.entries()) {
  console.log(index + ":" + value);
}

/*
OUTPUT:

0:John
1:Roy
2:Lily

*/
```

Here, we are making the `strArr` (Array of strings) into an Array iterator using the array `entries()` method, so that we can get the index as the first value and the current looped value as the second.

See the example live in [JSBin](https://jsbin.com/lulanabuga/3/edit?js,console)

### For Strings

Consider this string,

```js
// A String
const str = "Hello World!";

// for...of loop
for (let [index, value] of Object.entries(str)) {
  console.log(index + ":" + value);
}

/*
OUTPUT:

0:H
1:e
2:l
3:l
4:o
5: 
6:W
7:o
8:r
9:l
10:d
11:!

*/
```

Here, we are making the `str` (String) into a `key: value` pair using the `Object.entries()` method, so that we can get the index as the first value and the current looped value as the second.

See the example live in [JSBin](https://jsbin.com/jizufilogi/3/edit?js,console)

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

---
The efficiency of creativity
Tags: career, creativity, efficiency
Published: 2021-03-11 07:09:23

---
title: The efficiency of creativity
published: true
date: 2021-02-21 00:00:00 UTC
tags: career, creativity, efficiency
canonical_url: https://jhall.io/archive/2021/02/21/the-efficiency-of-creativity/
---

Software development is, in some sense, all about efficiency. Except when computers are used for entertainment (gaming, for example), pretty much their entire reason for existence is to make certain tasks more efficient. When we write software, we’re generally doing so with the purpose of automating, or simplifying some task that in some way, a human, or other less-efficient machine might be doing.

Certain types of developers dedicate large parts of their careers to making the development of software more efficient. People who write tools for developers, like IDEs, are a great example. But so is anyone who works to speed up a test suite, or build a static analysis tool.

But improving the efficiency of software development can only go so far. I believe there is a fundamental limit to the efficiency gains to be had. There’s a core, creative essence of software development—the part done by human brains—which cannot be optimized away, or made more efficient. This is similar to the established concept of [essential versus accidental complexity](https://en.wikipedia.org/wiki/No_Silver_Bullet). Slow test suites are accidental complexity. The truly creative task of software development is essential. And this _cannot_ be made efficient.

To quote Jerry Seinfeld [on the creative process](https://hbr.org/2017/01/lifes-work-jerry-seinfeld):

> If you’re efficient, you’re doing it the wrong way. The right way is the hard way.
Special links for our websites
Tags: html, links, mailto
Published: 2021-04-13 03:51:33

---
title: Special links for our websites
published: true
date: 2021-02-21 00:00:00 UTC
tags: html, links, mailto
canonical_url: https://glpzzz.dev/2021/02/21/special-contact-links.html
---

Sometimes we need our links to do something else besides going to another http location. Perhaps we want to allow visitor to use other ways to interact with us using email, sms, a call, or others. Let’s se how to.

## Email

Very easy! `<a href="mailto:me@domain.com">Send me an email</a>` will generate an anchor that, when clicked, will tell the browser to open the application in charge of handling email on your system.

More “complex” examples:

- Specify the subject: `<a href="mailto:me@domain.com?subject=Hello">Send email</a>`
- Specify the subject and body: `<a href="mailto:me@domain.com?subject=Hello&body=This%20is%20a%20message">Send email</a>`

More details on [RFC 6068 - The mailto URI Scheme](https://tools.ietf.org/html/rfc6068#section-6).

## SMS

A little different:

- Just open the SMS app: `<a href="sms:">Send SMS</a>`
- Open the SMS app for a certain number: `<a href="sms:+1-555-111-1111">Send SMS</a>`
- Open the SMS app with custom message: `<a href="sms:+1-555-111-1111?body=I%20want%this%20product">Request Product</a>`

More details on [RFC 5724 - URI Scheme for Global System for Mobile Communications Short Message Service (SMS)](https://tools.ietf.org/html/rfc5724#section-2.5).

## Phone Calls

Same idea here:

- Open the dial app on the device: `<a href="tel:+1-555-111-1111">Call me</a>`

More details on [RFC 3966 - The tel URI for Telephone Numbers](https://tools.ietf.org/html/rfc3966#section-6) and in Section 8 is adviced to always enclose the phone number inside the `<a>` tag, so the correct way for previous example should be something like:

`Call me at <a href="tel:+1-555-111-1111">1-555-111-1111<a>.`

## Locations

If you want the link to open a map in a certain location:

- `<a href="geo:22.146147,-80.4426516">Our Office</a>`

More details on [RFC 5870 - A Uniform Resource Identifier for Geographic Locations](https://tools.ietf.org/html/rfc5870#section-6.2).

## Conclusion

In all cases is required that your device have a correct user agent to handle this URI schemes. In PC the tel, sms, and geo will normally not work. But in smartphone the potencial of this feature is amazing. Use it!