teleren/devto huggingface dataset:
Difference between Activity and Fragment
Tags: tutorial, android, java, beginners
Published: 2022-01-18 06:46:06

## Intro 
Before we get into differences between activity and fragment let's see what is activity and what is a fragment. The short answer both of them are simple screens to place elements in them. If you are a web developer consider activity and fragment as document and div.

## Let's dive into the difference

- Activity is an application component that gives a user interface where the user can interact with your application, whereas fragment is part of your activity embedded into it and has its UI with its elements.
- App has to have activity but it's not the case with the fragment and it can have any number of fragments.
- Fragment appears in a part of activity hence it is dependent on activity.
- Fragments help us to create multi-pane UI. (e.g we have three screens `tabs` on the main screen `Chat`, `Calls`, `Status` its a good example of 3 fragments on activity)
- Fragments also helps us to create different UI in the different orientation of screen `horizontal` or `verticle` (e.g g-mail app in tablet devices `verticle` shows a list of emails `horizontal` shown list with and opened email) this is possible with the help of fragments
- Lifecycle methods are hosted by OS. Activity has its own lifecycle but fragments are hosted by hosting activity.
- Every activity should be mentioned in the manifest file but it's not the case with fragments
- Activity is heavyweight and fragment is lite weight.



## Lifecycle of Activity

![activity_lifecycle.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1641915158555/Tfrf-hHmA.png)

## Lifecycle of Fragment


![fragment-view-lifecycle.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1641915257784/Myz-_z1NS.png)

By now you should have a good idea about activity and fragment and what is the difference between those two. if you have any doubt drop a comment or contact me on my social media. I'm trying my best to share my knowledge and make android learning easy and fun. If you find it useful please drop like follow me to get the next article updates and share this article as much as you can.
New Years Resolution - Dev Log 9
Tags: webdev, beginners, programming, computerscience
Published: 2022-01-18 06:23:19

Personal notes: Super excited about being finished with the bulk of the UI. Now I need to make the YouTube Video and polish up what I have done a little. I still want to add in tooltips and a few minor changes that I believe will make the user experience a little better. I am thinking that I should optimize for SEO, or at least start the process while I am still completely front-end mined.

Idea 1 - Job Board: Basically done the UI! For real this time. I finished up the preview section of the job post screen and now you can easily see how your post will look before you post it. Excited to finally get to start working on the back end. I have not learned about Redis yet, but the technology seems cool and it will be nice to learn something new while building this site. I have been tossing around how to market this site once it is published and has got a lot of good ideas from people online.

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.
Remix and SEO: A Brief Guide
Tags: remix, webdev, react, beginners
Published: 2022-01-18 06:16:54

Search Engine Optimization is a feature lacking in a lot of today's frameworks, because pages are handled by the client in a lot of cases, search engines ususally don't have the means to access a page's data beforehand. This is something Remix takes care of easily.

## <u>How:</u>

Remix makes use of a special tag `<Meta />` that is stored in the root of your project (if you want SEO available, that is) and it is used *once*. 
```js
import { Meta, Outlet } from "remix";

export default function App() {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <Meta />
      </head>
      <body>
        <Outlet />
      </body>
    </html>
  );
}
```

It accesses all meta information of your route by getting an exported "meta" function: 
```js
// A random route in your app

export function meta: MetaFunction () {
  return {
    title: "Something cool",
    description:
      "This becomes the nice preview on search results."
  };
}
```

The `meta` export would set the meta information of your route in a search browser.
And how does Remix handle the meta tags of several nested routes? Well, it accomplishes it by merging the tag information together hence removing the need to duplicate info in both parent and child route. 

There are also some special cases, as using a meta key of `title` returns a `<title>` tag (*sweet*).

---

That's the end of this *very* short article. I'm actually planning something worthwhile and I hope to release it to you guys soon. If you have any topic you would like a write-up on, tell me in the comments below. Like always, I wish you a happy learning and awesome reading 👋.
How I Practiced CSS Flexbox
Tags: webdev, beginners, css, tutorial
Published: 2022-01-18 06:02:34

