teleren/devto huggingface dataset:
Echo Go - Template Rendering
Tags: go, echo, webdev
Published: 2020-09-13 01:41:44

Essentially parsing and rendering template proccess is not to handle with echo but handle with API from package html/template. So way render template in echo is same like a real applications used go.

# PRACTICE
Ok so to make it easier to understand go to practice right now and create file main.go on your text editor.

First step, we need import package html/template, io, and echo.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/64k70ks94qzqaifksaer.JPG)

Create struct Renderer, this struct have a 3 property and 2 method.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vu05ytplnayme01ln1fb.JPG)

Here`s the assignment and explanation of the third property above.

- Property .template accountable for parsing and rendering template.
- Property .location direct to path folder when file template stand.
- Property .debug relocate type a bool.

Next, create function NewRenderer() for easier inisialitation objek renderer.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mwqhtnezear1arr13lni.JPG)

Create 2 method for struct Renderer is .ReloadTemplates() and .Render()

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dj6kbznee8xi6qifro26.JPG)

Next, create echo router, override property and create a route.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h8kg1b4p5f3s4vuh3w8w.JPG)

When we call newRenderer() used ./*.html to lead for all html file in current folder. Create index.html

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hogke14d9t89orwpfyg8.JPG)

# Testing

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/icclaeg8y830sptm9i9g.JPG)

Finally! Try at home.
Ready Set() Go
Tags: javascript, uniqueness, uniquelist
Published: 2020-09-14 14:29:45

During our recent mod2 project we ran into an issue of needing to return a unique list while using Javascript. After doing a little research we were able to discover the world of Set(). Set() was very useful in that it allows you to create a collection of items that are unique. 

We were able to assign a variable to new Set(), which creates an empty set. Then using set().add(value) we were able to add a unique list of values to a collection. Conveniently Set() returns this new list as an object. Once you have this object you are able to use forEach in order to iterate through your object and apply specific functions. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fgcb7j1nbr8cy4jsiyf1.png)

Set() also has a few other uses. You are able to delete elements from the collection in one of two ways. You can either use set().delete(value) which will return a boolean response regarding whether or not the value was deleted. Alternatively you can use set().clear in order to clear the entire collection, which will return an undefined value.

This is merely brushing the surface of the functionality while using Set(). I highly recommend doing a little research if you find yourself in need of a unique list while using javascript!
10 Amazing Best Practices And Tips For Flutter Development
Tags: flutter, mobileapps, technology
Published: 2020-09-14 14:28:27

Nearly 2.96 million apps on google play store and 2.2 million apps available on Apple’s app store. From these numbers, it is clear that mobile app development has become a need of the hour for all sizes of businesses of all domains. With the rapidly changing business sector and increasing competition, it has become difficult for all-level enterprises and startups to survive in the competitive market without having mobile applications for their business.

You can also know the reasons of- Why Flutter is setting the trend in mobile app development?

Flutter can make it more comfortable for new businesses to roll out with the feature rich mobile application without spending more money. And it will be more easy and effective if you know the best practices and tips of Flutter. If you’re thinking to develop a new flutter app for business, then this blog is just for you. Let us discuss the best practices and tips of flutter.

#Best Practices And Tips For Flutter Development-
**1. Naming convention-**
Extensions name, classes, enums and typedefs should be in UpperCamelCase.

class MainScreen { … }
             enum MainItem { .. }
             Typedef Predicate<T> = bool Function(T value);
             Extension MyList<T> on List<T> { . . . }
Libraries, packages, directories and source files name should be in snake_case(lowercase_with_underscores).

library firebase_dynamic_links;
import 'socket/socket_manager.dart';
Variables, constants, parameters and name parameters must be in lowerCamelCase.

var item;
 Const bookPrice = 3.14;
Final urlScheme = RegExp('^([a-z]+):');
void sum(int bookPrice) {
// …
}

**2. Specify types for class member-**
Always specify the type of member when it’s value type is known. Avoid using var when possible.

//Don’t 
    Var item = 10;
    Final car = Car();
    Const timeOut = 2000;

//Do
Int item = 10;
Final Car bar = Car();
String name = ‘john’;
Const int timeOut = 20;

**3. You can declare multiple variables with shortcut-**
Know more at- [https://solaceinfotech.com/blog/10-amazing-best-practices-and-tips-for-flutter-development/]
Use custom Emoji as a cursor using CSS 😜.
Tags: tutorial, css, emoji, webdev
Published: 2020-09-14 14:13:47

So lately I have been impressively busy to get my head around and write a complete article 😂 but I found a funny solution while wasting the time I don't have on twitter and I wanted to share it with you.

Using plain CSS you can set the cursor using the property `cursor` https://developer.mozilla.org/es/docs/Web/CSS/cursor, normally you'll set values like `pointer` for links and clickable components, `progress` to indicate a loading state.

This was a pretty trendy long time ago in those awesome '90s websites, but if you want to give it a funny stroke to your site you can use `cursor: url();`. For this, we will use SVG as with data URIs just. like this:

```xml
<img src="'data:image/svg+xml;utf8,<svg ... > ... </svg>'" />
```

If we add the emoji (of course I will use the unicorn one 🦄 for the example) inside of the svg tag, it will render it as the cursor pointer. So you will end with something pretty similar:

```css
.unicorn-cursor {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🦄</text></svg>")
      16 0, auto;
}
```

Here is the result so you guys can check it out and play

{% codepen https://codepen.io/alvarosaburido/pen/GRZWadL default-tab=js,result %}

That's all folks

![Dancing](https://miro.medium.com/max/1400/1*yjl4_CG_kE5QAjrClnygOw.gif)
Subject - RxJS in Angular
Tags: angular, javascript, typescript, rxjs
Published: 2020-09-14 14:05:02

### **An RxJS Subject is a special type of Observable that allows values to be multicasted to many Observers.**

While plain Observables are unicast (each subscribed Observer owns an independent execution of the Observable), Subjects are multicast. A Subject is like an Observable, but can multicast to many Observers.

## **Real Scenario,**

**Let's Suppose,** We have a component that is showing **updated messages**, and this component is **reusable** and used in 3 to 4 parent components, and we want to make this in a way that it will get synced to everywhere to show updated messages as soon as it received. so in these type of situations **Subject - RxJS** comes in where syncing involved.

Create a new service:
```javascript
// message-service.service.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class MessageService {

  public message = new Subject<string>();

  constructor() { }

  setMessage(value) {
    this.message.next(value);
  }
}
```
1 of the Parent component, where the above service is used, so every time a **new message** is entered, all the **parent components** who subscribed this service will get the **updated message** in all parent components:
```html
<!-- home.component.html -->

