teleren/devto huggingface dataset:
#solved Data not showing on Django Template
Tags: help, django, python
Published: 2019-08-25 15:57:19

I don't know why it isn't showing on the templates when I think I implemented it right.

the template is :
```
              <div class="row">
              {% for volunteer_name in volunteer %}
                <div class="col-md-4 col-sm-6">
                  <div class="team-wrapper">
                      <div class="team-img">
                          <img src="{{ volunteer_name.img.url }}" class="img-responsive" alt="Image">
                      </div><!-- /.team-img -->

                      <div class="team-title">
                          <h3><a href="#">{{ volunteer_name.name }}</a></h3>
                      </div><!-- /.team-title -->


                  </div><!-- /.team-wrapper -->
              {% endfor %}
                </div><!-- /.col-md-4 -->

              </div><!-- /.row -->
```
models.py is:
```
class Volunteer(models.Model):
    image = models.ImageField(max_length=100, upload_to='volunteer/')
    name = models.CharField(max_length=100)
    facebook = models.CharField(max_length=100, validators=[URLValidator])
    twitter = models.CharField(max_length=100, validators=[URLValidator])
    linkedin = models.CharField(max_length=100, validators=[URLValidator])

    def __str__(self):
        return self.name
```
views.py
```
def home(request):
    amlvideo = AMLVideo.objects.filter().order_by("-category", "-language", "-level")
    volunteer_name = Volunteer.objects.all()
    img = Volunteer.objects.all()
    context = {"home": home}
    return render(request, "aml/home.html", context)
```

Can someone help me?
String Contained in a String in D
Tags: dlang, tutorial, string
Published: 2019-08-25 15:53:52

This is a common task when dealing with strings. It isn't as powerful as regular expressions, but is a quick win for checking a string. Partial string match, contains, is a simple concept and D hides it a little bit.

```dlang
import std.algorithm;

auto haystack = "some long name";
auto needle = "long";

if(!haystack.find(needle).empty)
    haystackHasNeedle(haystack);
```

In this context `!` is negation, (not)... empty. 

`find` is a general function that works on any range. So it can be used with numbers and other containers. Similar to `count` and `filter` it is possible to specify more complex conditions.


```dlang
import std.algorithm;

auto haystack = [1, 2, 3, 4];

assert(haystack.find!(x => x > 2)
               .equal([3, 4]));
```

It is actually moving the start of the range where the condition matches leaving the rest of the range to be manipulated. This approach is carried to other functions and makes for a very consistent navigation of strings and other data.

```dlang
import std.algorithm;

auto haystack = "some long name";

if(haystack.skipOver("some"))
    assert(haystack.startsWith(" long"));
```

This post would seriously get long as I would end up going over almost all of std.algorithm and std.range due to all the general methods available.

Instead I must mention one critical aspect to strings. Unicode is not simple, while many algorithms with strings will work at this level, unicode has normalization, and graphemes to consider.

https://dlang.org/phobos/std_uni.html

It is not like you'll fair better using another language. I generally haven't put much thought into it, I think the main two operations to reach for gragheme is character count and string reversal. I've generally had the luxury of ignoring this detail.
Angular 8 - Getting Started In 2019
Tags: angular, javascript, tutorial, webdev
Published: 2019-08-25 15:48:53

---
title: Angular 8 - Getting Started In 2019
published: true
description: 
tags: #angular #javascript #tutorial #webdev
---

Just found a nice read on Getting Started With Angular 8 - https://overflowjs.com/posts/AngularJS-Getting-Started-In-2019-Part-1.html

The article explains 
1. What is Angular 8?
2. How it is different from Angular 3.0?
3. Help you Setup environment to run Angular?
4. Help you make a `hello world` app and see on localhost server.

Hope it helps someone starting with it.

Happy coding
Lazy Loaded Components in Angular
Tags: angular, lazy, ivy, performance
Published: 2019-08-25 15:40:06

Back in the old AngularJS Days I had a little playground app where I could lazy load nearly everything. 

Ever since Angular 2 came out, I searched every few months about lazy loading components. 

Some time after release, it got quite easy to lazy load angular modules based on your routes, and also got easier with simple [npm packages / files](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-4.html), but there weren't any "easy"(-ish) ways to lazy load a component, but thankfully Ivy will finally change that. :tada:

## 1. Wait, before you continue reading...

