teleren/devto huggingface dataset:
Flutter ListView and Features
Tags: flutter
Published: 2021-11-03 06:57:30

Hello, in this lesson we will cover Flutter `ListView` and Features, `Listview` comparison on Android. When creating `ListView` in Android, especially when creating lists with images, we needed extra model class, but when creating `ListView` in Flutter we don't need any model class. For this, it is quite simple to create a listview in flutter.

First, let's examine a simple `ListView` structure consisting of only texts and make an example. 

### So what is the structure we call ListView?

We can think of `ListView` as lists with multiple elements. This list can be composed of only articles, or it can be created with mixed data. `ListView` takes children because it consists of multiple widgets.

```dart
ListView(
  children: const [
    ListTile(
      title: Text("Baransel.dev"),
    ),
    ListTile(
      title: Text("Flutter"),
    ),
    ListTile(
      title: Text("Courses"),
    ),
  ],
)
```

We created each element inside the `ListView` widget, which we saw above, by adding the `ListTile` widget. Here, just using the title property as text, we get the following output.

<img alt="Listview Example for Flutter" src="https://baransel.dev/post/flutter-listview-features/flutter-listview.png" style="height:75%;width:75%;"/>

Of course, `ListTile`, which is one of the most used widgets in `ListView`, has other features.

<img alt="ListTile properties for Flutter" src="https://baransel.dev/post/flutter-listview-features/flutter-ListTile-properties.png" style="height:75%;width:75%;"/>

Just like we add a title, we can explain it by adding a subtitle with `subtitle`.

```dart
ListTile(
  title: Text("Baransel.dev"),
  subtitle: Text("https://baransel.dev"),
),
```

<img alt="ListTile subtitle" src="https://baransel.dev/post/flutter-listview-features/flutter-subtitle-ListTile.png" style="height:75%;width:75%;"/>

If we want, we can customize it further and place icons at the beginning or end of our articles.

```dart
ListView(
          children: const [
            ListTile(
              title: Text("Baransel.dev"),
              subtitle: Text("https://baransel.dev"),
              leading:
                  Icon(Icons.arrow_forward_ios_rounded), //icon in the beginning
            ),
            ListTile(
              title: Text("Flutter"),
              subtitle: Text("https://baransel.dev"),
              trailing: Icon(Icons.auto_awesome), //icon in the end
            ),
            ListTile(
              title: Text("Courses"),
              subtitle: Text("https://baransel.dev"),
              trailing: Icon(Icons.audiotrack), //icon in the end
            ),
          ],
        ),
```

<img alt="ListTile Icon" src="https://baransel.dev/post/flutter-listview-features/flutter-ListTile-icon.png" style="height:75%;width:75%;"/>

