teleren/devto huggingface dataset:
DisasterAlerter
Tags: atlashackathon, android, mongodb
Published: 2022-01-12 13:39:40

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


### Overview of My Submission
DisasterAlerter is an alerting system on android where an admin can create an alert and immediately an notification will pop up in the users' phone.


### Submission Category:
**Action Star**


### Link to Code
{% github https://github.com/JoyMajumdar2001/DisasterAlerter %}

### Screenshots
| Images      | Images |
| ----------- | ----------- |
| ![!st page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/059gk2xkx5oa9iy53xe4.jpg)      | ![Admin page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/up4cptok7jdiw74f6ram.jpg)       |
| ![User page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4k3hyr9u6cwmug3ne839.jpg)   | ![Notification](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l7lvweco8etaxkt8127b.jpg)        |

### Realm function

```
exports = function(changeEvent) {
const cred = {
 // FCM credentials
};
var admin = require("firebase-admin");
admin.initializeApp({
    credential: admin.credential.cert(cred)
});
var alertData = changeEvent.fullDocument;

const topic = '/topics/dis-topic';

    const message = {
        notification: {
            title: alertData.type + ' alert at ' + alertData.time,
            body: alertData.msg
        },
        topic: topic
    };
    return admin.messaging().send(message)
        .then((response) => {

            console.log('Successfully sent message:', response);
        })
        .catch((error) => {
            console.log('Error sending message:', error);
        });
};
```

### Used Technology
In this android application , I have used the technologies given below - 

- [Kotlin](https://kotlinlang.org):
In this project kotlin is used to code the full application on Android Studio
- [Mongodb-atlas Database](https://www.mongodb.com/atlas/database):
Mongodb-atlas database is used to store all the data admin send for alert
- [Mongodb Data-Api](https://docs.atlas.mongodb.com/api/data-api):
Data-Api is used to read and write data from Mongodb Database in the android application through network call
- [Mongodb Triggers](https://docs.atlas.mongodb.com/triggers):
When a new document is created via Data-Api, a Realm Function is called to send a request in [FCM](https://firebase.google.com/docs/cloud-messaging) to send notifications to user end.
- [FCM](https://firebase.google.com/docs/cloud-messaging):
Firebase Cloud Messaging is used to send topic wise notifications using Realm function.
Surviving 2021 as an Entrepreneur
Tags: webdev, productivity, podcast
Published: 2022-01-12 13:28:36

{% spotify spotify:episode:7q2mjH27NVo0q8V0NJWJsn %}

## What is HTML All The Things

HTML All The Things is a [web development podcast](https://podcast.htmlallthethings.com/) and [discord community](https://discord.com/invite/jweMCx9) which was started by Matt and Mike, developers based in Ontario, Canada. 

The podcast speaks to web development topics as well as running a small business, self-employment and time management. You can join them for both their successes and their struggles as they try to manage expanding their Web Development business without stretching themselves too thin.

## Announcements

The **Svelte for Beginners** Udemy course is now live! Mike took his experience in teaching and learning Svelte and created a course. 

This course will teach you the fundamentals of JavaScript frameworks. 

**Get it now on Udemy!** 👇

[Svelte For Beginners](https://www.udemy.com/course/svelte-for-beginners/?couponCode=HATTSALE)

## What's This One About?

Doing business during the pandemic has been great for some, horrible for others, and just plain weird for most everyone else. With Web3 technologies being shoved in everyone's faces, to lockdowns every few months for some parts of the world - the market has changed drastically for everyone in it. In this episode, Matt and Mike discuss how they made it through 2021, and plan on making the most out of 2022. 


## Show Notes

### A Look Back

* Rough times losing a large steady contract
* Imposter syndrome sets in
* Pandemic blues
* Pivot to audience building and podcast
* Twitter explosion
* Web3
* Opportunities start coming
* Podcast milestones
* Svelte for Beginners course creation

### A Look Forward

**Mike's Goals**
* Focus/time management
* Mind (Read and retain information from books)
* Body (Find the right exersise and nutrition plan for me)
* Code (Rust and GoLang)

**Matt's Goals**
* Passive income
* What streamers use website
* Focused sprints (6-8 weeks on one project)

 

## Thank you!

If you're enjoying the podcast consider giving us a review on [Apple Podcasts](https://podcasts.apple.com/us/podcast/html-all-things-web-development-web-design-small-business/id1412209136) or checking out our Patreon to get a shoutout on the podcast. 

**[Support us on Patreon](https://www.patreon.com/htmlallthethings)**


You can find us on all the podcast platforms out there as well as

[Instagram (@htmlallthethings)](https://www.instagram.com/htmlallthethings/)
[Twitter (@htmleverything)](https://twitter.com/htmleverything)
[TikTok (Html All The Things)](https://www.tiktok.com/@htmlallthethings)
Get JetBrains All Products Pack 1 Year Subscription at 90% Off
Published: 2022-01-12 13:24:47

You can get JetBrains 1 year subscription at 90% off here: [**https://bit.ly/JetBrains90D**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hjonzb7ud0hoz6x9z8bg.png)](https://bit.ly/JetBrains90D)
How they made controls at Github? Popup
Tags: html, css, javascript, github
Published: 2022-01-12 13:13:43

- Episode1: [Dropdown](https://dev.to/kiranmantha/how-they-made-controls-at-github-1h18)
- Episode2: [Modal dialog](https://dev.to/kiranmantha/how-they-made-controls-at-github-modal-dialog-2pgi)
- Episode3: [Hamburger menu](https://dev.to/kiranmantha/how-they-made-controls-at-github-hamburger-menu-20k)
- Episode4: **Popup**

## Recap
In last episode we gone through creation of hamburger menu with details and summary tags.

## Now
This is the last episode of this series which walks through creation of popups using these wonderful tags.

Asusual let's start with same boring repeatitive html
```html
<details aria-haspopup="true">
    <summary>
        I'm a popcorn
    </summary>
    <div>You are awesome!!</div>
</details>
```
ahhhh popcornnn it's movie time...:smiley: wait that's a stupid accordion...:grimacing:

ok ok i saw your frustation.. take a drink

you know what, we don't have to start from scratch for this. Popup is same as that of dropdown which we designed in [1st episode](https://dev.to/kiranmantha/how-they-made-controls-at-github-1h18). 

The difference is:
1. Popup can contain any type of content whereas a dropdown contain a list of options.
2. It is an in-line element unlike dropdown which is a block element.

so we can reuse dropdown styles(_well we don't need most of them_) which looks like:
```scss
:root {
  --primary: #fff;
  --border-color: #ccc;
  --spacing: 1rem;
}

details[aria-haspopup="true"] {
  position: relative;

  & > summary {
     list-style: none;
  }
  &[open] > summary {
     &::before {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1;
      display: block;
      cursor: default;
      content: ' ';
      background: transparent;
    }
  }
}
``` 
There it is. The basic structure is done. Click anywhere on the page, the accordion will close. Now lets add simple styles to container `div` tag.

```scss
summary + div {
   position: absolute;
   margin: 4px auto;
   padding: var(--spacing);
   z-index: 2;
   background-color: var(--primary);
   border: 1px solid var(--border-color);
   border-radius: 4px;
}
```
Awesome!! right?? click on `summary` tag, it will open a small popup saying **_You are awesome_** yes i mean it. you really are!!

By applying `left`, `right` or `bottom` css to `div` tag, you can position the popup in any direction.

And that's it. There's your Popcorn.. ohh i mean Popup :smile:

Thanks for your time and [here](https://stackblitz.com/edit/details-summary-tag-based-controls?file=index.html) is the working example.

See you again :v:,
Kiran :wave:
React - The Official Roadmap
Tags: react, javascript, webdev, beginners
Published: 2022-01-12 13:06:05

### The Prerequisites

Learning **React** is a great choice for **Frontend Developer** due to it’s **larger community** and **popularity** in the industry, however, you need to understand that **React** is not a technology for absolute beginners, so here is what you will **need to know:**

**Basic HTML**

- Common Tags
- Attributes
- File Structure

**Basic CSS**

- Applying Styles
- Flexbox Layouts
- Media Queries

**Good Knowledge of JavaScript**

- Variables (let, const)
- Loops and Conditionals
- Arrow Functions
- Arrays, Objects
- Imports and Exports
- How to use NPM

### Initial Steps

Spend time to understand the base concept of React apps, learn how to create simple application, study the folder structure and the concept of components, your path:

create-react-app → Components → Functional Components → JSX → Props and States → Hooks: useState and useEffect → Conditional Rendering → Lists and Keys → Events and Input Handling

Follow the path and make sure to practice what you see, not just watch. Next, let’s learn about the React Ecosystem.

### React Ecosystem

Since **React** is only a **library** and **not a framework,** you will need to work with various other libraries to build **complete apps,** here is the **path to take:**

Routing → React Router

State Management → Context API → Redux

Styling → Styled Components → Tailwind CSS

HTTP → Use Fetch In React → Axios

Forms → Hook Form Handling → Formik

There are plenty of options, but integrating libraries with the core React package is something that you will need to master in order to build advanced applications.

### Advance Topics

If you think you mastered the basics, you should move on to **learning these topics:**

Advance Hooks (useRef, useMemo, useCallback, etc.) → Refs → Higher Order Components → Error Boundaries → Practice!

Now it’s time to practice and build some amazing projects and add them to your portfolio to impress!

Was this useful? Let me know with a comment. Share it with others and Save it for later!

**Happy Coding 🧑‍💻**

---

### Let's connect 💜

You can follow me on [Twitter](https://twitter.com/MrDanishSaleem), [Instagram](https://www.instagram.com/mrdanishsaleem/) & [GitHub](https://github.com/mrdanishsaleem/)

If you like this post. Kindly support me by [Buying Me a Coffee](https://www.buymeacoffee.com/mrdanishsaleem)

![Buy Me a Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fefzbxbnwww7tkght33w.png)
I am unable to find Freelance Clients? Help!
Tags: webdev, programming, productivity, react
Published: 2022-01-12 12:56:49

I am new to freelancing can anyone tell me, how to find clients and how to approach them. Any suggestions pls drop the comment.


This is **Aravind Kumar Vemula**, I am good at Frontend Development using ReactJs, HTML, CSS, JavaScript, TailwindCSS.
Open for freelancing. 

My mail Id: aravindkumae66@gmail.com
My Twitter: AravindKumarV09
Switch Button Magic By Framer Motion
Tags: react, animation, framer, tailwindcss
Published: 2022-01-12 12:48:28


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

How to create an animated switch button in React?
First, we install tailwindcss for this job
There will be two elements in the switch button: a container and a bull.

container
`cursor-pointer	w-16 h-10 flex items-center bg-gray-300 rounded-full p-1`
bull
`bg-white w-8 h-8 rounded-full shadow-md`

It's that easy to have a static switch button.
now we need to add click behavior.
lets create a simple use state hook to toggle active state. 
`const [isSelected, setSelected] = useState(false)`
on container we will add click handler
`onClick={() => setSelected(!isSelected)}`
and interactive css
```
${isSelected ? 'bg-red-500 justify-end' : 'justify-start'}
```
Take it for a test. 
its working but something is missing.
Yes, animation, are you ready for the magic 🪄?
Change the bull div to be motion div.
Add the magic layout property.
ta dam 🎉🎉🎉 you have a nice switch button.

you can see and play with the code - run in terminal - npm run build && npm run preview.

{% stackblitz vite-react-tailwindcss-l5tpiw %}
How to structure your html?
Tags: discuss, beginners, webdev, html
Published: 2022-01-12 12:45:52

I've been learning web dev for a few months now, and getting comfortable with the basics. But I find it hard to keep track of my html files when it becomes too nested, so I've been looking at ways to structure it and create modules.

1. Have a div with an onload link to an external html file. It can end up being a lot of files for a single page of a site, but other than that, it seems to work okay.

2. To use vanilla JS to createElement() with loops and appendChild() to divs on window.onload. This makes it easy to create, add, remove and reuse elements as needed.

I'm wondering if there's a best practice for structuring your html in a modular way that I'm not aware of?
ViaVR: Helping a VR startup develop a video content management system
Tags: python, react, webdev, design
Published: 2022-01-12 12:31:44

ViaVR is a startup that provides b2b VR solutions by offering virtual reality headsets for rent. The main partners of the service are hotels, which place helmets in the rooms where guests can rent them for a certain amount of time.

When they approached Evrone, ViaVR had already begun to capitalize on the advantages of virtual reality in the hospitality industry. But in order to continue expanding their services, they needed help developing better video CMS software and tools for managing VR devices.

[Read the full case study here.](https://evrone.com/viavr)
A Guide For Choosing The Right Mobile Application Development Platform.
Published: 2022-01-12 12:25:09

Mobile phones play a very vital role in our day-to-day lives. If you had read the previous blog you would have an idea about how mobile application is useful for your business. So developing a mobile application for your business is an essential factor for growing your business online. For mobile application development first, you need to clear out what are the types of mobile application development so that you can choose wisely among them.

Types of mobile application development:

Native application development
Cross-platform application development

What is native application development?

The word native app development refers to an application that is exclusively developed for a single platform. The code of this application is exclusively developed according to the requirement of a single platform only.

Native apps are popular in providing a high-performance user experience because these apps are designed according to a specific UI. The problem with native app development is that you can’t copy the code for another app development platform. The code is programmed exclusively for a single platform only.

What is cross-platform application development?

The word cross-platform app development refers to an app development that can be run on more than one platform. The code of this application is developed to run on both platforms. This application is developed with the help of various tools like a Flutter, React Native, Xamarin, and many more.

The main benefit of cross-platform application development is that it does not limit your audience to a specific platform only. Due to enhancement in digitalization now there are several different operating systems available in the market so it's not favorable for a businessman to limit its application to a specific operating system only.

Both of these application development platforms have their own pros and cons. “Now it's upon your requirement that we are most concerned about at [CodeEpsilon”](https://www.codeepsilon.com/). We are experienced in developing both types of mobile applications. If you want a free consultation about your business [contact us.](https://www.codeepsilon.com/contactus.html)
MongoDB Submission Post Jim Airbnb
Tags: atlashackathon
Published: 2022-01-12 12:23:49

[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.)


### Submission Category: Choose Your Own Adventure

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


### Link to Code [Here.](https://github.com/Akhlak-Hossain-Jim/mern-project-1)

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


### Additional Resources / Info

See video [here.](https://www.loom.com/share/e0575f5d4807422a853b490ca3ce36bb)

Tech Stack:

Frontend:
  - React.js
  
Backend:
  - Node.jd
  - express.js
  
Database:
  - MongoDB
Filter only one field in mongodb
Published: 2022-01-12 12:21:37

```
const jobData = await JobRequirement.find({cId: user.corporateId}, {_id: 1})
      
      console.log("result", jobData)
```
<pre>result [
  { _id: 61d3e5dc0b2613ae328cc0c5 },
  { _id: 61d3e66e0b2613ae328cc0c6 },
  { _id: 61d3e74a0b2613ae328cc0c7 },
  { _id: 61d556dc0b2613ae328cc169 },
  { _id: 61d57dc20b2613ae328cc16a },
  { _id: 61d580900b2613ae328cc16c },
  { _id: 61d59a9d0b2613ae328cc16d },
  { _id: 61d84bd90b2613ae328cc18f },
  { _id: 61d84c700b2613ae328cc190 },
  { _id: 61d92c710b2613ae328cc1ac },
  { _id: 61d92ecd0b2613ae328cc1ad },
  { _id: 61d947510b2613ae328cc1ae },
  { _id: 61d996ef0595f55e1f4e0a40 }
]
</pre>
5+2 Phenomenal FREE Platforms To Learn Coding
Tags: programming, softwaredevelopment, webdev, coding
Published: 2022-02-22 21:37:09

---
title: 5+2 Phenomenal FREE Platforms To Learn Coding
published: true
date: 2022-01-12 12:02:51 UTC
tags: programming,softwaredevelopment,webdevelopment,coding
canonical_url: https://javascript.plainenglish.io/5-2-phenomenal-free-platforms-to-learn-coding-44da82f69775
---

[![](https://cdn-images-1.medium.com/max/1500/1*SmgNbCl1KrS0GAz0AyG3Ug.jpeg)](https://javascript.plainenglish.io/5-2-phenomenal-free-platforms-to-learn-coding-44da82f69775?source=rss-1282c85b5cbc------2)

Let me introduce you to the world of software development with these five phenomenal FREE platforms that help you to become a programmer.

[Continue reading on JavaScript in Plain English »](https://javascript.plainenglish.io/5-2-phenomenal-free-platforms-to-learn-coding-44da82f69775?source=rss-1282c85b5cbc------2)
Android Application Development Company in India
Tags: androidappdevelopment, mobileapp, appdevelopment, appdevelopmentservices
Published: 2022-01-12 12:01:22

**Misha Infotech** is one of the leading **[android application development company](https://www.mishainfotech.com/android-application-development)** in India. We provides advanced and powerful app development solutions that can be customized as per specific business needs. To know more just visit here -
https://www.mishainfotech.com/android-application-development
2021: Our Year in Sports
Published: 2022-01-17 12:42:19

---
title: 2021: Our Year in Sports
published: true
date: 2022-01-12 12:00:00 UTC
tags: 
canonical_url: https://dataroots.io/research/contributions/2021:-our-year-in-sports
---

Entering 2022, we also look back on an incredibly active year of sports. Together with the company, our team events grew and so the amount of physical exercise grew! Check out some summary stats below or click the link in the description to find out more!

Various initiatives like the Strava challenges, Hercules games or datafoots team burned the calories for the celebration with databrews afterwards.

Healthy challenges were a reason for some to push their boundaries while it provided an opportunity to finally meet their colleagues in real life for many others.

2021 has set the benchmark for 2022 with many more cool events coming up! Our Strava challenge has gotten a fixed spot on our calendar and many initiatives are yet to come.

To celebrate this successful year, we're sharing the joy of sports by giving back and donating 5 Buffalo bikes to [World Bicycle Relief](https://www.linkedin.com/company/world-bicycle-relief/)

![screenshot 2022 01 12 at 15 18 36](https://dataroots.io/static/24d7abc3adaea687038d0af88e788f5c/c1724/screenshot-2022-01-12-at-15-18-36.png "screenshot 2022 01 12 at 15 18 36")

Also do check out the data we've gathered and traces we've left during our activities in the visualisation here: [https://dataroots.io/sports/wrapup-2021/](https://dataroots.io/sports/wrapup-2021/ "https://dataroots.io/sports/wrapup-2021/")
Graphic Design Trends in 2022
Tags: graphics, beginners, design, trends
Published: 2022-01-12 11:45:21

Hey.. Devs and Designers
here i show graphics design trends will be used in 2022,

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

#Classic Serif Font
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c5fvjtz3yi0yc57694k2.png)
 
#Contemporary Medical Branding
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6tf5dfqq070rjfhhatw8.png)

#3D Design
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j6wv5milo7bho83lbti0.png)

#3D Typography
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2olx77m6nzzw01kc65e4.png)

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

#Simplified Logos
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qiaicpswl0lth20j63q3.png)
 
#Minimalist Retro
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dhxjv7stb3f0oeo8hr3m.png)

Follow me on instagram https://www.instagram.com/codingkey/
How stupid is Matlab OOP?
Tags: matlab, programming
Published: 2022-01-12 05:57:15

Let write a normal class in Java first
```java
public class Car {
    private int wheels;
    public void setWheels(int new_wheels) {
        wheels = new_wheels;
    }
}
```

Keep in mind that Java is a lower-language than Matlab. Now you might ask in Matlab it should simpler than the Java code. Guess what. It's no.

```matlab
classdef Car
    properties (Access = public)
        wheels
    end
    methods (Access = private)
        function setWheels(new_wheels)
            wheels = new_wheels
        end
    end
end
```

In Matlab, you **have** to define blocks (`methods` and `properties`) to separate functions and variables. What even more confusing is that MathWork calls `Access` an attribute. ([Method Attributes](https://www.mathworks.com/help/matlab/matlab_oop/method-attributes.html), [Properties attributes](https://www.mathworks.com/help/matlab/matlab_oop/property-attributes.html)). In UML notation or **any** language providing OOP, attributes mean object/class variables or properties. The right words for `public` or `private` are modifiers (in Java), specifiers (in C++). As a result, when you are talking with other engineers (who are not proficient in matlab), you could make them confused with words. 

Now we will add a public integer attribute `plate` to class `Car`

in Java
```java
private int plate;
```

in Matlab
```matlab
properties (Access = private)
    plate
end
```

You see unnecessary keywords and characters in matlab. If the researchers or the engineering need fast prototyping, matlab isn't for them. Ironically, Matlab claim to be the right language for scientific computing.