teleren/devto huggingface dataset:
Building My First Side Project - Part 1
Tags: nextjs, typescript, react, webdev
Published: 2022-01-16 06:49:56

## Introduction

So it has been a while since I got introduced to web development and the community. Wrote my first line of simple code back in 2016 but only formerly started coding in 2020 when I was doing my first year in varsity. I have been contemplating this whole side project thing for making my [portfolio](https://johannesmogashoa.co.za) look appealing to prospective employers. Finally found a simple project to do: **_<u>A Student Accommodation Booking Portal</u>_**.

<img width="100%" style="width:100%" src="https://media.giphy.com/media/WqxqV4WWv7yftHpO4o/giphy.gif">

## Why??

I was recently trying to apply for accommodation and one of the residences didn't have a booking system. They were simply using a Google Forms to collect user information and to process everything. So I thought why not build a simple web app for them. 

<img width="100%" style="width:100%" src="https://media.giphy.com/media/kIZtwKntRPtGlfEuOh/giphy.gif">

## Then What??

In doing so, I opted for the following technologies when building this project:

### <u>Core Technologies:</u>

- React/NextJS
- Tailwindcss
- Prisma
- TypeScript
- SQLite DB
- NextAuth

### <u>Experimental Technologies:</u>

These are technologies that I am interested in learning/working with but currently unsure.

- tRPC
- GraphQL
- Zustand

## Features

This particular platform will include the following features: 

- Authentication (Google, Facebook, Email Magic Link) - Powered by NextAuth
- Role-based Auth
- Profile Creation and Editing

- Viewing of all the properties
- Application for accommodation and editing of application
- Application Status tracking
- Space Availability tracking

### Progress?

So far not a lot has been done except for the following: 

- project initialization with typescript
- adding tailwindcss
- adding and initializing prisma and schema
- adding nextauth
- setting up Google OAuth Credentials

Current progress can be checked out here 👉 [Github Link](https://github.com/JohannesMogashoa/student-res-booking)

<img width="100%" style="width:100%" src="https://media.giphy.com/media/RbDKaczqWovIugyJmW/giphy.gif">

For now it's back to coding. Part 2 coming soon... cheers 🤘🤘
Confused in Android Development ?
Tags: beginners, programming, dart, android
Published: 2022-01-16 06:40:25

Android software development is the process by which applications are created for devices running the Android operating system.
We can build android application using java,kotlin,dart.

Guide to start android development:-
1)Start With a Programming Language
2)Understand the Android Application Lifecycle
3)Learn the Basics of an Android Platform
4)Get to Know the Android Tools
5)Start With Small Projects
6)Distribute Your Project
Headphone responsive landing page with HTML CSS
Tags: webdev, beginners, tutorial, todayilearned
Published: 2022-01-16 06:26:05

