teleren/devto huggingface dataset:
How to make a simple Android app that shows time and date?
Tags: beginners, android, javascript, tutorial
Published: 2022-12-25 16:02:59

Here is an example of how you could create a simple Android app that displays the current time and date:

First, install the Android Studio development environment and set it up on your computer.

Create a new project in Android Studio and choose "Empty Activity" as the template.

In the main activity layout file (activity_main.xml), add a TextView element to display the time and date.

In the MainActivity.java file, import the java.util.Calendar and java.text.SimpleDateFormat classes.

In the onCreate() method, get the current time and date using the Calendar and SimpleDateFormat classes, and set the text of the TextView element to the formatted time and date.

Run the app on an emulator or physical device to see the time and date displayed.

Here is an example of the code that you could use in the MainActivity.java file:

```
import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.TextView;

import java.util.Calendar;
import java.text.SimpleDateFormat;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Get the current time and date
        Calendar calendar = Calendar.getInstance();
        SimpleDateFormat dateFormat = new SimpleDateFormat("dd-MM-yyyy HH:mm:ss");
        String currentTime = dateFormat.format(calendar.getTime());

        // Set the text of the TextView element to the formatted time and date
        TextView textView = findViewById(R.id.textView);
        textView.setText(currentTime);
    }
}

```

This is just a basic example of how you could create an Android app that displays the current time and date. There are many other features and functionality that you could add to the app, depending on your needs and goals.