<input type="text" name="message" id="message">
<input type="button" value="Send" (click)="setMessage()">
```

```javascript
// home.component.ts

import { MessageService } from 'services/message-service.service';

constructor(
    private messageService: MessageServiceService
  ) { }

ngOnInit() {
    this.getUpdatedMessage();
  }

getUpdatedMessage() {
    this.messageService.message.subscribe(
      res => {
        console.log('message', res);
      }
    )
  }

setMessage() {
    let message = (<HTMLInputElement>document.getElementById("message")).value;
    this.messageService.setMessage(message);
  }
```

**That's All Folks ;)**
Nvidia Acquires Arm
Tags: news, nvidia, hardware
Published: 2020-09-14 14:04:31

---
title: Nvidia Acquires Arm 
published: true
description: Nvidia announced they are acquiring Arm for $40 billion.
tags: news, nvidia, hardware
//cover_image: https://direct_url_to_image.jpg
---

Nvidia announced they are acquiring Arm for $40 billion. As reported on The Verge:

>> Nvidia said Sunday it is acquiring chipmaker Arm from SoftBank for $40 billion. Arm will operate as an division of Nvidia and will remain headquartered in the UK, and, will “continue to operate its open-licensing model, while maintaining its global customer neutrality,” the company said. But the deal is still likely to face intense regulatory scrutiny.

>> SoftBank bought Arm in 2016 for $31 billion. The British company’s intellectual property helps power mobile device processors for companies including Apple, Samsung, and Qualcomm. Arm has likely only increased in value since the SoftBank acquisition, with Microsoft making an Arm-based Surface and a version of Windows for Arm, and Apple planning to switch future Macs to Arm-based chips.

>> Nvidia is the leading maker of GPUs, which Arm also designs, but other than its Tegra line of mobile chipsets used in devices like the Nintendo Switch, Nvidia doesn’t do much in the way of CPU design or mobile hardware.

Read the [full story](https://www.theverge.com/2020/9/13/21435507/nvidia-acquiring-arm-40-billion-chips-ai-deal).
Spell Checking in VIM
Tags: linux, vim, tutorial, codenewbie
Published: 2020-09-14 14:01:35

## Spell Checking in VIM

I recently discovered this neat feature that VIM have. So basically you can do a spell check on your document from within vim. You don't even need a plugin for this. It is a built in feature.

YouTube Tutorial : [ VIM built in feature: Spell checking ](https://www.youtube.com/watch?v=pqBS9TtZIBA)

For this all you need is this command 
```
:set spell!
```

After running this command if everything goes well words that vim thinks are incorrectly spelled will be highlighted in some way. 

Now once the command is called, you can do certain things. And of course vim has some nice keybinding for them.:

## Jump to highlighted word
You can jump to these highlighted words easily. 
  * go to next word `]s`
  * go to previous word `[s]`

## Correct spelling 
To see the suggestions for correct spelling press `z=`. Then choose the number from shown list. Followed by enter.

## Good words and Wrong words
So vim for spell checking has a list of **Good words**. This list contains all the words that are regarded as spelled correctly. You can even add new words to this list. For this type `zg` and to undo this `zug`

Similarly vim has a **Wrong word** list. They are treated as misspelled. And again you can add new words to this list with `zw` and undo with `zuw`. So that from next time these words will be highlighted as well.

Note: Try not to keep a word in both good and wrong list. It is either good or bad; noting in between.

![Alt Text](https://ik.imagekit.io/18dkv5g43j/Blog/vim-spell/spell2_8xtjzfkRE.gif)
UI Dev Newsletter #22
Tags: html, css, javascript
Published: 2020-09-14 13:40:10


- [Writing even more CSS with Accessibility in Mind, Part 1: Progressive Enhancement](https://bit.ly/3merMrP)
Manuel Matuzović describes how to use progressive enhancement to write more accessible CSS code.

- [CSS Images Module Level 4: the image() notation](https://bit.ly/2Zx454m)
The image-set() function allows an author to provide multiple resolutions of an image and let the UA decide which is most appropriate in a given situation.

- [Using the brightness() CSS Filter to generically highlight Content](https://bit.ly/3hpQqSI)
Rick Strahl describes how to use the CSS brightness filter to highlight content without having to specify a specific color value.

- [70% Repetition in Style Sheets: Data on How We Fail at CSS Optimization](https://bit.ly/2GWvOoJ)
Jens Oliver Meiert explains how what it means to know how many declarations you use in your style sheets and how many of those declarations are unique.

- [How CSS Perspective Works](https://bit.ly/3ix92BS)
Amit Sheen explains all about CSS perspective, from how it works to how to use it to create 3D animations.

- [How to Choose the Right Website Fonts](https://bit.ly/3iugcGI)
Lucy Turner shows how you can choose fonts that are right for your website.

- [Beautiful CSS box-shadow examples](https://bit.ly/3hscqMX)
A collection of real-world examples of beautiful CSS box-shadow examples.

- [Lighthouse recommends smaller libraries](https://bit.ly/2Fwfev4)
Addy Osmani introduces Lighthouse's feature, which recommends smaller libraries that improve bundle size.

Happy coding!

[Subscribe to the newsletter here!](https://mentor.silvestar.codes/reads#newsletter)
“Big-O Algorithms” Course Released
Tags: cryptography, go, languages, release
Published: 2020-09-18 13:11:39

---
title: “Big-O Algorithms” Course Released
published: true
date: 2020-09-14 13:09:04 UTC
tags: Cryptography,Golang,Languages,Release
canonical_url: https://qvault.io/2020/09/14/big-o-algorithms-course-released/
---

 ![Big-O Algorithms Course](https://qvault.io/wp-content/uploads/2020/09/Mastery-300x300.png "Mastery")

The post [“Big-O Algorithms” Course Released](https://qvault.io/2020/09/14/big-o-algorithms-course-released/) first appeared on [Qvault](https://qvault.io).

We’ve launched our new _[Big-O Algorithms](https://app.qvault.io/)_ course! We wrote this course for engineers who need a refresher on computer science basics, or want to learn the fundamentals for the first time.

The study of algorithmic complexity is often overlooked by new developers, and we’ve found that get-rich-quick boot camps often skimp on these details. It’s impossible to become a senior developer without being familiar with the concepts in this course, so we figured it was high time we published it.

[Get Started](https://app.qvault.io)

## What’s Included?

The course has three modules covering the following topics:

- Big-O intro and mathematics overview
- Sorting algorithms and implementations
- Complexity theory – P vs NP

We are already planning a sequel to this course, so keep an eye out for that. The sequel will cover data structures and how they play a major role in popular algorithms.

## Coding?

![golang gopher slice literal](https://qvault.io/wp-content/uploads/2020/06/Go_Lang_Gopher.jpg "Go Lang Gopher")

Coding projects in this course are all written in Go (Golang)! If you aren’t familiar with Go yet, take our [Go Mastery](https://qvault.io/go-mastery/) course. It’s a growing language and is becoming a cornerstone of back-end and DevOps engineering. All coding assignments and quizzes, as usual, are completed right in the browser. We pride ourselves on keeping our content engaging and all in one convenient place.

If you want to take a deeper look at the course details, you can do so on its page [official page here](https://qvault.io/big-o-algorithms/).

## Thanks For Reading!

Follow us on Twitter [@q\_vault](https://twitter.com/q_vault) if you have any questions or comments

Take some [coding courses on our new platform](https://app.qvault.io)

[Subscribe](https://mailchi.mp/5c7f5c281bbe/qvault-newsletter-subscribe) to our Newsletter for more programming articles
NOT NOT, Not Working As Expected
Tags: javascript, webdev, beginners, development
Published: 2020-09-14 13:38:18

---
title: NOT NOT, Not Working As Expected
published: true
description: Recently with a client, I found myself fighting for over an hour to understand why an IF-BLOCK failed to fire correctly when it should have passed. Then, I realized I was dealing with TRUTHY operations.
series: JavaScript Tips
tags: JavaScript, WebDev, Beginner, Development
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/vvei8fjcsqma4zmuprxb.png
---

First, NOT NOT ...

The single `!` converts a value to its truthy or falsey value, which is technically a boolean. But if you need to a real boolean representation of a value for your expression you must convert it to a real boolean value using a double not, `!!`.

In my head, I could see the conversion. I hear myself evaluating it as "does this object exist." Knowing that was wrong, I still dug into the code to find out why things were breaking in other areas.

Here's a simple example of the faulty (logic) code.

```javascript
const data = { params: { type: '' } };