This is my 1st website of the "10 responsive websites with HTML CSS" challenge. This challenge is inspired by the [florin pops](https://www.florin-pop.com/) ["10 websites with HTML CSS"](https://www.youtube.com/watch?v=Rz-rey4Q1bw&t=207s) challenge which is currently published on YouTube.

{%youtube BoRB0kic5M0 %}

Headphone – Single Product Shop HTML CSS Theme is an elegantly designed and versatile Product theme that gives you smartly optimized page layouts and sections so you can easily create a stunning Product store for a single product. It incorporates a clean and modern design to give your website a professional look in little to no time.

{% link https://dev.to/atulcodex/how-to-send-whatsapp-message-through-html-link-23f8 %}

#### Features
- HTML5 & CSS3
- No framework
- Responsive Template
- Free icons used
- Pixel Perfect
- Clean & Unique Design
- Easy to customize
- Retina Ready
- Unlimited Colors
- Boxed or Wide layout
- SEO friendly
- Super fast loading speed


{% github https://github.com/atulcodex/headphone %}


[![Headphone - Responsive landing page](https://i.ibb.co/vwN8cgW/live-demo.png)](https://headphone-atulcodex.netlify.app/)

.
.
.
##### Support me and my work to see more such projects
[![Atul - Buy Me A Coffee](https://i.ibb.co/7rR9S4L/buy-me-a-coffee.png)](https://www.buymeacoffee.com/atulcodex)
18 ways to ATTACK a Vault server | Production hardening | Tharun
Tags: systems, security, tutorial, linux
Published: 2022-01-16 06:25:25

## YouTube video

{% youtube 3ikQlRQAso4 %}

## Podcast:

{% spotify spotify:episode:6FyVgWpLYYmehmA6KzVJM7 %}

## Episode

In this episode we will look at 18 ways in which your Hashicorp Vault server or any Linux server in general can be attacked. We will also discuss on how to prevent those and secure your server. This process is also known as production hardening. 

Written by,
{% user developertharun %}

# Thank you for reading, This is Tharun Shiv a.k.a Developer Tharun

![Tharun Shiv](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xtxq6bdms36fmn62450h.png)
System Architecture of WhatsApp end to end encryption of backup [2022]
Tags: systems, security, architecture, tutorial
Published: 2022-01-16 06:20:25

## YouTube

Part 1:

{% youtube If-BWZRSbVw %}

Part 2: 

{% youtube 2ddhlZITbB0 %}

## Podcast:

Part 1:

{% spotify spotify:episode:05JTTny6u8WNmeCxGdwPXO %}

Part 2: 

{% spotify spotify:episode:3louceG9Ktu8VNDOAxzKyF %}

## Episode

In the above episodes we look at how WhatsApp encrypts the backups end to end. There are two flows involved here, one is based on password and the other without. We will look at the whitepaper of WhatsApp where they have mentioned about the entire process in detail. 

Written by,
{% user developertharun %}

# Thank you for reading, This is Tharun Shiv a.k.a Developer Tharun

![Tharun Shiv](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xtxq6bdms36fmn62450h.png)
How to create a simple name calculator app with AngularJS
Published: 2022-01-16 06:18:16

**Introduction**

  AngularJS is a popular Javascript frontend framework that is widely used by all and it's very easy to use. In this tutorial, I will teach you how to use AngularJS to develop a simple name calculator app.

**How-to**

- After downloading your angular file into your project folder, create two files which are `app.js` and `index.html`. 
  The `app.js` file is where you are going to set up your application while the `index.html` will hold the output.

**LET'S GET STARTED**

- Include your `angular.js` and `app.js` files in your  `index.html` using the script tag.

- In your `index.html`, you need an `input` and maybe a text line which will output the result. You can set this up using the form input tag and a paragraph tag to hold the output.

- The next step is to go into your `app.js`, set up an IIFE ( immediately invoked function express) which will hold your function. 

- set up the angular app and a controller app which will hold the function that will control your name calculator app

- Include your angular app into the body of your `index.html` ( this is done by putting `ng-app="nameOfAngularApp"` inside the start tag of the body).

- Wrap a `div` around your `input` and `p` tags then put inside of the `div`, the *controller app*. This is to ensure the controller app only act on whatever is inside this `div` and doesn't affect any other thing on your page. It is done by putting `ng-controller="nameOfControllerApp" inside the start tag of the desired element you want it to have an effect on.


After the above steps, Your `app.js` will look like this: :
![`app.js`](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jt74zkdlifi4r5gsf19p.png)

and your `index.html` will look like this:

![`index.html`](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oxf73hyvci5fsvhwy8my.png)

**Let's move on**

The next step is setting up the functions in the controller app, let's go:

- The first step is to include `$scope` as an argument in the function of the controller app. This will enable you to set up anything in your app.

- Create two scopes. One for the input and the other for the output.  
  1. Your input scope will be include in your `input` tag using the `ng-model="scopeName"` inside the start tag. **set it to an empty string**
  2. Your output scope will be the one to hold the calculation result.

- Create the function that will calculate the function and set it to the output scope. 

After these steps, your `app.js` will look like this:



![final 'app.js`](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gchprskboihyz9wgp1ti.png)


and your `index.html` will look like this :


![final `index.html`](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4yym3i3ajiztw486sqa8.png)


Reach out if you have any question regarding this: [Twitter](https://twitter.com/devtoheeb), [Email](mailto:akandeolalekantoheeb94@gmail.com)


**Thanks for reading 🙏**
New Years Resolution - Dev Log 8
Tags: webdev, beginners, programming, computerscience
Published: 2022-01-16 05:41:04

Personal notes: Sorry I did not post yesterday. I did get work done, but I work long shifts and they take a toll lol. I am very ready to get this UI done, pound out the backend, and start marketing. I have got a lot of positive interaction from people who are starting to follow my journey via one platform or another, and I really appreciate it. I have even made a few new friends from this experience, and I am not even into double-digit dev logs. Just makes me more excited for the future.

I really wanted to get a video up showing off all the work I have done with me talking through the UI, but these 9-hour shifts are getting the better of me. After I post this it is back to the grindstone, need to hack out the post preview section of the post a job screen.

Idea 1 - Job Board: Most recently I started on the application form that appears when you hit apply on one of the job cards. I found out that I do not really know what happens on a standard job board when an applicant applies. So for now, in the post a job screen, you can either provide a link to an internal application that applicants will be re-directed to, or give an email where I will send the applicant information. I need to research the topic, but I believe this is what most job boards do.

Idea 2 - Paid Plugins: Scratched

Idea 3 - SaaS: I have a solid idea for a SaaS company I believe, but will not start on this till my job board is out and functional, even though I'm really excited about it.

Idea 4 - Paid API: Just learned about how you can build an API and market it easily through rapid API. I am thinking that this might be something I want to try.
Hack Solidity: Visibilities
Tags: solidity, blockchain, security, smartcontract
Published: 2022-01-16 05:34:50


In Solidity you can specify the visibility of your function, i.e. to determine whether a function can be called externally by users, by other derived contracts, only internally or only externally.

By default, the function is `public`. 

As described in the Solidity Documentation there are four types of visibility for functions and state variables:

- external

- public

- internal

- private


External functions are part of the contract interface, which means they can be called from other contracts and via transactions. Note, an external function cannot be called internally.

Public functions are part of the contract interface and can be either called internally or via messages. 

Internal functions and state variables can only be accessed internally (i.e. from within the current contract or contracts deriving from it), without using `this`.

Private functions and state variables are only visible for the contract they are defined in and not in derived contracts.

The problem with the visibility is that if you do not specify the desired type function that should be `private` will be `public`, and thus can be called by unauthorised people.  

Let's look at the exapmle.

```
contract HashForEther {

    function withdraw() {
        // Winner if the last 8 hex characters of the address are 0.
        require(uint32(msg.sender) == 0);
        _sendWinnings();
     }

     function _send() {
         msg.sender.transfer(this.balance);
     }
}
```

This is a simple game where to win the balance a user must generate an Ethereum address whose last 8 hex characters are 0.

As you can see the visibility of the `_send` function has not been specified. As a result, anyone can call this function (default mode is `public`) and get the balance.

## Preventative techniques

Since all the default visibility for functions is `public` it is recommended to always specify the visibility of all functions in a contract, even if they are intentionally `public`.



### Sources

- https://docs.soliditylang.org/en/latest/contracts.html?highlight=library#visibility-and-getters

- https://blog.sigmaprime.io/solidity-security.html#visibility
App Store Connect now shows analytics for in-app events
Published: 2022-01-16 05:17:58

Developers can now access analytics for in-app events through App Store Connect.

In-app events such as game competitions, movie premieres, and livestreamed experiences can be great ways of driving user engagement. Events can also be showcased in the App Store to help gain new users:

Measuring the effectiveness of an in-app event has been more difficult than it should be. Apple wants to fix that.

This week, Apple announced that developers can access key information about in-app events through App Analytics in App Store Connect.

“You can now view information about your in-app events, including event page views, reminder and notification data, and the number of downloads and redownloads that were driven by your in-app events,” explained Apple.

“Each metric can be viewed by territory, source type, device, and more, so you can understand how your in-app events are influencing your apps’ growth and success.”

In-app events were officially launched in October 2021 and many developers have been taking advantage to drive user engagement in their apps and games. The new analytics feature for in-app events will help developers determine whether they were worth running.
Top 6 Free Icon Website
Tags: ux, design
Published: 2022-01-16 05:13:05

Yesterday I was searching for free icons and found some of amazing icon Libraries


1. FLATICON

Access +6.4M vector icons & stickers
Download free icons and stickers for your projects
PNG, SVG, EPS, PSD and BASE 64 formats.

Link: https://www.flaticon.com


2. ICONFINDER
Filter through the world’s largest marketplace for icons and illustrations with flexibility and ease
Made up by submissions from top designers around the world, and curated by team
Link: https://www.iconfinder.com/


3. ICONOIR
Iconoir is one of the biggest open source libraries with currently 1007 SVG Icons. No premium icons, no email sign-up, no newsletters.
Link: https://iconoir.com/


4. FREEBIESBUG

Hand-picked resources for web designer and developers, constantly updated.
Link: https://freebiesbug.com

5. FEATHER ICON

Simply beautiful open source icons
Link: https://feathericons.com


6. ICONSVG

All SVG Quick customizable icons for your projects
Link: https://iconsvg.xyz

Share if you like it and subscribe to my newsletters https://bitfumes.com/newsletters
Day 8 of 100 - Java: Use cases
Published: 2022-01-16 04:55:07

### Thoughts
The Java is there from a number of years. A lot of articles, docs, solutions are available. I find it difficult to follow what is it that I should learn about.

To my knowledge (hands-on), Java is used for

1. coding as high-level language for building systems,
2. compilers (examples, https://github.com/apache/systemds),
3. Java API Clients (https://cloud.google.com/java/docs/reference),
4. Building websites (https://github.com/JetBrains/kotlin-web-site)

Java as a API client is powerful.

### Space Rocket loading project

https://github.com/j143/java-basic-space-challenge

> phase-1.txt
```txt
building tools=2000
building tools=2000
building tools=2000
building tools=5000
building tools=5000
building tools=2000
building tools=1000
building tools=5000
building tools=6000
shelter equipment=5000
construction equipment=5000
plants=1000
steel=8000
books=1000
water=5000
```

> phase-2.txt
```txt
habitat=3000
colony=5000
food=5000
habitat=3000
colony=5000
food=3000
colony=5000
food=3000
```

### `static` keyword

Static fields

```java
// Person.java
public class Person {
    public static int instanceCount;
    public int localCount;

    public Person() {
        instanceCount++;
        localCount++;
    }

}
```

```java
//Main.java
public class Main {
    public static void main(String [] args) {
        for(int i=0; i < 4; i++) {
            Person person = new Person();
            System.out.println("(" + person.localCount + ", " + + person.instanceCount + ")");
        }
    }
}
```

output will be: `(1, 4)`

Static Method

Like static fields, static methods belong to class not objects.

Points:
1. This is a method independent of the object
2. A static method takes in input arguments and returns result based on input only nothing else
3. The static method does not need any field values
4. But, a static method can still access static fields since they belong the Class

```java
public class Compute {
  public static int add(int x, int y) {
    return x + y;
  }

  public static int subtract(int x, int y) {
    return x - y;
  }
}
```
`add` and `subtract` methods can be called without creating the object.

```java
Compute.add(2,3);
```
Read and Write Data to Local JSON File with NodeJS
Tags: node, jsondata, javascript, programming
Published: 2022-01-16 04:49:29

While working with NodeJS, We may need to work with the local JSON file.

In this article, We will see writing data to a local JSON file with NodeJS application. Let's start step by step:

1.Create an empty JSON file named posts.json

```
{

"posts": []

}
```

2.Read data from JSON file

Here we will read the JSON file and store the data into a variable after parsing it.
```
var fs = require('fs');

fs.readFile('./posts.json', 'utf-8', function(err, data) {

    if (err) throw err

    let postsArr = JSON.parse(data) })
```

3.In the parsed data push the new data.

create/modify the data which is needed to write into the JSON file. For simplicity, I am creating a single object.

```
const newPostObj = 

{

        id: 12,

        authorId: 242,

        title : "11unt aut facere repellat provident occaecati excepturi optio reprehenderit",

        body :"22uia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"

    }
```

4.Push the new object to the parsed data of the posts.json file, If you have multiple objects(Array of objects) to write into the file then in the below code you will need to create the loop so that each object will be pushed in the postsArr variable.
```
postsArr .posts.push(newPostObj)
```

5.Write the updated data into posts.json file
```
   fs.writeFile('./posts.json', JSON.stringify(postsArr), 'utf-8', function(err) {

        if (err) throw err

        console.log('JSON file successfully updated');

    })
```

Let's  see the complete code:

```
var fs = require('fs')
 
fs.readFile('./posts.json', 'utf-8', function(err, data) {
    if (err) throw err
 
    var arrayOfObjects = JSON.parse(data)
    arrayOfObjects.posts.push({
        id: 12,
        authorId: 242,
        title : "11unt aut facere repellat provident occaecati excepturi optio reprehenderit",
        body :"22uia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
    })
 
    console.log(arrayOfObjects)
 
    fs.writeFile('./posts.json', JSON.stringify(arrayOfObjects), 'utf-8', function(err) {
        if (err) throw err
        console.log('JSON file updated successfully!')
    })
})
```

I hope this article helped you to write JSON file with NodeJS. [Click here](https://jsonworld.com/nodejs) to read more articles on NodeJS.

[Click here to Read How to Read Local JSON file in Angular](https://jsonworld.com/demo/how-to-read-local-json-file-in-angular)

Thanks!
Downloading Image Files from Websites
Tags: python, webdev, beginners, programming
Published: 2022-01-16 04:42:00

One of my clients asked me whether there's an easier way to download image files from a website. That is, easier than right clicking the photo and 'save image as' route. I won't share the details but they wanted to crawl an ecommerce website and get the product image files.

I did a few web scraping projects before but I never had to download image files before so I looked into available options.

I found two that looked simple. One was using the Requests library and the other was this thing called Wget [https://pypi.org/project/wget/](), and I opted for Wget.

Here is the basic setup for downloading an image file from the web.

```python
import wget
url ='http://image_url.jpg'
filename = wget.download(url)
```
That's it. Use the Requests library and Beautiful Soup to get a list of urls for image files and loop them over and download the files using Wget! Oh make sure you check the website owner's policy on web scraping.
Project Universe metaverse dev update!
Tags: gamedev, unity3d, showdev, metaverse
Published: 2022-01-16 03:44:44

Special thanks to volunteer CMDR Ash for all his work!

Texture, character controller, character model thingy, crouching, prone, ladder, 1st-3rd person camera, input system, and volume gas equalization updates have been pushed.

![Texture, character controller, character model thingy, crouching, prone, ladder, 1st-3rd person camera, input system, and volume gas equalization updates have been pushed.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s2i508kv43i7yjviu3sy.png)
Leaving electron.js to the past.
Tags: javascript, webdev, tauri, electron
Published: 2022-01-16 03:32:05

So, I recently started using [`tauri`](tauri.studio) because electron.js was no longer working on my pc... I was amazed to see the release build size of the `tauri` app.
It was way smaller than expected.

## Size Comparison

| Electron.JS   | Tauri         |
| ------------- |:-------------:|
| `62.5`mb      | `4.32`mb      |

> These are the sized of installers for windows. The project was just a basic `hello world` displaying page.

So as you can see, `Tauri` is the next desktop framework for webdevs... `Electron.JS` is nothing compared to `Tauri`.
`Tauri` by default provides various templates for new projects like `vanilla.js`, `react`, `svelte.js`, `vue.js` and a lot more in the future. The `tauri` devs are also working on bringing `Tauri` to `Android` and `IOS`.

`Tauri` depends upon `Microsoft Edge Runtime2` and not bulky core apps like `Electron.JS` depends on `chromium`.

## Getting started with Tauri
> This is for windows only, get your OS instructions on tauri.studio

- Install `Microsoft Visual Studio C++ Build Tools` [From Here](https://visualstudio.microsoft.com/visual-cpp-build-tools/)
- Install [`Node.JS`](https://nodejs.org/en/)
- Install [`Rust`](https://www.rust-lang.org/)
- Finally, Install [`WebView2`](https://developer.microsoft.com/en-us/microsoft-edge/webview2/#download-section)

> This will make your ready for developing in tauri...

_For Further Understanding, Check Out The [Docs](https://tauri.studio/)_
As a Beginner, as a Freelancer
Tags: beginners, android, flutter
Published: 2022-01-16 03:19:33

Hi all,
It's me **Hashir** from Kerala,India. I am new on this platform and I am an Android developer as Freelancer. 

I am self taught learner, so I wish to post my updates here for better experience and develop my connection with who taught same like me.


Here we go folks....