I suggest you to read [Artur's Post about `Asynchronous modules and components in Angular Ivy`](https://blog.angularindepth.com/asynchronous-modules-and-components-in-angular-ivy-1c1d79d45bd3) first, great introduction and explanation!

This component loader is based on his example, loading the components based on a fixed `import()-path`.


## 2. Refactoring the example Component [Link](https://gist.github.com/negue/5f4435c7e1d2c11449691d342b39cdd5/5bc827ee9fda2115da34ce6d9a0bf24986c6bce9)

I added a simple map which holds all my lazy loadable components. 

```ts
// list of lazy loaded components
const lazyComponents = {
  'lazy-comp': () => import('../lazy-comp/lazy-comp.component'),
  'other-comp': () => import('../lazy-comp/other-comp.component')
};
```

With each `import` line, the angular-cli (or rather webpack) marks those imports as lazy and those will be extracted to a separate chunk.

```bash
chunk {lazy-comp-lazy-comp-component} lazy-comp-lazy-comp-component.js, lazy-comp-lazy-comp-component.js.map (lazy-comp-lazy-comp-component) 1.55 kB  [rendered]
chunk {lazy-comp-other-comp-component} lazy-comp-other-comp-component.js, lazy-comp-other-comp-component.js.map (lazy-comp-other-comp-component) 1.57 kB  [rendered]
```


Now you only need to set 
```html
<my-dynamic-loader component="lazy-comp"></my-dynamic-loader>
```

And your component is lazy loaded :tada:


## 3. Refactoring continues..
Now lets register the lazy-components outside the loader-component itself, so that its a bit *more* dynamic. (Now `DynamicLoaderComponent` can be used from a library and additional lazy-components can be added from everywhere else)


```ts
DynamicLoaderComponent.LazyComponents = {
  'lazy-comp': () => import('./lazy-comp/lazy-comp.component'),
  'other-comp': () => import('./lazy-comp/other-comp.component')
};
```
[Refactored Version](https://gist.github.com/negue/5f4435c7e1d2c11449691d342b39cdd5/b4307735eda415606e5c035e7d631d9dda69527a)


to be continued / tried / tested:
- Inject services into lazy components
- `@Input()`/`@Output()`
- prevent loading the same component multiple times / loaded component cache
- events on Component loaded / created / others
- example repo / project

Any thoughts / suggestions / ideas ?
All-time best books developer should read
Tags: vue, showdev, books
Published: 2019-08-25 15:36:35

I created new websites to list all time best book developer should read.

You can check it at https://techread.dev

There are some main topics:

- Management
- Coding
- Agile
- Architecture
- General
- UI/UX
- Algorithms
- Machine Learnin
- Soft Skills
- Devops
- Javascript
- Operating Systems
- Ruby
- Security

I'm looking forward to receive some feedbacks.
What is your perception on Meteor in 2019?
Tags: meteor, javascript, survey
Published: 2019-08-25 13:34:22

This somewhat of a short survey. Please comment first before you start researching the web, no matter if you love it, dropped it, came back to it or never heard of it.

I will not only wrap it up in a follow-up article but also will give you an overview about it's journey (or better the last four years of it) and current state (the tech, the framework, the community, the company behind it).

The "survey" will last one month and ends on 2019/09/25.
What is a good team lead in your opinion?
Tags: career, programming, discuss
Published: 2019-08-25 13:26:36

---
title: What is a good team lead in your opinion?
published: true
description: What is the most important quality for the team lead? 
tags: [career, programming, discuss]
cover_image: https://thepracticaldev.s3.amazonaws.com/i/abf2y1z5rzajzzgyq6sv.jpg
---

What is the most important quality for the team lead?

The strongest side of team lead (IMO) is human skills. The main task of team lead is to support morale in the team, to help people, to resolve conflicts.

If team lead doesn't know something it is totally ok to say: "I don't know let's find out together" or "ask Jane she should know this".

(This is my opinion. I'm posting it to hear your opinions in response.)

**Tell me about the best team lead you worked with.**

> Photo by Rob Curran on Unsplash
IntelliJ Docker plugin
Tags: intellij, docker
Published: 2019-08-25 12:58:45

---
title: IntelliJ Docker plugin
published: true
description: 
tags: IntelliJ, Docker
---

TIL that IntelliJ has a Docker plugin that gives you a UI tool within the IDE to integrate with Docker (running on your local machine). Not much different from integration with other servers like WebSphere, Tomcat and so on.

**Step 1: install the Plugin**
![Docker Plugin](https://thepracticaldev.s3.amazonaws.com/i/jb8lh7dhr67f2ergt0j0.png)

Basic set-up is easy. Just point to Docker.
![Plugin setup](https://thepracticaldev.s3.amazonaws.com/i/qhjnnb0cdidjr3z11eqr.png)

**Step 2: Map Ports etc.**
Clicking on the same two arrows, but then selecting the "Edit Dockerfile" option ![Docker parms](https://thepracticaldev.s3.amazonaws.com/i/dfhl6by9v8azm9xga3m2.png)allows you to map ports and to specify other options you might otherwise need to provide at the Docker command line.

**Step 3: Run your Dockerfile**
Once this is done, when you open your *Dockerfile*, you will see the typical  green "Run" arrowheads in IntelliJ (or whatever shows in your theme).
![Run](https://thepracticaldev.s3.amazonaws.com/i/m4ijg9venq5iei26a64w.png)

**Step 4: Monitor and Control**
The "Services" tool tab allows you to monitor the container's logs, and to control various other aspects... check out the various tabs.![Services tab](https://thepracticaldev.s3.amazonaws.com/i/c7qiep0rgnzblo553t3r.png). For instance, you can look at the environment variables. 
It also has an option to run a _docker exec_ ![exec](https://thepracticaldev.s3.amazonaws.com/i/x9vppmwbrqnahg15qqvu.png) So, it's easy to jump into a shell in your container to check it out.
[VIDEO] What are Higher-order Observables and flattening operators in #RxJS (mergeMap, switchMap, concatMap).
Tags: rxjs, angular, webdev, beginners
Published: 2019-08-25 11:40:01

---
title: [VIDEO] What are Higher-order Observables and flattening operators in #RxJS (mergeMap, switchMap, concatMap).
published: true
description: What are Higher-order Observables and flattening operators in #RxJS (mergeMap, switchMap, concatMap) video from my video-course “Hands-on RxJS”
tags: rxjs,angular,webdev,beginner
cover_image: https://thepracticaldev.s3.amazonaws.com/i/5paw2dw8j4zbq2yj67r8.png
---

Another free video from my ["Hands-on RxJS"](https://www.udemy.com/hands-on-rxjs-for-web-development/) video course on Udemy!

Learn what are higher-order Observables and which operator functions can help us to get benefits from them!

{% youtube rsWS2jG46vU %}

You can watch more free videos [here](https://www.youtube.com/playlist?list=PLTgRMOcmRb3OyEoPUOz4SltaYakWGC3M2).

You can learn more and buy the full video course [here](https://bit.ly/2AzDgQC).

Kindly leave your feedback in comments or [Twitter](https://twitter.com/El_Extremal)!
SLI, SLO, and SLA
Tags: architecture, sre
Published: 2019-08-25 11:39:26

### SLI - Service Level Indicator
Defines a measure of service level provided by service providers.
Examples
- Uptime of the service
- Number of Transactions

### SLO - Service Level Objective
Defines a target value or a target range of service level, measured by SLI.
Examples
- Availability of the service should be 99.999%

### SLA - Service Level Agreement
Defines a commitment between service providers and customers.
Examples
- Refund service fee
- Provide free service for a period of time

### The Nines
Percentages to measure the service. 

| Availability % | Downtime per year | Downtime per month | Downtime per week | Downtime per day |
|----------------|-------------------|--------------------|-------------------------|----|
|55.5555555% ("nine fives")|162.33 days|13.53 days|74.92 hours|10.67 hours|
|90% ("one nine")|36.53 days|73.05 hours|16.80 hours|2.40 hours|
|95% ("one nine five")|18.26 days|36.53 hours|8.40 hours|1.20 hours|
|97%|10.96 days|21.92 hours|5.04 hours|43.20 minutes|
|98%|7.31 days|14.61 hours|3.36 hours|28.80 minutes|
|99% ("two nines")|3.65 days|7.31 hours|1.68 hours|14.40 minutes|
|99.5% ("two nines five")|1.83 days|3.65 hours|50.40 minutes|7.20 minutes|
|99.8%|17.53 hours|87.66 minutes|20.16 minutes|2.88 minutes|
|99.9% ("three nines")|8.77 hours|43.83 minutes|10.08 minutes|1.44 minutes|
|99.95% ("three nines five")|4.38 hours|21.92 minutes|5.04 minutes|43.20 seconds|
|99.99% ("four nines")|52.60 minutes|4.38 minutes|1.01 minutes|8.64 seconds|
|99.995% ("four nines five")|26.30 minutes|2.19 minutes|30.24 seconds|4.32 seconds|
|99.999% ("five nines")|5.26 minutes|26.30 seconds|6.05 seconds|864.00 milliseconds|
|99.9999% ("six nines")|31.56 seconds|2.63 seconds|604.80 milliseconds|86.40 milliseconds|
|99.99999% ("seven nines")|3.16 seconds|262.98 milliseconds|60.48 milliseconds|8.64 milliseconds|
|99.999999% ("eight nines")|315.58 milliseconds|26.30 milliseconds|6.05 milliseconds|864.00 microseconds|
|99.9999999% ("nine nines")|31.56 milliseconds|2.63 milliseconds|604.80 microseconds|86.40 microseconds|

Source: [Wiki](https://en.wikipedia.org/wiki/High_availability)
Coercion in JavaScript
Tags: javascript, beginners, todayilearned, codenewbie
Published: 2019-08-25 10:35:33

## What is Coercion?

Coercion is the process of conversion of one data type to another.

```javascript
1 + '2'
// 1 coerces to '1'
// '12'

1 + true
// true coerces to 1
// 2

1 + null
// null coerces to 0
// 1

1 + undefined
// undefined coerces to 0
// 1

'abc' + undefined
// undefined coerces to 'undefined'
// 'abcundefined'

1 < 2 < 3
// => true < 3 (left to right associativity)
// => 1 < 3 (coercion)
// => true

1 > 2 > 3
// => false > 3
// => 1 > 3
// => false
```

JavaScript can give weird and unexpected results when comparing. Thus, it is better to use <code>===</code> instead of <code>==</code> for comparisons as <code>===</code> doesn't coerce.

```javascript
1 == '1'
// true
// coercion

1 === '1'
// false
```

> Coercion decisions are made by the _JavaScript Engine_ itself.

## Manual Coercion
Here's how you can manually convert to a datatype:
```javascript
const number = 42;
const string = '42';

Number(string);
// Coerces to number
// 42

String(number);
// Coerces to string
// '42'

Boolean(string);
// Coerces to boolean
// 1
```

## Conditional Statements
The conditions inside _if_, _ternary_ operator, _while_ loop etc. are coerced to _Boolean_.

#### Truthy and Falsy
Any value that coerces to _true_ is called _truthy_ and to _false_ is called falsy.

There are only 6 _falsy_ values, everything else is _truthy_:
1. _false_
2. _0_
3. _''_, _""_ (Empty String)
4. _null_
5. _undefined_
6. _NaN_

#### Watch out for these:

```javascript
Boolean({});
// true

Boolean([]);
//true

Boolean("0");
// true

null == 0
// false
```

> And that's all folks! Thank-you for reading and have a wonderful day 😄
My first proper open source project
Tags: javascript, npm, node
Published: 2019-08-25 09:34:37

I made this little API to fetch any public profile's details. Here is a glance ![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/0rhmgk1xys0hwaujqwxm.png) You can look up more about it at https://github.com/Tanuj69/instagram-api and https://npmjs.com/package/instagram-public-api
Udacity Interface Plug-in: Remove the after-video 5 second wait and indefinitely hide the sidebar. 
Tags: udacity, javascript, gist, vanillajs
Published: 2019-08-25 08:35:26

---
title: Udacity Interface Plug-in: Remove the after-video 5 second wait and indefinitely hide the sidebar. 
published: true
description: This Javascript plug-in allows you to remove the 5 second wait at the end of each video in  a lecture series.  Also, once you close the sidebar, it stays close.
tags: udacity, javascript, gist, vanillajs
---

![Annoying 5 second countdown timer](https://thepracticaldev.s3.amazonaws.com/i/dqft131atref65vxpylj.png)
![Sidebar reappearing](https://thepracticaldev.s3.amazonaws.com/i/hsqmnur70vsj4aigq2kf.gif)

Were you slightly annoyed by this? 

We're here to fix that! See it in action.
![Demo](https://thepracticaldev.s3.amazonaws.com/i/a09wn1hua8adk3049q1x.gif)

Get the code here: [https://gist.github.com/jelizaga3-gatech/15ddf81af264018c3fd2a92b478cc624/](https://gist.github.com/jelizaga3-gatech/15ddf81af264018c3fd2a92b478cc624/)

**Installation**
* Option 1:
![How to install #1](https://thepracticaldev.s3.amazonaws.com/i/lyygmj1bvljucuo9pygn.png)

* Option 2:
Download the [html file](https://gist.github.com/jelizaga3-gatech/15ddf81af264018c3fd2a92b478cc624/#file-udacity-hidesidebar-skipper-minjs-html) and open it in your browser. Then, drag the hyperlink to the bookmarks bar.

![How to install #2](https://thepracticaldev.s3.amazonaws.com/i/10s3xcv2h07c1k6nbud4.gif)

To **disable** the plugin, refresh the page.

Watching Udacity videos just got infinitely better.
How to only see my follows in the Feed?
Tags: watercooler
Published: 2019-08-25 08:25:50

---
title: How to only see my follows in the Feed?
published: true
description: Question about using dev.to
tags: watercooler
---

It seems like my feed consists not only out of tags and profiles I follow, but some other random posts as well. How do I only have follows and followed tags on my Feed?

Thanks
How Do You Refactor Any Existing and Very Old Codebase? 
Tags: discuss, architecture, refactorit, android
Published: 2019-08-25 08:18:10

So at work, I have been working on codebase which is almost 2 years old. It seems like its written by some students who were just started to learn Android development. Here's some quick facts about codebase:

* No architecture like MVP, MVVM or anything. Each single Activity class does everything like UI work, data persistence, network calls, deep links integrations, business logic, and so on. This results in classes with 20,000 lines of code and makes code navigation a lot harder. 

* Some Activity classes include code for 3-4 screens. Like layouts have 4-5 sub layouts and those are being shown/hidden according to the state of app. Again, each screens' logic, network calls, persistence etc goes into same activity class. 

* The code is in Java and uses lots of old libraries like Volley etc. I have recently shifted codebase to use AndroidX which itself was a big problem. There's no Material Components or anything close to Material Design. Sometimes it feels like the designer is more familiar with iOS. So design patterns, UI interactions are more like iOS way. So sometimes it becomes hard to create such in Android. 

* The app uses lots of flavors and dimensions to create white labeled app for each client using different server, databases, color schemes, and which features to enable etc. 

Now we are scaling to more clients day by day. We want to refactor the codebase to Kotlin and preferably use some architecture atleast a little. We are currently removing network calls from all classes and shifting them to a repository class at start. 

How do we proceed with this? We would love to know your feedback.
How does python handles " in a string when \ is not provided?
Tags: python, beginners, explainlikeimfive, help
Published: 2019-08-25 07:50:06

I am a beginner in python. I knew that " is a special character and needs \ to print it. But how does python handles " in a string when \ is not provided? For example 

```
s = "Google," "facebook"
print(s)
```

prints "Google,facebook". How does python skips the middle "?
LeetCode "13. Roman to Integer"
Tags: leetcode, python
Published: 2019-08-25 07:47:11

---
title: LeetCode "13. Roman to Integer"
published: true
description: Solution of LeetCode "13. Roman to Integer"
tags: [leetcode, python]
---

Umm...
How to remove a lot of`pos += 1` and `pos < len_str`

[13. Roman to Integer](https://leetcode.com/problems/roman-to-integer/)

```python
class Solution:
    def romanToInt(self, s: str) -> int:
        
        if not s:
            return 0
                
        pos = 0
        len_str = len(s)
        numOfDigits = 0
        symbols = ['dummy', ('I', 'V', 'X'), ('X', 'L', 'C'), ('C', 'D', 'M'), ('M')]
        s = s[::-1]
        value = 0
        
        while pos < len_str:
            num = 0
            numOfDigits += 1
                        
            # ex. I ... III, VI ... VIII
            if s[pos] == symbols[numOfDigits][0]:      
                num = 1
                pos += 1
                while pos < len_str and s[pos] == symbols[numOfDigits][0]:
                    num += 1
                    pos += 1
                if pos < len_str and s[pos] == symbols[numOfDigits][1]:
                    num += 5
                    pos += 1
                    
            # ex. V, IV
            elif s[pos] == symbols[numOfDigits][1]:
                num = 5
                pos += 1
                if pos < len_str and s[pos] == symbols[numOfDigits][0]:
                    num -= 1
                    pos += 1
                    
            # ex. IX, XC, M
            elif s[pos] == symbols[numOfDigits][2]:
                num = 10
                pos += 1
                if pos < len_str and s[pos] == symbols[numOfDigits][0]:
                    num -= 1
                    pos += 1
                    
            value += num * (10 ** (numOfDigits - 1))
                    
        return value
```
Resolve a Promise from outside, after return
Tags: promise, javascript, frontend, node
Published: 2019-08-25 07:45:32

---
title: Resolve a Promise from outside, after return
published: true
description: Resolve / reject a Promise from outside, after return
tags: Promise, JavaScript, Frontend, Node.js
---

Have you ever been at a situation where you wanted to resolve a Promise you returned from outside, when needed?

If so, this may help you. It's actually pretty simple and straight forward as shown below, but many of us wouldn't have thought of this.

{% codepen https://codepen.io/karthikaruna/pen/BaBWzrK default-tab=js %}