if (!!data.params && !!data.params.type) {
  // do something here
}
```

This code refused to go inside the IF-BLOCK.

After digging into the console, I realized ...

```javascript
!!data.params
// true

!!data.params.type
// false
```

What I quickly realized is that I got bit by a simple logic issue. An empty string equates to `false`, while a string with something in it equates to `true`.

A better set of logic would have been to use the `IN` operator.

```javascript
const data = { params: { type: '' } };

if (('params' in data) && ('type' in data.params)) {
  // do something here
}
```

Then, the inner code for the IF-BLOCK would have worked properly.

Another method that can be used is the `hasOwnProperty` method ...

```javascript
const data = { params: { type: '' } };

if (data.hasOwnProperty('params') && data.params.hasOwnProperty('type')) {
  // do something here
}
```

Generally, I prefer the first of the two solutions. To me, this seems more readable, but that's my preference.
Today I Learned: Remove Kth Node from the End of a Single Linked List
Tags: python, algorithms, webdev, beginners
Published: 2020-09-14 13:34:49

# Problem Statement
Write a function that takes in the head of a single linked list and integer k which represents the kth node to remove from the end of the linked list. 

# Sample Input
```
head = 0 -> 1 -> 2 -> 3 -> 4 -> 5 -> 6 -> 7 -> 8 -> 9
k = 4
```

# Sample Result

```
# node 6 is removed
0 -> 1 -> 2 -> 3 -> 4 -> 5 -> 7 -> 8 -> 9
```

# Code #1

```python
class LinkedList:
    def __init__(self, value):
        self.value = value
        self.next = None