Thanks for reading! [Reach me if you want to develop apps](https://quokkalabs.com/android-app-development) quickly and in budget.
AFFINE the replacement of Notion and Miro with a better open-source-solution
Published: 2022-12-25 15:49:58

hi there 

i know miro and notion - and i need to have a tool that suits the best features of both worlds - but is Open-Source. 
I have heard from Affine right today  - 


https://medium.com/@affineworkos/affine-the-next-gen-knowledge-base-to-notion-and-miro-403f0afd9fba


```AFFiNE: The Next-Gen Knowledge Base to Notion and Miro
While Miro(visual collaboration platform) and Notion(note-taking tool) are silky smooth and powerful enough to use, they are not open source solutions.

So, what about the next-gen knowledge base that is more private, transparent, customizable, and available for Windows/MacOS/Linux？

That’s where AFFiNE sparkles!

Unlike Miro and Notion, which focus on whiteboard and page, AFFiNE defines its positioning as an all-in-one KnowledgeOS. It supports kanban, table, rich-text paragraphs as building blocks to form pages or whiteboards. It carries out integrated processing here in document editing, data processing, or brainstorming.
Build with Rust and Typescript, and run the entire project with one command line, AFFiNE gives all developers maximum imagination in the simplest way.```

Do you use Affine for your Note-Taking and for your collaboration tasks!?
API Testing Demo Site
Tags: beginners, api, restapi, tutorial
Published: 2022-12-25 15:00:00

## Introduction
While learning API testing we are always searching for API Testing Demo sites that try to mimic real-world scenarios. Over time, several people in the community have developed these APIs and provided good resources and documentation about each end-point usage.
In this article I will be listing out all the good resources which you can make use of, and if you find I have missed anything then please comment and I will update the list:

1. restful-booker: https://restful-booker.herokuapp.com/apidoc/index.html
2. ReqRes: https://reqres.in/
3. httpbin: http://httpbin.org/
4. {JSON} Placeholder: https://jsonplaceholder.typicode.com/
5. FakeRESTApi.Web V1: https://fakerestapi.azurewebsites.net/index.html
6. Swagger Petstore: https://petstore.swagger.io/
7. This site list many other Free API: https://apipheny.io/free-api/

## What Do You Think?
Did this work for you?
Could I have done something better?
Have I missed something?
Please share your thoughts and let me know if there are particular things that you would enjoy reading further.
Cheers!
How to make a JS function wait after executing a specific line of code
Tags: webdev, javascript, tutorial, programming
Published: 2022-12-25 14:48:49

## Basis Idea

> The basic idea is that we have a function and for some reason we need to make the JS program wait after executing some part of the function

## Application
Let's assume that we have a function to find the sum of two numbers and we need to make the program wait 3 second before printing the result

```js
function sumOfTwoNumbers() {
  const num1 = 100;
  const num2 = 22;
  const sum = num1 + num2;
  // Wait for 3sec before executing
  console.log("The sum is:", sum);
}
```

### Step-1

Create a new function sleep which returns a promise.
This function will make the program wait for the specified milliseconds
> Remember _1 second_ =  _1000 millisecond_

```js
function sleep(timeInMilliSecond) {
  return new Promise((resolve) => setTimeout(resolve, timeInMilliSecond));
}
```

### Step-2
Convert the function (In which we need to make the program wait) to a `Asynchronous function`, In our case `sumOfTwoNumbers()`

```js
// Put keyword async before function keyword to convert function to a asynchronous function
async function sumOfTwoNumbers() {
  const num1 = 100;
  const num2 = 22;
  const sum = num1 + num2;
  // Wait for 3sec before executing
  console.log("The sum is:", sum);
}
```

### Step-3
Make the program wait for specified amount of milliseconds
```js
async function sumOfTwoNumbers() {
  const num1 = 100;
  const num2 = 22;
  const sum = num1 + num2;
  // Add the below line to make the program wait for 3seconds
  await sleep(3000);
  console.log("The sum is:", sum);
```

## Result
Now the program will wait for 3 seconds before it prints the output
Exploring the World of APIs: Understanding REST, SOAP, and GraphQL
Tags: api, programming, beginners, application
Published: 2022-12-25 14:48:35

An application programming interface (API) is a set of rules and protocols that define how different software systems can communicate with each other. APIs allow different software systems to exchange data and functionality, making it possible for them to work together and build complex, integrated systems.

APIs can be used in a variety of contexts, including web development, mobile app development, and even within a single application. In web development, APIs are often used to allow different websites or web applications to communicate with each other or with external services. For example, a weather website might use an API provided by a weather service to access real-time weather data, or a social media application might use an API provided by a payment gateway to process transactions.

There are several benefits to using APIs in software development. Some of the main benefits include:

Reusability: APIs allow developers to reuse code and functionality from other systems, saving time and effort.

Interoperability: APIs make it possible for different software systems to communicate and work together, even if they were developed by different teams or organizations.

Modularity: APIs allow developers to break up a complex system into smaller, more manageable pieces, which can make it easier to develop and maintain.

Security: APIs can provide a secure and controlled way for different systems to communicate, helping to prevent unauthorized access or data leaks.

There are many different types of APIs, including web APIs, mobile APIs, and APIs for desktop applications. In this article, we'll focus on web APIs, which are APIs that are accessed over the internet using HTTP (Hypertext Transfer Protocol). Web APIs are a common way for different web applications to communicate with each other and with external services, and they can be implemented using a variety of technologies and frameworks, including REST (Representational State Transfer), SOAP (Simple Object Access Protocol), and GraphQL.

In the next section, we'll look at some of the key concepts and principles of REST APIs, which are a popular type of web API that is based on the HTTP protocol and the principles of REST.
connect MongoDB to Node.js
Tags: mongodb, mongoose, database, node
Published: 2022-12-25 14:26:06

Don't get too confuse while connecting MongoDB
to Node.js because people use different ways to connect it

1. after intalling dependencies and making .env file 
mention your connection link of mongodb and port in env file
this way will also work when you deploy your project. just remove the mongodb compass link to mongodb atlas link.because on onrender and heroku you have to mention in in enviroment variables separately and below pic will help you to solve your doubts

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vg6t5lg9n110dzcbvrax.png)
Add Virtual Background List ini Zoom SDK
Published: 2022-12-25 14:25:20

Open
https://developer.chrome.com/origintrials/#/trials/active

Generate token from "SharedArrayBuffers in non-isolated pages on Desktop platforms" list menu.

Add Meta tag in HTML
 ```html
<meta
      http-equiv="origin-trial"
      content="YOUR_TOKEN_HERE"
    />
```

First code we must have DOM with ID
```typescript
let meetingSDKElement: any = document.getElementById('meetingSDKElement');
client.join({
        sdkKey: zoom.sdkKey,
        signature: signature,
        meetingNumber: 1234,
        password: encrypted_password,
        userName: "test",
        userEmail: "test@gmail.com",
    });
```
After init and join, add code below for register list of virtual background image

```typescript
client.updateVirtualBackgroundList([
            {
                id: 'abc',
                url: '/images/abc.jpg',
                fileName: 'John Doe',
                displayName: 'John Doe',
            },
            {
                id: 'kp',
                url: '/images/vb/test.jpg',
                fileName: 'test.jpg',
                displayName: 'Test image',
            }
        ])
```

Next, Inside setting menu in host screen, find the virtual background menu and then change virtual background with image that registered before.
Flex Box
Published: 2022-12-25 14:24:11

Flex has few more property and the one is

> flex-wrap 
`.flexbx{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
`
When ever you reduce page size this will place item to next line

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fa4t53a0wdygtr7zxfqr.png)
This property is much useful when we reduce page size.
Flex Box
Published: 2022-12-25 14:14:29