I used [dribble.com](http://dribble.com) and Pinterest.

I searched for one page Website UIs and turned them into HTML and CSS templates.

Here's how it works

1. After finding the UI i already have few things such as, Color combinations, and overall Layouts


2. After that i find a similar font from Google fonts to match the one same in UI design

3. For images i use Unsplash, pixels is a good Alternative

4. After gathering everything into 1 folder i try to code the ui as same as possible

> Every ui on internet can be remade or is made using flexbox or grid. For starters you can learn flexbox and then go to grid as that makes things easier

To learn anything you'll need to practice it more and more. I've used flexbox enough that i have confidence using it to make UIs and you can do it too

**If you found the content i share useful than share it with your developer friends and also follow me on [Instagram](https://www.instagram.com/gaurav_vaala/) and [Twitter](https://twitter.com/gaurav_vaala)**
How Pass By Value and Pass By Reference works?
Tags: javascript, webdev, programming, computerscience
Published: 2022-01-18 05:46:26

Javascript uses _Pass By Value_ for [primitive data types](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) and _Pass By Reference_ for objects.

This is one of the very important concept in JavaScript. So, let us understand it with some examples.

## Pass By Value

In pass by value, the function is called by directly passing the value of the variable as argument and changing the argument inside the function does not affect the value of variable passed from outside the function.

```javascript
function PassByValue(numOne, numTwo) { 
    console.log("Inside PassByValue Function"); 
    numOne = 300; 
    numTwo = 600; 
    console.log("numOne =" + numOne +" numTwo =" +numTwo); 
  } 
  let numOne = 12; 
  let numTwo = 23; 
  console.log("Before PassByValue Function"); 
  console.log("numOne =" + numOne +" numTwo =" +numTwo); 
  PassByValue(numOne, numTwo) 
  console.log("After PassByValue Function"); 
  console.log("numOne =" + numOne +" numTwo =" +numTwo); 
  
```
**Output:**

```
Before PassByValue Function
numOne =12 numTwo =23
Inside PassByValue Function
numOne =300 numTwo =600
After PassByValue Function
numOne =12 numTwo =23
```

In the above example we can see that the value of **numOne** and **numTwo** remains same after the function is called.

## Pass By Reference

In Pass By Reference, Functions are called directly by passing the reference/address of the variable as argument. Changing the argument inside the function affect the value of the variable passed from outside the function.  

```javascript
function PassByReference(Obj) { 
    console.log("Obj,Inside PassByReference Function"); 
    Obj.num=44
    console.log(Obj); 
  } 
  let Obj ={num:12}; 
  console.log("Obj,Before PassByReference Function"); 
  console.log(Obj); 
  PassByReference(Obj) 
  console.log("Obj,After PassByReference Function"); 
  console.log(Obj); 
```

**Output:**
```
Obj,Before PassByReference Function
{ num: 12 }
Obj,Inside PassByReference Function
{ num: 44 }
Obj,After PassByReference Function
{ num: 44 }
```

In the above example we can see that the value of **Obj** changed after the function is called.

In summary, JavaScript primitive data types are passed by value, while non-primitive data types (objects and arrays) are passed by reference.

## Wrap Up!!
I hope you enjoyed this article. Thank you for reading. Please share it with your network.
Files V2 The New File Manager For Windows
Tags: design, opensource, github
Published: 2022-01-18 05:41:44

today we are gonna talk about a really good software called files which is for windows 10 and 11

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

## Tabs 

Files has a tab system which is just the same in a software called 
qt tab bar which is for the original file explorer but this is a little bit better and i loved the interface

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

## properties panel

the properties panel is even better than the original file explorer and with more cool stuff ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b4ea882lik0z4w3vbc53.jpg)
  
if you are a windows 11 user or you want to use windows 11 but can't 

## this software is for you !!
learn usage about Hashcode and equals in JAVA
Tags: java, beginners, programming, tutorial
Published: 2022-01-18 05:37:51

## hashCode in Java is a function that returns the hashcode value of an object on calling.

```
import java.util.*;
public class HashCodes {
String name;
int id;

    public HashCodes(String name, int id) {
        this.name = name;
        this.id = id;
    }

   
    public static void main(String[] args) {
        HashCodes h=new HashCodes("ali",101);
        HashCodes h1=new HashCodes("al",101);
      Set s=new HashSet();
      s.add(h);
      s.add(h1);
        System.out.println(s);
    }

    @Override
    public String toString() {
        return "HashCodes{" + "name=" + name + ", id=" + id + '}';
    }

    @Override
    public int hashCode() {
        int hash = 7;
     //   hash = 83 * hash + Objects.hashCode(this.name);
        hash = 83 * hash + this.id;
        return hash;
    }

    @Override
    public boolean equals(Object obj) {
        if (this == obj) {
            return true;
        }
        if (obj == null) {
            return false;
        }
        if (getClass() != obj.getClass()) {
            return false;
        }
        final HashCodes other = (HashCodes) obj;
        if (this.id != other.id) {
            return false;
        }
        return true;
    }

}

```
Auto Generate [Fake Usernames With Elixir]
Tags: elixir, programming, tutorial, functional
Published: 2022-01-18 05:21:48

&nbsp;
&nbsp;

{% youtube iOa-xszNJms %}

&nbsp;
&nbsp;

Let's use a custom Elixir function combined with the Faker Elixir library to generate automatic fake usernames data.

### Step 1:
This is for learning purposes only so let's create a new simple Elixir project by going to the command line and typing the following in your desired directory:

`$ mix new fake_username && cd fake_username`

### Step 2:
Go to the website https://hex.pm and search for the faker library to grab the latest version, so you can copy that to your mix config file, at the time of the making of this tutorial the latest version is 0.17.0, add the following to your project dependencies inside your `mix.exs` file:

`{:faker, "~> 0.17.0"}`


Then in the command line type in `$ mix deps.get` to fetch your new dependency.

### Step 3:
Open your test file `test/fake_username_test.exs`, remove the autogenerated test and add the following test:

```elixir
  test "generates a username" do
    name = "  My Long Random Username  "
    assert FakeUsername.get(name) == "mylongrandomusername"
  end
```

Go to your command line and run the test by typing `mix test` the test should fail of course because we haven't created the function `get()` in our module.

### Step 4:
Open your main project file `lib/fake_username.ex`, remove the autogenerated hello world function and add the following function:

```elixir
  def get(name) do
    name
    |> String.downcase()
    |> String.split()
    |> Enum.join()
  end
```

Go to the command line and run the test again `mix test` now it should pass with no failures.

### Code Breakdown

String.downcase() will make all letters lowercase.

String.split() it will return a list of all words after every whitespace, ignoring trailing and leading whitespace.

Enum.join() will join all the words in our previously created list with String.split() and return a single string.

### Manual Testing

To test it out manually go to the command line and type in `iex -S mix`.

`iex> FakeUsername.get(Faker.Person.name())`


## Conclusion

That's all folks, now every time that we call our function FakeUsername.get() passing in a random name with Faker.Person.name() function from the Faker library we get a string back with no whitespace that can be used as a username, we could get fancy and add random numbers and symbols to our returned string in our custom function.

&nbsp;
&nbsp;


[![Join The Elixir Army](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cv2q172ztuekdtw82vo9.png)](https://elixirprogrammer.com)
How to change Address bar URL without refreshing the page using JavaScript
Tags: javascript, sh20raj, toprevealed, tips
Published: 2022-01-18 05:21:42

Main Article :- https://codexdindia.blogspot.com/2020/12/how-to-change-adress-bar-url-without.html

Documentation Video :- https://www.youtube.com/watch?v=nTiRTyh6ayg

---

```javascript
window.history.pushState('new' , 'title' , 'new.html')
```

Uses :- 
    1. Use setTimeout's ....
    2. Use in Button onclick

Let's use it in a function...

```javascript
 function change(url) { 
   window.history.pushState('new' , 'title' , url) ;
  }
```

See Demo Here :- https://codexdindia.blogspot.com/2020/12/how-to-change-adress-bar-url-without.html


> Checkout Instagram :-
> {% instagram CYKELXKPJ_r %}
Boost the Internet Speed with Tplinkrepeater
Tags: tplinkrepeater, tplink
Published: 2022-01-18 05:18:44

Enjoy a very good range of internet in your home with the tplink repeater. What is the use of a slow internet when you can derive a better internet experience when watching your HD movies? **[https://www.tplinkextender-net.net/](http://tplinkrepeater.net)** is the gateway to setting up your tplink repeater hassle-free. 
[www.tplinkrepeater.net](https://www.tplinkrepeaternet.us/)
[tp link extender login](https://tp-linkrepeatr.net/).
Forcing webpack to recompile your files
Tags: webpack, javascript, webdev, react
Published: 2022-01-18 04:09:56

Just today I started noticing that when my react code rebuilds, I get eslint errors in the console, but not in my IDE.

Even stranger was the fact that when I run `eslint` by itself in the commandline, it doesn't show that anything was wrong:

```
eslint --cache --format stylish --ext '.js,.jsx,.ts,.tsx' --quiet ./
```

What gives?

![Come On Reaction GIF](https://media.giphy.com/media/pPhyAv5t9V8djyRFJH/giphy.gif)

### The solution

`touch` command to the rescue. In order to force webpack to recompile the files, they had to be _changed_ somehow, and I wasn't prepared to manually change each file by hand, recompile, and revert the change, just to wait for another recompilation.

I simply used the `touch` command on Linux to "touch" all the files which were having that problem, like so:

```
touch src/pages/**/*.{js,jsx,tsx,ts}
```
_shell is zsh_

After running this command, webpack was forced to recompile everything and I no longer saw those pesky errors again.
Develope a twitter clone with ReactJS
Tags: javascript, webdev, react, node
Published: 2022-01-18 05:03:14

I have developed a small social network web app for educational purpose and want to share this with the community. This app is built with ReactJS for frontend, Java Spring Boot for backend and MongoDB as the database.

The app tries to mimic a few functions of Twitter, including:

- Create post with text and image
- The number of characters in each post is limited to 200 characters
- Like, comment and re-post a post
- View the number of likes, comments and shares of a post
- Comments are toggle
- The number of character in each comment is limited to 100 characters
- Follow, un-follow someone
- See who are following us and follow them back
- Check who we are following
- View all posts of an individual
- View our own posts
- List all user accounts in the entire social network (due to the number of users are still small, I did not develop search user function)

Other functions:

- Due to limited storage space, client app compresses the uploaded image to the maximum of 250px (width or height) User avatar is created by hashing user id and convert that hash code into a hexagonal image
- Authentication and authorization use JWT
- Responsive frontend for desktop and mobile devices

Technical stack:

- Frontend: ReactJS, Redux Toolkit, React Router, React Bootstrap
- Backend: Java Spring Boot
- Database: MongoDB

Hope you enjoy it and give me a ⭐ Github star ⭐ for my effort!

**Live Demo and Source Code:**

https://github.com/linhtch90/psn-social-network-public-source
A New Kernel
Tags: rust, kernel, programming, linux
Published: 2022-01-18 04:53:35

Many problems exist in operating systems today. Although they do the job for the most part, their oldness and brittleness are starting to show from the bugs, security problems and stuff that plague new OS releases.

We are building new OSes directly on top of old ideas, APIs and standards. Then we duct tape everything together and pray it doesnt fall apart. Look at linux's network stack for example. Or Windows' UI differences across different windows versions that are still being used.

What about all the concept of a monolithic kernel having as much as it wants. Drivers make up more than 50% of the code of the linux kernel. We want to support as many things as possible so we put everything into the kernel rather than let the apps and hardware optimise and fix themselves.

So maybe a way to fix up all the weird and random glitches I get when I use linux, or the random freezes, crashes and resets on windows, or the lack of software and driver support on Freebsd, is to provide a simpler framework for kernel building. We instead focus less on what to put into the kernel, and more on what should not be in the kernel.

We provide a minimal layer for apps to optimise themselves. For apps to access hardware without all the context switching and driver abstraction nonsense and instead have IOMMU and SR IOV. We focus more on hardware security rather than a bunch of bandaid software solutions esp the bloat preinstalled software that comes with an OS. Or the complex of security layers and stuff within the kernel.
Flutter listview crashes in Column widget
Tags: flutter
Published: 2022-01-18 03:41:07

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

## Listview and Column Widget

Sometimes you may want to combine UI vertically along the screen, that’s were we need a Column Widget.

When I tried to place a search box, a customized Text widget, and ListView widget, Flutter shower with errors.

`Column(
         children: [
           SearchBox(hintText: 'Search', controller: textController),
           ListView.builder(
               // the number of items in the list
               itemCount: adList.length,`

This happens because in the column widget Listview didn’t fit. To make it adjustable for the column wrap the ListView with Expanded widget, in case of Vertical listview.

The expanded widget can have single child widget.

`Column(
          children: [
            SearchBox(hintText: 'Search', controller: textController),
            Expanded(
              child: ListView.builder(`

and it should solve the issue.

Following Flutter posts deserve a good read

[Flutter Desktop Support - OpenSuse](https://devmnj.wordpress.com/2020/12/23/how-to-add-web-desktop-support-for-existing-flutter-app-in-opensuse/)
 [Flutter support for Windows](https://devmnj.wordpress.com/2020/11/24/enable-flutter-web-support-on-windows/)
Is unit testing really worth it for developing small applications?
Tags: webdev, testing, programming, productivity
Published: 2022-01-18 04:31:03

Absolutely! Unit tests are an integral part of the coding process.

Prior to writing the next piece of code, you can make sure the code you wrote is working.

There will always be bugs. It doesn't matter how small your application is.

Unit tests are the key to eliminating bugs and making sure your code works.

No matter what size it is, every application goes through several changes over the course of its lifetime.

This method ensures that those changes won't break existing functions.

It is definitely a good idea to write functions that can be easily tested with a unit-test. As an alternative, you'll need to manually test it. Writing a unit-test actually speeds up the debugging process.

Consider whether it is worth the time to write a unit-test for a function that requires significant effort, such as UI stuff.


Furthermore,since they are smaller and they have fewer dependencies, therefore less complexity, they would probably be easier to test.

Thus, I emphasize, it is worth the effort. On any account.
First week of uncomfortable
Tags: productivity
Published: 2022-01-18 04:03:07

I recently started Masters education at NC State University.

In the first week here I enrolled in Architecture of Parallel Computers. In the 2nd lecture I felt lost, couldn't understand anything and failed to answer 3 of 4 questions asked via Google Forms to the whole class. I aced the 3rd question and it was marked good by the Professor, but, I failed the other 3.

After the class, I felt stressed out and questioned my life decisions, did I make a mistake of returning to Academia? will I have to abandon my studies and return home? will I be a capable person? will I fail studies just because I am using decade old Macbook Pro 2012 with a Hard Disk Drive in 2022?

These feelings reverberated for 2 days, and I communicated with my friends what I felt.

Then, I involved myself in the first assignment for the same course. I started setting up the environment, trying to heck and peck into what is there, read the assignment, questions, etc. 8 hours down and I was able to solve it on my own.

It resulted in a drastic change of my emotional state. 
I began to feel energetic, forward-looking, enthusiastic.
24 hours ago I was feeling depressed, failed, handicapped.

Putting in efforts has been sexy, and I feel in control of my life. :D