def remove_kth_node_from_end(head, k):
    ptr_1 = head
    ptr_2 = head
    ctr = 0
    
    # Move ptr_2
    while ctr < k:
        # Return early if k is longer than list's length
        if ctr < k and ptr_2 is None:
            return
        ptr_2 = ptr_2.next
        ctr += 1
    
    # Check if removing the first element on the list
    if ptr_2 is None:
        head.value = head.next.value
        head.next = head.next.next
        return head
    
    while ptr_2.next is not None:
        ptr_1 = ptr_1.next
        ptr_2 = ptr_2.next

    # Remove kth node from end
    ptr_1.next = ptr_1.next.next
    return head
```

# Notes
* Since this is a single linked list, we cannot traverse to the end of the list and then trace back the kth node. 
* Utilize two pointers to track the beginning and the end node of the linked list. 

# Credits
* Algoexpert for the problem statement
* [Chris Leipelt](https://unsplash.com/photos/TcFq4-ulczU).
Daily Challenge #291 - Extended Weekend
Tags: challenge
Published: 2020-09-14 13:34:15

---
title: Daily Challenge #291 - Extended Weekend
published: true
series: Daily Challenge
description: Find all extended weekends in a range of time!
tags: challenge
//cover_image: https://direct_url_to_image.jpg
---
If the first day of the month is a Friday, it is likely that the month will have an Extended Weekend. That is to say, it could have five Fridays, five Saturdays and five Sundays.

In this Kata, you will be given a start year `a` and an end year `b(1000 <= a <= b <= 275760)`. Your task will be to find months that have extended weekends and return:

The first and last month in the range that has an extended weekend
The number of months that have extended weekends in the range, inclusive of start year and end year.
If, there is no Extended Weekend, just return `["","",0]`.

###Example
```solve(2016,2020) = ("Jan","May",5). 
The months are: Jan 2016, Jul 2016, Dec 2017, Mar 2019, May 2020```

###Tests
```
solve(2016,2020)
solve(1900,1950)
solve(1800,2500)
solve(1000,275760)
```
Good luck!

***
_This [challenge](https://www.codewars.com/kata/extended-weekends-challenge-edition) comes from myjinxin2015 on CodeWars. Thank you to [CodeWars](<https://codewars.com/>), who has licensed redistribution of this challenge under the [2-Clause BSD License](<https://opensource.org/licenses/BSD-2-Clause>)!_

_Want to propose a challenge idea for a future post?  Email **yo+challenge@dev.to** with your suggestions!_
Drive Webpage Changes with Figma
Tags: figma, design, nocode, ui
Published: 2020-09-14 13:30:36

A couple weeks back I finally had a chance to mess around with the newest version of the [Figma API](https://www.figma.com/developers/api). I put together this little demo for internal-[Theorem](https://www.theorem.co/) knowledge-sharing.


{% youtube gVuflWLGaqY %}


Basically, I designed a quick landing page in [Figma](https://www.figma.com/), coded out that design to a live page but synced up the styles, images, text, etc to the Figma document. This way, as a user makes changes to the landing page they will see their changes reflect on the live web page, responsiveness and all!

Obviously, it would be a pretty bad idea to use this as-is in production (because of slow loading, SEO, security, etc). However, this experiment has given me a taste of some of what could be possible by harnessing the power of Figma and their API so I wanted to share! Enjoy!
How JavaScript Event Delegation Works
Tags: javascript, webdev
Published: 2020-09-13 14:54:11

Event delegation allows you to avoid adding event listeners to specific nodes;  instead, the event listener is added to one parent.

For Example - Let's say that we have a parent UL element with several child elements:
```
<ul id="parent-list">
	<li id="post-1">Item 1</li>
	<li id="post-2">Item 2</li>
	<li id="post-3">Item 3</li>
	<li id="post-4">Item 4</li>
	<li id="post-5">Item 5</li>
	<li id="post-6">Item 6</li>
</ul>
```
Now something needs to be done when li element is clicked one way is to attach event listener to all the li elements but what if LI elements are frequently added and removed from the list?  Adding and removing event listeners would be a nightmare, especially if addition and removal code is in different places within your app. 


The better solution is to add an event listener to the parent UL element.  But if you add the event listener to the parent, how will you know which element was clicked?

Simple:  when the event bubbles up to the UL element, you check the event object's target property to gain a reference to the actual clicked node.

Javascript snippet 

```

// Get the element, add a click listener...
document.getElementById("parent-list").addEventListener("click", function(e) {
	// e.target is the clicked element!
	// If it was a list item
	if(e.target && e.target.nodeName == "LI") {
		// List item found!  Output the ID!
		console.log("List item ", e.target.id.replace("post-", ""), " was clicked!");
	}
});

```


Hopefully this helps you visually the concept behind event delegation and convinces you of delegation's power!