Follow my blog for more [baransel.dev](https://baransel.dev/).
Weekly web development resources #94
Tags: weekly, webdev
Published: 2021-11-03 06:50:20



______

##[LT Browser](https://www.lambdatest.com/lt-browser)
[![LT Browser](https://wweb.dev/weekly/content/94/lt-browser.jpg)](https://www.lambdatest.com/lt-browser)
A browser build to build, test & debug mobile websites..

______

##[Image Component](https://web.dev/image-component/)
[![Image Component](https://wweb.dev/weekly/content/94/img-component.jpg)](https://web.dev/image-component/)
A nice article on building an effective  image component for best practices and optimized images.

______

##[Life of Discipline](https://www.lifeofdiscipline.com/)
[![Life of Discipline](https://wweb.dev/weekly/content/94/life-of-discipline.jpg)](https://www.lifeofdiscipline.com/)
A habit tracking tool with a GitHub-like view.

______

##[iconsax](https://iconsax.io/)
[![iconsax](https://wweb.dev/weekly/content/94/iconsax.jpg)](https://iconsax.io/)
A website with the the official icons of the Vuesax framework 

______

##[nice-waves](https://github.com/gVguy/nice-waves)
[![nice-waves](https://wweb.dev/weekly/content/94/waves.jpg)](https://github.com/gVguy/nice-waves)
A Vanilla JS library for creating animated waves.

______

##[Blobity](https://blobity.dev)
[![Blobity](https://wweb.dev/weekly/content/94/blobity.jpg)](https://blobity.dev)
A library to customize the look and behaviour of the cursor.

______

##[100 Best Free Fonts for Designers in 2021](https://www.awwwards.com/best-free-fonts.html)
[![100 Best Free Fonts for Designers in 2021](https://wweb.dev/weekly/content/94/free-fonts.jpg)](https://www.awwwards.com/best-free-fonts.html)
A nice list by the people of awwwards.

______

##[npkill](https://npkill.js.org/)
[![npkill](https://wweb.dev/weekly/content/94/npkill.jpg)](https://npkill.js.org/)
A CLI to easily find and remove old and heavy node_modules folders.

______

##[The New CSS Reset](https://elad2412.github.io/the-new-css-reset/)
[![The New CSS Reset](https://wweb.dev/weekly/content/94/css-reset.jpg)](https://elad2412.github.io/the-new-css-reset/)
A simple and light CSS reset using the new CSS features.

______

##[MangoDB](https://getmango.jimdofree.com/)
[![MangoDB](https://wweb.dev/weekly/content/94/mangodb.jpg)](https://getmango.jimdofree.com/)
A truly Open Source MongoDB alternative.

______

To see all the weeklies check: [wweb.dev/weekly](https://wweb.dev/weekly)
Using setTimeOut() in JavaScript
Tags: javascript
Published: 2021-11-03 06:31:16

Sometimes in your code delaying a function's actions can be really useful which is what I'm going to be talking about today!

Imagine the following piece of code: 
```
console.log("Hey, ")
console.log("you?")
console.log("how ")
console.log("are ")
```
This would return us "Hey, you?how are ". Which doesn't really make any sense. (Obviously, the simplest/quickest fix would be to just reorganize our console.log or even combine it into one line but try to keep an open mind). A JavaScript function called "setTimeOut()" allows us to delay a function's actions after a specified number of milliseconds. setTimeOut() usually takes in a callback function or an anonymous function as one of its parameters and a number as it's other parameter.
For example:
```
setTimeOut(() => {console.log("delayed message")}, 500)
```
This would delay our "delayed message" by 500 milliseconds.

So, going back to our initial piece of code that we had used as our example. We can now use setTimeOut() on our console.log("you?") to make sure it gets delayed until after the other two messages have already been logged to our console:
```
console.log("Hey, ")
setTimeOut(() => {console.log("you?")}, 500)
console.log("how ")
console.log("are ")
```
Now this should return us "Hey, how are you?".

This was just a simple example of how you can utilize the setTimeOut() function in JavaScript. One thing that I've used it for is delaying a function call until I have fetched all the data from a public api that I was then using in said function. There are many other ways that you can implement this function into your code (if needed) to help you out if you're struggling with anything rendering/executing/etc. before you actually want it to.

One note to make though: figuring out the exact amount of milliseconds you want something to be delayed by can be quite difficult which is a downside of this. In the example I used above, realistically our computer doesn't need 500ms to log the other three messages to our console, but to a human, this isn't very noticeable.

Hope you guys enjoyed my little post about setTimeOut() and hopefully this will be useful to you someday :) !
What is prototype in simple words? (Javascipt)
Tags: javascript, react, programming, computerscience
Published: 2021-11-03 06:11:44

Each object has private property which holds a link to another object is called its prototype.

Suppose we have an array fruits
___let___ __fruits__=["Apple", "Orange"];

Now we can use some methods such as concat(),index0f(),join() etc to the fruits array to obtain certain results. But from where these methods came?. They came through prototype of array. i.e:fruits hold a link to array object. You can view it in console by typing __Array__.__prototype__ in console.

To know how they link with each other you can check by using _____proto_____ in console which is a getter function that exposes prototype of an object. i.e __fruits__. _____proto_____

You will see that __fruits__._____proto_____ values are equivalent to __Array__.__prototype__.
![Cosole log showing how fruits.__proto__ and Array.prototype are equivalent](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0gu006nmlq3x9wbulmcl.PNG)
References:[Prototype](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)
Online doctor Appointments in Hyderabad 
Tags: onlinedoctorappointments
Published: 2021-11-03 06:10:32

Tele-Medicine services at MedXperts can provide you with personalised solutions to your health problems. In this section, we provide a flat form to book a direct doctor consultation with a doctor of your choice, or you can seek advice from medical experts by dialling a toll-free number. Our medical experts will advise you on which specialist you should consult based on your health issues and will assist you in scheduling a hassle-free instant appointment.
Hello World In REACT NATIVE
Tags: reactnative, react, opensource, android
Published: 2021-11-03 05:56:04

# Steps To Create App in React Native
1. Setup environment for react native.

2. Open Terminal/command prompt in the folder you want to create app in .

3. Enter ```npx react-native init app_name```![2021-11-02.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1635867230207/rH_ko5pmt.png)

4. Once the app is created , Open app folder in your ide or editor (I'm using VS code).
![2021-11-02 (3).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1635867402936/RTHPymHid.png)

5. Open App.js, there will be default code template given try running it by opening Terminal/command prompt in App Folder respectively.<br>
To run the app write ``` npx react-native run-android```![2021-11-02 (2).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1635867683035/H68LafNAa.png)<br>

6. Once the App runs replace all the code in App.js with 
```
import React, {Component} from 'react';  
import {Platform, StyleSheet, Text, View} from 'react-native';  
  

export default class App extends Component {  
  render() {  
    return (  
      <View>  
        <Text>Hello World</Text>  
      </View>  
    );  
  }  
}  
``` 
And refresh the code by pressing "R" in node terminal , don't forget to save before refreshing.

![2021-11-02 (5).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1635867902197/_SzuCWHzv.png)

## THATS IT FOR Hello World :)
Try Tinkering with the code to understand better.
Adding Annotations to Blazor Charts
Tags: blazor, webdev, dotnet, csharp
Published: 2021-11-03 05:35:05

Learn how easily you can add annotations to [Syncfusion Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts).

 In this video, you will learn how to add image annotations to Blazor charts. You will also see how to position images using the coordinateUnits property with pixel or point values. 

Explore our tutorial videos: https://bit.ly/3pN93bk 

Download this example from GitHub: https://bit.ly/3plFi0I

Get a free license: https://bit.ly/3jOTvQt

{% youtube TpUoXrYlCkU %}
Conditional Logic
Tags: beginners, programming, codenewbie, java
Published: 2021-11-03 03:58:15

> Computer science concepts in my words.  

## If this, then that 
Evaluating data based on a defined reason either allows the information to undergo additional computation or bypasses that circumstance until a certain condition is met or else. Pun intended. 

```java 
if (condition) {
    run code 
}
```  
```java 
if (condition) {
    run code
} else {
    run code
}
```  
### Checks 
Maintaining sanity in a chain of commands starts with prioritizing the most important first. The data can be cascaded from one block to another until nothing checks true.    

```java 
if (condition) {
    run code
} else if (other condition) {
    run code
} else if (other condition 2) {
    run code
} else {
   run code
}
```  

## Statements 
The conditions that are checked are evaluated based on the expressions stated. An oversimplification would be a simple yes or no. Meaning true or false. Yes you can pass or no do not pass.

```java 
boolean lessThan = a < b; 
boolean lessThanOrEqual = a <= b;

boolean greaterThan = a > b;
boolean greaterThanOrEqual = a >= b;

boolean equal = a == b;
boolean notEqual = a != b;
```  

### More Complex 
In addition to a daisy chain of if/else blocks. The conditions being evaluated can be intrinsically linked together and complicated. 

```java
int ohThis = 7; 
int that = 13; 

boolean and = (ohThis == 7 && that == 13); 
boolean or = (ohThis == 7 || that == 13); 

boolean isTrueAndTrue = (ohThis >= 10 && ohThis <= 15) && (that >= 10 && that <= 15);
boolean isTrueOrFalse = (ohThis >= 10 && ohThis <= 15) || (that >= 10 && that <= 15);
```
Depp - Basic Usage and Features
Tags: typescript, monorepos, opensource, webdev
Published: 2021-11-03 04:54:23

---
title: Depp - Basic Usage and Features
published: true
description: Fast unused and duplicate dependency checker for node modules
tags: typescript, monorepos, opensource, webdev
canonical_url: https://cryogenicplanet.tech/posts/depp
cover_image: https://user-images.githubusercontent.com/10355479/139758905-7f911615-84d0-46c6-805a-06f8eafaf633.png
series: Depp - A fast unused and duplicate dependency checker
---

Recently we ran into a couple of bugs on our main fairly large monorepo which were caused my the same package existing twice but having different versions. This made me search for some dependency checking tools, and while there are existing ones none of them really had good monorepo support.

So I decided to make one, this is a brief about how I made it and also how to use it.

If you want to just try the tool without hearing ramble about it, feel free to checkout the repo

{% github cryogenicplanet/depp no-readme %}

## Basic Usage and Features

## Install

```bash
npm install -g depp-installer
depp --help  # Will should all avaliable options
```

## Usage

### Default Config

```bash
depp
```

Will check **only** **typescript** (`.ts, .tsx`) files in your root folder and all its children. It will also read the packages from then root `package.json` but also any `package.json` inside child folder (It supports mono repositories by default)

It will show unused packages, unused `@type` packages and duplicate packages with different versions

It will also generate a temporary html report file and open it in your browser. This file will look something like the following 

[https://cryogenicplanet.github.io/depp/static/htmlReport.html](https://cryogenicplanet.github.io/depp/static/htmlReport.html)

### Some Major Flags

- `--js` Will enable checking js files
- `--dev` Will enable checking dev dependencies (this is not very accurate)
- `--report` Will save the report to `.depp/report.md`
- `--externals` Can use this to external certain packages, useful if the build fails by default
- `--ignore-namespace` Can ignore namspaced internal packages using thing, good for ignore `@monorepo` packages
- `--show-versions` Will explicitly print the versions of duplicate packages in console

This is not an exhaustive list of all flags, for that run `depp --help`

Example advance usage is

```bash
depp  -e mobx -e magic-sdk -e domain -e @daybrush/utils -e yjs -e constants -e ws -v -in @editor -in @server -j -e perf_hooks --report
```

In the next part, I will dig a little deeper into how this tool was built and how it works under the hood
Feedback form using Chatbot
Tags: chatbot, ai, googlecloud
Published: 2021-11-03 04:48:46

<b>Have a ever heard about a forms using a Chatbot? YES, you can see my feedback form Chatbot from this link </b>
<Br>
<a href="https://protecgamesofficial.blogspot.com/2021/11/feedback-form-using-chatbot.html">Click to open Chatbot</a>
Finally, a Brightness Control on MacOS that rules all monitors (external or not)
Tags: productivity, workstations
Published: 2021-11-03 04:45:06


I use multiple external monitors on my MacBook. It has always been a pain to adjust the brightness of those external monitors at night. The MacOS brightness control only works for built-in display. The buttons on monitor device are the only way to adjust the external monitor. 

Until this app comes along to rule it all. 

https://github.com/MonitorControl/MonitorControl#readme
Contributing to Clockify NLP Bot 
Tags: opensource, beginners, hacktoberfest
Published: 2021-11-03 04:34:46

In the third week of Hacktoberfest, I had a chance to work on a Bot Framework - Clockify NLP Bot. It is developed to act as a timesheet assistant. I am always amazed about how Bot Framework work, and this is an excellent opportunity for me to learn.
The Clockify NLP Bot is written by C# and .NET Core SDK. I was working on  [improve message formatting](https://github.com/xtreamsrl/clockify-nlp-bot/issues/67) when a user asks Bot to report their work hours. 
I checked the source code and found that the message was generated using the string template from ClockifyMessageSource.resx. This file is an XML resource file in the .NET apps for localization, which helps store strings to be loaded dynamically. This concept is new to me, so I am excited to know about it.
I asked the project maintainer about my idea to resolve the issue, and they gave me the go-ahead signal.
We have communicated through GitHub and a temporary slack channel. However, I could not hear anything from them after my last [pull request](https://github.com/xtreamsrl/clockify-nlp-bot/pull/113)
We are hiring...
Published: 2021-11-03 04:28:51

Technical Content Writer

Job Description

Excellent written English (US)

Prior 5-7  years of content writing experience as a content editor, web editor, or a similar role

Ability to understand and write about web technologies.

Knowledge about websites and any prior experience managing blogs is a plus.

Ability to write creative, fast, and error-free content

Excellent research skills

Hands-on experience with Content Management Systems (e.g. WordPress)

Basic knowledge of keywords, meta tags, SEO and its implementation in writing

Ability to prioritize work and complete tasks with quick turnaround times

Ability to work well in a team with a range of creative people

Have an eye for detail

Ability to learn

Take complete ownership of the entire blogging process
Work on adding CTAs and infographics to the blogs
State of my Cloud Journey: Nov 2, 2021
Tags: cloud, learning, careerchanger, jobsearch
Published: 2021-11-03 04:22:00

This was an ok-ish week, all told. My weekend was not as productive as I'd wanted, but I do keep having to remind myself that I should take time for relaxation sometimes.

##Learning Paths 📚

_Docker_
I wrapped up the Swarm section of my Docker bootcamp, and am ready to move on to learning about Kubernetes. Since that topic will be completely new to me, I'm looking forward to gaining some exposure and guided practice with what seems to be a pretty ubiquitous container orchestrator.

_Algorithms_
Not surprisingly, I'm having to do some catch-up on a few topics to stay on top of this course. It starts off with sorting and recursive algorithms, and I took some time to understand and then write a mergesort algorithm in Python this week. I've also begun learning "Big-Oh" notation.

_Linux Upskill Challenge_
While looking around for something I could pick up and drop easily during stochastic down times at work, I discovered this reddit-based Linux learning sequence. Instead of going one day at a time, I've been working at my own pace through the instructions, getting more comfortable operating in Linux (an Ubuntu AWS EC2 instance in one of my accounts, launched specifically for this purpose). Much of it has been review of things I have already seen, but there's always at least one or two new things each "day."

##Projects 🔨

As a form of note-taking: I want my next project to involve several tools that I don't have in my stack quite yet: Docker for sure, possibly an orchestrator, and likely something like Ansible and maybe Jenkins. I see those names all over the place, and while I know (more or less) what they do, I haven't learned how to use them. Yet.

##Job Search 🔎

No happy news this week.

A kernel of a thought is formulating about what I should do to help improve my job hunt. More on that next time.

_4 applications; 0 interviews; 4 rejections_

##Wrap-up 🍩

Parts of this week felt like more of a grind than others, and that's bound to happen most weeks. I know where I can improve my time management, so I will work on that next week and not worry too much when I need to rest.

_Onward and upward!_
Errors
Published: 2021-11-03 04:14:52

## It seems that perfection is attained not when there is nothing more to add but when there is nothing more to take away — Antoin de Saint-Exupery

There is a lot that can be inferred/taken by the above statement. Errors only occur in programs if they are not perfect in every way. Antoin also gives us the insight that anything can be made perfect by taking things away from it not adding things to it.
Douglas Crockford in his book JS the Good parts says if a feature is sometimes useful and some times dangerous. and you have a better option always use the better option.

### WE ARE NOT PAID TO WRITE PROGRAMS THAT USE ALL THE FEATURES OF THE LANGUAGE. INSTEAD, WE ARE PAID TO WRITE PROGRAMS THAT ARE ERROR-FREE AND WORK WELL.

*My thoughts/take-aways on the above idea*

Always Always Always(I know I am stressing this out too much but it’s a fact), Remember to know how, why, and when to use the specific concept of the language.
here is a very simple example, we all use >, < operators in JS right for instance consider the following example
```
Number(true);//1
Number(false);//0
1 < 2;//true
2 < 3;//true
1 < 2 < 3;//true
( 1 < 2 ) < 3
( true ) < 3//Auto Coercion by js
1 < 3//true
But (Wait for it)
3 > 2 > 1
( 3 > 2 ) > 1
(true) > 1
1 > 1 //false
```
what!!! but we know that thats not true, this is one of the corner cases in js with auto conversion from boolean to number :’( .

My point being that if we knew about this corner case this could easily be prevented.

By this, I don't mean that we should go to extremes and follow

Type Rigidity or Static Types or Type Soundness.
People say that JS’s dynamic typing is its biggest weakness. I feel that its one of its greatest strengths. I mean, I couldn't imagine js without its dynamic typing. We would have been deprived of so many paradigms if we didn't have dynamic typing.

So what I mean to say is people. Nothing in a language is magic, everything happens to cause its either meant to be that way or because of historical reasons(in order to not break the older functionality ). Please ppl, remember to understand why questioning the same at every point(there is no stupid question remember). Always understand why before applying.

ERRORS occur usually (not including the corner cases :) because we do not understand the language and because of our own stupidity, Not the other way round

REFERENCES -
The Better Parts. Douglas Crockford.
Kyle Sympson — Javascript Foundation(You don't know Javascript).

Do not agree with me, Change my view ❤