Flex Box is one dimensional layout. Flex box deals with layout in one dimensional at a time either as row or as a column. 

`
.flxbox{
display:flex;
`
flex box has 4 main axis:

## 1. Row (default)
 
when we use `display:flex` out items set by default as row and the direction is left to right.

`{
flex-direction: row;
}
`

## 2. Row-revers:
It set out items in revers  order  like 

> 4 3 2 1 and it will show right to left.

`
{
flex-direction: row-reverse;
}
 `

## 3. Column 
It is out item in column(same as row but top to bottom)

`
 flex-direction: column;
`

## 4. column-reverse
set items bottom to top (in revers order)
`flex-direction: column-reverse;`
Setting up and configuring the TypeScript Compiler(simplified).
Tags: beginners, typescript
Published: 2022-12-25 13:59:02

Typescript is essentially JavaScript with type checking. Web browsers don't 'recognize' TypeScript and this makes it necessary that TypeScript code has to be compiled and translated into JavaScript, a process called _**Transpilation.**_

**<u>Setting up the typescript Compiler.</u>**
This is simply done by creating a configuration file for the TypeScript compiler.
On a terminal(in the same directory as the typescript project), type _tsc --init_ and voila, a file with the name tsconfig.json appears in your project folder.
<u>**Configuring the typescript Compiler.**</u>
The typeScript compiler has quite a number of lines of code, if so to speak. This may be a bit scary for a novice, like it was for my case but fear not! You do not necessarily need to know what each and everyone of them does, well at least not for now. If you are curious to know anyway,each of them has an explanation on the right as to what their functions are, preety handy if you ask me.
There are a few changes that you need to make on the tsconfig.json file so that your typescript code will be compiled efficiently:

1. in the /*Module*/ section, uncomment rootDir (ctrl + /) and include the path "./src". This means you have to create a folder named src as indicated in the path and then transfer your TypeScript file into this folder. 

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

2. In /*Emit*/ section, uncomment outDir (this specifies the directory that will contain the JavaScript file)and write the path as "/.dist" (distributable folder) and this will be where our JavaScript files are going to be stored after being compiled using the typescript Compiler.

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

3. Still in the /*Emit*/ section, uncomment "removeComments" which is just below outDir and this will make the TypeSript compiler remove all the comments added in the TypeScript code, making the JavaScript code generated shorter.

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

4. Still in the /*Emit*/ section, uncomment "noEmitOnError" and this makes the typescript compiler not generate any JavaScript code if there is any error in the TypeScript code. This is very helpful as your compiled code will almost always be 'clean code'.

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

These few tweaks will get you started in writing and compiling your TypeScript code. I hope it will be of help, happy coding!
GetStaticProps vs GetServerSideProps: Next JS Data Fetching
Tags: webdev, react, nextjs, beginners
Published: 2022-12-25 13:58:26

In Next.js, **getServerSideProps** and **getStaticProps** are two functions that you can use to fetch data and populate your pages with that data at build time or on the server. Both of these functions are useful for improving the performance and SEO of your Next.js application by pre-rendering the data on the server and sending the rendered HTML to the client.

However, there are some key differences between **getServerSideProps** and **getStaticProps** that you should be aware of:

## getServerSideProps

1. **getServerSideProps** is a function that you can use to fetch data on the server when a request is made to your Next.js application. This function is called on every request, which means that the data it returns will be fresh and up-to-date.

2. **getServerSideProps** is useful for building applications that require real-time data or need to handle sensitive data, such as user sessions or API keys.

3. **getServerSideProps** can be used in both server-rendered and statically generated pages.

4. **getServerSideProps** is not called during the build process, so any data it fetches will not be pre-rendered at build time. This means that your application will make an additional network request to fetch the data when the page is rendered on the client.

## getStaticProps

1. **getStaticProps** is a function that you can use to fetch data at build time and pre-render the data on your pages. This means that the data is fetched and the pages are rendered on the server, and the rendered HTML is sent to the client when the page is requested.

2. **getStaticProps** is useful for building applications that do not require real-time data or do not need to handle sensitive data.

3. **getStaticProps** can only be used in statically generated pages.

4. **getStaticProps** is called during the build process, so any data it fetches will be pre-rendered at build time. This means that your application will not need to make an additional network request to fetch the data when the page is rendered on the client.

In summary, **getServerSideProps** is useful for building applications that require real-time data or need to handle sensitive data, while **getStaticProps** is useful for building applications that do not require real-time data or do not need to handle sensitive data.
**getServerSideProps** is called on every request and can be used in both server-rendered and statically generated pages, while **getStaticProps** is called at build time and can only be used in statically generated pages.

