teleren/devto huggingface dataset:
🎉 React Native Image Swipe Component🚀 
Tags: github, reactnative, opensource, webdev
Published: 2020-01-25 10:48:58

# 🎉 React Native Image Swipe 🚀 

[Find on Github](https://github.com/realabbas/react-native-image-swipe)

*I was not able to find a suitable library to implement image swipe and proper touchability. So I made some tweaks and came up with some turnaround*

Check it out now.
Creating a Mobile Design and Developing it
Tags: javascript, react, ux, webdev
Published: 2020-01-25 10:46:49

I've created this video to take you through the whole process of designing a mobile application and then developing it.

It covers the UI design within Figma of an existing business, and how to go through the process of creating a mobile design for it.

Then we look at developing that in React Native using tools like styled-components and putting in an application.

{% youtube peRysXaEzqM%}
MNIST Dataset Analysis (Part-1)
Tags: python, machinelearning
Published: 2020-01-25 10:42:49

**What is the MNIST dataset?**

MNIST  database, alternatively known as the Mixed National Institute of Standards and Technology database. It is the collection of large Images dataset (70K Images)  commonly used for testing of Machine Learning Classification algorithms. 

Each image is handwritten, well labeled and is of 28 x 28 pixels.

The MNIST dataset is a reliable source for starting the Image Classification problem. 

**Prerequisites:**

Following are the essentials for this post: 

- Elementary knowledge of Python
- Fundamental knowledge of Machine Learning.
- Any IDE of your preference (Pycharm preferred.)

**Getting Started**

To get started, download the dataset first.

```python
"""
Classification algorithm on MNIST dataset
"""

from sklearn.datasets import fetch_openml
import matplotlib.pyplot as plt

# To download the data
mnist_data = fetch_openml('mnist_784') 

```

Execute the program to download the dataset at $HOME/scikit_learn_data/. 

Unzip the file *$HOME/scikit_learn_data/openml/openml.org/api/v1/json/data/features/554.gz*,  to view the features data.

To print the length of 'mnis_data' variable print(len(mnist_data)). 

```python
print(len(mnist_data))
```

The above will print '9' on the screen. It means that mnist_data has 9 keys for each Image. To print the keys

```python
print(mnist_data.keys())
```

By executing the program, you will see the following output on the screen.

```
dict_keys(['data', 'target', 'frame', 'feature_names', 'target_names', 'DESCR', 'details', 'categories', 'url'])
```

The subsequent task is to separate the data and the target. 

```python
def get_mnis_data__and_target():
  return mnist_data['data'], mnist_data['target']

x, y = get_mnis_data_and_target()
```


For now, we have successfully downloaded the dataset and separated the data and the target. Before proceeding, we want to see what we have in the data. How does the handwritten image looks?

Go the IDE and add the following:

```python
# Shape of x
print(x.shape)
```

```
(70000, 784)
```

70,000 indicates the total number of datasets, and 784 represents the distinctive feature of each image. If you recall, in earlier section MNIST dataset image has been labeled with 28 x 28 visible pixels, equal to 784.

The subsequent step is to import the matplotlib and random at the top of the program.

Random is to generate the random number. We use it to generate it a random number. And in Matplotlib we use **imshow()** function to display the image on screen.

```python
import matplotlib.pyplot as plt
import random

# Generates the random number between 0 and 70,000
index = random.randint(0, 70000)

print("Index is: " + str(index))

random_digit = x[index]
random_digit_image = random_digit.reshape(28, 28)

plt.imshow(random_digit_image)
plt.axis('off')
plt.show()

```

Execute the above program and an random image displays on screen.

In the next tutorial, we learn more about MNIST data Training.
MS IIS or F5 NGINX ?
Tags: watercooler, sysadmin, netadmin, devops
Published: 2020-01-25 10:33:33

According to [Netcrafts Jan 2020 Web Survey](https://news.netcraft.com/archives/2020/01/21/january-2020-web-server-survey.html) *Microsoft's domain count decreased by 12.1 million (-20.8%), whilst nginx grew by 12.5 million (+24.0%), partly due to a swing from Microsoft to nginx at GoDaddy seen in March.*

Which HTTP server is your favorite ?
Solving problems vs fundementals 
Tags: codenewbie, python, beginners, discuss
Published: 2020-01-25 10:26:23

Hi , so I started to solve some problems now on (codechef) and the frustrated part is that I stay with a problem for a week maybe more cs when I see some solution on stackoverflow there is a lot of fundementals that am missing so for newbie (like me hahaha) do I just keep going learning by problems or I comeback to learn fundementals 
Or Both ? #discuss
Quiz ⭐️ Answer is a year later! Predict Web Developer Roadmap 2021.
Tags: webdev, javascript, beginners
Published: 2020-01-25 10:07:11


{% youtube SEgKwwGauu0 %}

# Introduction

4 Jan, 2020. Web developer roadmap 2020 is launched. 
In my view, 2020 is going to be a huge change.

IE 11 dies and MS Edge reborn as chromium.
Next year's technology will be put into practical use.
Therefore we need Web Developer Roadmap 2021 now.

----

# Web Components will upgrade

![Web Components will upgrade](https://thepracticaldev.s3.amazonaws.com/i/0ja1one00owqws5z0pgv.png)

### REASON

- Web Components has long been troubled by MS Edge, but it's time to put it to practical use.
- LitElement is one of the Polymer Projects promoted by Google.
It helps develop WebComponents.
- Shadow DOM is also used on the Web version of Apple Music.

----

# Snowpack will be on the list

![Snowpack will be on the list](https://thepracticaldev.s3.amazonaws.com/i/fokphxhyd8mzscsd4cj7.png)

### REASON

- We no longer need to transpile to es5. And with Snowpack, building web applications is **10 times faster**. No bundler required.
- No more waiting for your bundler to rebuild your site every time you hit save. Instead, every change is reflected in the browser instantly.

----

# Svelte will be on the list

![Svelte will be on the list](https://thepracticaldev.s3.amazonaws.com/i/69j371z4itqgi3s8u66b.png)

### REASON

- Svelte could be the third choice after React and Vue. Modern JavaScript frameworks are very large and complex.
- Svelte is trying to solve the problem with a completely different approach than React. The State of JS 2019 also shows a high level of interest.

----

# Other small things

## Semantic HTML will downgrade

![Semantic HTML will downgrade](https://thepracticaldev.s3.amazonaws.com/i/q3aj4zsnut7km97zpmyx.png)

### REASON

- HTML tags have become less meaningful in the era of custom tags.

## Cookie will be on the list

![Cookie will be on the list](https://thepracticaldev.s3.amazonaws.com/i/mbygk1qogqtqcoj9tnr6.png)

### REASON

- Starting with Safari, cookie policies are changing every day.

----

# In conclusion

That's my WebDev 2021 idea.
I'm a front-end developer in Japan.

Even if new technology is announced until now
In some cases, the adoption was **forgotten to support legacy browsers**.

This year is a chance to change consciousness.
I hope all developers can spend their time on **creative** things.

Thank you for reading it until the very end.

# Link

https://github.com/kamranahmedse/developer-roadmap
Vue/Vuex ...mapComputed
Tags: vue, vuex
Published: 2020-01-25 09:42:06

---
title: Vue/Vuex ...mapComputed
published: true
description: 
tags: vue, vuex
---

When you are binding directly a Vuex state property to the form via `v-model` you need to create [Two-way Computed Property](https://vuex.vuejs.org/guide/forms.html#two-way-computed-property) like this:

```html
// MyComponent.vue
<input v-model="email">
```

```javascript
// MyComponent.vue
...
computed: {
    email: {
      get() {
        return this.$store.state.email;
      },
      set(value) {
        this.$store.commit('setEmail', value)
      }
    }
}
...
```

Doing this for each property is annoying and verbose. Fortunately we can inspire in Vuex `mapGetters`, `mapMutations` and `mapActions` methods and create our own `mapComputed` method:

```javascript
// mapComputed.js
export const mapComputed = (module, fields) => {
  const obj = {};
  fields.forEach(field => {
    obj[field.name] = {
      get() {
        return this.$store.getters[`${module}/${field.getter}`];
      },
      set(value) {
        this.$store.commit(`${module}/${field.setter}`, value, { root: true });
      }
    };
  });
  return obj;
};
``` 
The usage is simple then:

```javascript
// MyComponent.vue
...
computed: {
    ...mapComputed("user", [
      { name: "email", getter: "getEmail", setter: "setEmail" }
    ]),
...
```

Where `name` is the name of the computed property used in `v-model`, `getter` is the name of getter and `setter` is the name of used setter. 

This is only the simple version considering using modules only.
Dependency Injection Lifetime Management in .NET Core
Tags: dotnet, architecture, csharp, webdev
Published: 2020-01-25 09:22:49



Dependency Injection is one of the most important features in building a maintainable application. In .NET Framework we have to rely on an external component to help us with this. Some of the most popular are Ninject, Unity, Spring.NET and others. Now, in .NET Core the dependency injection capability is built into the framework so we don’t have to use external  components any more.

Go to http://www.coding.lu/blog/dependency-injection-lifetime-management-in-net-core/ to continue reading.
What's the best documentation you have ever read?
Tags: webdev, discuss
Published: 2020-01-25 08:26:12

---
title: What's the best documentation you have ever read?
published: true
description: 
tags: webdev, discuss
---
Consider the documentations of all the languages, frameworks, libraries, editors, extensions, etc you have ever read.

What's the most well written and structured you can re-call?

Personally it would be Vue docs for me.
Want to start a newsletter for people learning to code. Sign up if you're interested.
Tags: codenewbie, beginners, html, javascript
Published: 2020-01-25 08:18:14

Taught myself how to code and now work full-time as a web developer. A lot of people ask me for courses and tips which I'm more than happy to share, but thought why not share those resources in a structured newsletter that teaches you how to code and deploy a website in 2-3 months? From A-Z. 

HTML + CSS + Javascript

Sign up if you're interested. If I get at least 500 emails, I'll start it 10th February. If I don't get enough emails, I'll delete this list (unless you opt for future updates) and you'll never hear from me again. 

So do share this form if you really want this newsletter. 

Cheers!

Link: https://forms.gle/yoBAG5jyckxYMcXR8
Create your own Netflix for nerds
Tags: learning, selfimprovement
Published: 2020-01-26 01:02:40

---
title: Create your own Netflix for nerds
published: true
date: 2020-01-25 07:48:24 UTC
tags: Learning, self-improvement
canonical_url: https://mullineaux.com.au/2020/01/25/create-your-own-netflix-for-nerds/
cover_image: https://i1.wp.com/blogmullineaux.blob.core.windows.net/wordpress/2020/01/image-1579932911886.png?resize=1024%2C464&ssl=1
---

I love to learn. I strongly believe that if you're not learning something new, then you're becoming obsolete; this is especially true in the tech industry.

Personal development is a journey that never ends. Here's one of the many ways that I keep my mental tools sharp.

[Continue reading](https://mullineaux.com.au/2020/01/25/create-your-own-netflix-for-nerds/)

The post [Create your own Netflix for nerds](https://mullineaux.com.au/2020/01/25/create-your-own-netflix-for-nerds/) appeared first on [Casey Mullineaux](https://mullineaux.com.au).
Playground
Tags: swift, beginners, webdev
Published: 2020-01-25 07:07:38

1. What surprised you the most—if anything—about using the playground?

     A- The thing that surprised me the most is how many functions playground is capable of. 

2. What other kinds of calculations could you store and run in a playground? (Examples include: how many seconds there are in a day or a week, or calculate a five-year-old dog’s age in human years, assuming one human year is equal to seven dog years).

    A-You can calculate a distance you may need to travel. 

3. What else—if anything—do you wish a playground could do?

     A- I wish you could animate within playground. 

4. You used a lot of numbers in this activity. What other types of information do you think you can represent in a playground?

     A-You can represent a lists of objects.

5. What else do you want to try to build using a playground?

     A-I want to build as many apps as I possibly can.
Simple Weather Card In Bootstrap 4
Tags: css, todayilearned, todayisearched, html
Published: 2020-01-25 06:31:12

In this element, we used the bootstrap 4 card component and some helper classes of padding, margin, and text-colors. Here we used font awesome colors and also we used hover effects. This is a simple and attractive user-interface with fully responsive to mobile and tablet views.

Make it yours now by using it, downloading it and please share it. we will design more elements for you.

Demo or Source code:-
https://w3hubs.com/simple-weather-card-in-bootstrap-4/
JavaScript tip: How to properly isolate your code using Anonymous Closures (IIFEs)
Tags: javascript, webdev
Published: 2020-01-25 05:19:43

JavaScript code can get really messy when we keep adding random functionalities as the requirements come.

And most of the times, any new functionality you add to an app should not interfere with the existing code in your app.

You don’t want the new piece of code to override your existing variables/functions accidentally. When such code causes some unexpected behaviour, it can get really annoying to debug through multiple files.

To achieve this, our new code should run in an isolated environment. In JavaScript, <a href="https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36" target='_blank'>closures</a> can help us do that. Closures are the primary mechanism used to enable data privacy in JavaScript.

This is how an anonymous closures looks like:

```
(function () {  
	// ... all vars and functions are in this scope only.  
	// still maintains access to all global variables  
}());
```

Just put your code inside of this function, and it will have its own scope while keeping the global scope pollution-free.

This is also known as a Self-Executing Anonymous Function or Immediately Invoked Function Expressions (IIFEs).

Variables declared inside the closure are not accessible outside it, but it still can access/create global variables. (The use of global variables should ideally be <a href="https://stackoverflow.com/questions/2613310/ive-heard-global-variables-are-bad-what-alternative-solution-should-i-use" target='_blank'>avoided</a> though, they are known to be <a href="https://yuiblog.com/blog/2006/06/01/global-domination/" target='_blank'>evil</a>.)

All of the code that runs inside this function lives in a **closure**, which provides **privacy** and **state** throughout the lifetime of our application.

If we need to, we can expose variables/methods by returning them in the function.

```
var result = (function () {  
    var name = "Harry";   
    return name;   
})();

console.log(result); // "Harry"  
console.log(name); // "error, 'name' not defined"
```

JavaScript Closures is the main idea behind the Module Pattern in JavaScript, you can explore the basics of module patter here: 
<p><a target='_blank' href="http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html">http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html</a></p>
<p><a target='_blank' href="https://dev.to/tomekbuszewski/module-pattern-in-javascript-56jm">https://dev.to/tomekbuszewski/module-pattern-in-javascript-56jm</a></p>

Find me at https://virajc.tech
Handling state dependent content in Jetpack Compose
Tags: kotlin, android
Published: 2020-01-25 05:01:32

For almost all projects there will be state dependent content, this could be anything from error messages to whole pages. Different component based frameworks handle this issue differently. We will look at React and Angular's approaches and then look at the way Jetpack Compose handles it.

## Angular

For example Angular's most common example is `*ngIf`

`<element *ngIf="someState"></element>` 

The display logic is handled in the template file rather than the typescript file, this approach separates template logic and state logic. The template logic is very straight forward and readable for any new developer to understand.

## React 

React handles state dependent content in a not as straight forward way.

```
<>
    {
        this.state.someState && <p>some text</p>
    }
</>
``` 
If you are not familiar with this syntax, it functions the same as an "if statement". In the code above, if "this.state.someState" is defined and is not false, [], {}, "", or 0 then `<p>some text</p>` will appear. This syntax is not completely straight forward to all developers.

## JetPack Compose

Jetpack Compose combines these two approaches to produce a very straight forward and readable way to have state dependent content. If we are creating a carousel for our app, that changes the view  when the next button is clicked. 

{% gist https://gist.github.com/joeJazdzewski/87627ba174ea182cb9f5dfe2c5572ce4 %}

In the code above, you can see that the render part of the code has a few "if statements" in it, which combines the previous two approaches when rendering state dependent content. Where there is no distinction between template and state logic and keeps the "if statement" more readable
Types versus Instances, Methods versus Properties
Tags: types, methods, properties, instances
Published: 2020-01-25 04:49:22

Some of the differences between a method and a property are that a method is a function that has been defined as a part of a type and a property is the one or more pieces of associated information in an instance. A property provides a way to get or set a value for an instance. A method provides behavior specific to that instance.

The difference between a type and an instance is that types are classifications for literals, such as String, Int or Bool while instances are the specific values given to those types at any given moment.
Catamorphisms
Tags: haskell, functional, beginners
Published: 2020-01-25 03:25:12

Some time ago I read about catamorphisms. It's beautiful concept, but it can be difficult to understand it when you read it first time. It looks too abstract and almost unusable in the real life.
But when you understand it, you start seeing it everywhere.
Like, "Well, maybe it's time to replace MapReduce with Catamorphism?"
I'm not going to explain what is cata and ana morphisms. I'm not sure if I would do it better than Bartosz Milewski. So here are the links to great lectures about it:
https://www.youtube.com/watch?v=PAqzQMzsUU8
https://www.youtube.com/watch?v=jpl7FE2TZTE
It's worth to watch both series of lectures.
Also a great article about catamorphisms is here:
https://www.schoolofhaskell.com/user/bartosz/understanding-algebras
I wrote down examples from lectures as accurate as I could.
As I feel it, playing with this code make it easier to understand lectures and to find why and where you need cata.
This code available here:
https://gist.github.com/DKurilo/5e5563f4c2a8e8ca53a7b98ebf59e9f1
You can also play with it on Repl.it
https://repl.it/@DimaKurilo/Catamorphisms
Auto-alias Your Repos
Tags: linux, productivity, tips
Published: 2020-01-25 03:04:21

---
title: Auto-alias Your Repos
published: true
description: Use your config to auto-create aliases for your repo directories.
tags: #linux #productivity #tips
---

If you have all your code repos under a common directory, you can make it so changing your working directory to any of the repos is just entering the name of the repo.

For example, all my code repos are under `~/code`:
```zsh
~ > ls ~/code
bar    foo
```

By adding a loop for the sub-directories of the common parent inside your shell config, `~/.zshrc` in my case, you can automatically create a alias for each of the repo directories:
```zsh
for repo in $(ls ~/code)
do
  alias $repo="cd ~/code/$repo"
done
```

Then you need to reload your config:
```zsh
~ > . ~/.zshrc
```

Now, if you're in one repo, lets say `foo`:
```zsh
~/code/foo/app/models >
```
You can easily swap over to bar:
```zsh
~/code/foo/app/models > bar
~/code/bar >
```
Unordered and Ordered Lists
Tags: ul, ol, li
Published: 2020-01-25 02:51:59

To create an unordered list with three items in it, those being Vikings, Bears and Lions, the code would look something like this;
	<ul> 
	      <li> Vikings </li>
	      <li>Bears </li>
              <li>Lions </li>
        </ul>

1.	Pulp Fiction
2.	The Dark Knight
3.	The Godfather: Part II
4.	The Godfather
5.	The Shawshank Redemption

To rewrite the list above in descending order, the code might look a little something like this; 

       <ol reversed start = “5”> 
             <li>Pulp Fiction </li>
             <li> The Dark Knight</li>
             <li> The Godfather: Part II </li>
             <li>The Godfather </li>
             <li> The Shawshank Redemption</li>
       </ol>

There are three HTML elements used in a description list. There is the description list which is represented as <dl>, there is the description item, represented by the term <dt> and finally, we have the term <dd> which is used for the description of the item.

I was attempting to write a code for the following list items; Home, FAQ, Contact Us, and pointing back to the index.html, faq.html, and contacts.html files respectively. I was a little confused as whether my <li> tags should be inside the <a> tags, or Is better to read if it’s done this way?

    <nav>
         <ul>
             <li> <a href= "index.html">Home> </li>
             <li> <a href="faq.html">FAQ> </li>
             <li> <a href="contact.html">Contact Us> </li>
         </ul>
    </nav>
What’s a blog?
Tags: discuss, beginners, productivity
Published: 2020-01-25 02:50:29

So what IS a blog? I’ve never been much of a social media person, and this is my first blog. I've always just been more of a lurker. An overwhelming majority of blogs these days seem to be tutorials, or maybe I'm just in the wrong places. To anyone reading this, what is a blog to you? A place to learn new skills or perspectives on things? Discussion zones? 

I’m sure it’s going to take me awhile to get the hang of being a *blogger*, and I’ll be surprised if more than a single person ever reads this. But I guess you gotta start somewhere!
How to manage your time ?
Tags: productivity, motivation, career, programming
Published: 2020-01-25 02:18:38

*We have to manage our time efficiently. It's one of the most important thing to accomplish to become a successful developer.
It's really hard to accomplish but if you try to do it every single day, it'll be easier over time⏱️.*

First prioritize your important tasks.📝

Divide large tasks into small pieces.📌

Complete harder tasks within the first hours of your day.😪

Stay away from the time wasters in your productive hours.📵

Plan your relaxation time before hand, it's also essential.😌

Don't try to do multi-task at one time. It's a myth.↔️

Don't try to be a perfectionist. Nothing will we fully perfect.👌

**Thanks for reading !😃**