I hope this helps! Let me know if you have any questions or need further clarification.
Design your web app's Interface Faster and in more easy way with Figma
Tags: webdev, interface, css, frontend
Published: 2022-12-25 13:53:27

[](https://www.figma.com/files/recent?fuid=1185955175470836261)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/69067tyvhzan71j27pw5.png)

you will find templates option as well as new design option to design your web application interface on this platform 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bjuh1giel4ql5ze3p4e1.png)
this is how its helps you
What is HTML headings with example?
Tags: html, css, javascript, headings
Published: 2022-12-25 13:29:43

HTML headings are used to indicate the importance and structure of content on a web page. There are six levels of headings, with h1 being the most important and h6 being the least important.

Here is an example of how to use headings in HTML:

```
<h1>This is a level 1 heading</h1>
<h2>This is a level 2 heading</h2>
<h3>This is a level 3 heading</h3>
<h4>This is a level 4 heading</h4>
<h5>This is a level 5 heading</h5>
<h6>This is a level 6 heading</h6>
```
The headings will be displayed in the browser with the corresponding level of importance, with level 1 headings being the largest and level 6 headings being the smallest.

Here is how the headings would be displayed in the browser:

```
This is a level 1 heading
This is a level 2 heading
This is a level 3 heading
This is a level 4 heading
This is a level 5 heading
This is a level 6 heading
```

It's important to use headings appropriately in your HTML documents to create a clear hierarchy and structure for your content. This makes it easier for both users and search engines to understand the content on your page.
Front-end Web Projects For Your Resume
Tags: discuss, webdev
Published: 2022-12-25 13:16:50

This blog is community-driven, so we welcome any suggestions for projects to create for the front-end web in the comments section. Please submit your ideas, and we will be happy to add them.

Projects:

- **Flying Doze website**: You must create a website that will mainly show a list of the company's products. The goal is to provide a great user experience. Besides the landing page, the website will need a contact page, shop page and a blog. The landing page should have a Contact Us section. There should be a call to action to get users to order a free sample. They would prefer a colorful design, and would like you to use the brand color, which is red. Take into account the client's preferences and values.

- **Stardust website**: You must create a website that will mainly provide customer support for the company. The goal is to emphasize the brand's values. Besides the landing page, the website will need a contact page, shop page and a privacy policy page. The landing page should have a About the Team section. There should be a call to action to get users to follow the company's social media. They would prefer a minimal design, and would like you to use the brand color, which is black. Take into account the client's preferences and values.

- **Boomerang International website**: You must create a website that will mainly provide customer support for the company. The goal is to emphasize the brand's values. Besides the landing page, the website will need a contact page, product pages and a blog. The landing page should have a About the Team section. There should be a call to action to get users to order a free sample. They would prefer a colorful design, and would like you to use the brand color, which is orange. Take into account the client's preferences 

- ** Dew**: You must create a website that will mainly provide information. The goal is to make it clear what the company does. Besides the landing page, the website will need a information page, shop page and a terms of service page. The landing page should have a About the Team section. There should be a call to action to get users to order a free sample. They would prefer a luxurious design, and would like you to use the brand color, which is purple. Take into account the client's preferences and values.

- **Chase**: You must create a website that will mainly show a list of the company's products. The goal is to make the website easy to navigate. Besides the landing page, the website will need a information page, shop page and a terms of service page. The landing page should have a About the Team section. There should be a call to action to get users to order a free sample. They would prefer a colorful design, and would like you to use the brand color, which is red. Take into account the client's preferences and values.
Angular 15 with Firebase CRUD Operations and Angular 15 Reactive Forms
Published: 2022-12-25 12:57:36

Angular 13 Firebase CRUD example, In this tutorial you will learn how to create CRUD Operations using Angular and Firebase real-time NoSQL cloud database. We will be using the Angular Reactive Forms service for managing the user-submitted data in our web application.

For the demo purpose, will be creating a basic student record management system in which a school admin can perform Create, Read, Update and Delete operations respectively.

Angular 15 Firebase CRUD Application

- Install the Angular 15 App
- Firebase Account Set up
- Create Firebase CRUD Operations
- Generate Angular 15 Components
- Add Routing for Navigation
- Show Alert Messages with NGX Toaster
- Add Data in Firebase Storage
- Create Paginations
- Fetch List Items and Delete
- Create Edit

For more details please follow link 
[Angular application form with firebase CRUD](https://amlogy.com/angular-15-with-firebase-crud-operations-and-angular-15-reactive-forms/)