teleren/devto huggingface dataset:
Python type case demystified
Tags: camel, pascal, snake, case
Published: 2020-05-15 05:40:53

Aren't you always bugged by review comments asking to rename a variable in the right casing? Or just curious why all functions in python are in snake case? Well lets jot down all the cases we have and understand how and when we use it according to [PEP8 standard](https://www.python.org/dev/peps/pep-0008/). PEP8 standard suggests a set of rules for these cases and is universally accepted and followed.



## 1. PascalCase 
Case where every word is capitalized. Used in json file tags or keys of a dictionary or dataframe columns or class names but never should it be used to name variables or functions.
Examples:
```json
{
    "Name" : "Abcd",
    "Age": 25
} 
```
```python
# Dictionary
{'Banana': 'Yellow', 'Apple': 'Red'}
# Pandas dataframe
df['BandwidthReported'] = df['Bw'] * 100.
``` 



## 2. camelCase
Case where all words except the first word is capitalized. In python, all the variables should use camelCase.
Examples:
```python
totalCostOfTrips = numOfDays * expensesPerDay

# Naming dictionaries
fruits = {'Banana': 'Yellow', 'Apple': 'Red'}

# When you access the contents of fruits you will use camelCase for the
# variable and Pascal case for the key
print(fruits['Banana'])
``` 



## 3. snake_case
Case where each word is separated by '_' i.e. underscore, you should always use snake case for function names.
 Example:
 ```python
 def hello_world():
    print("Hello World")
 ```  




## 4. CAPTIAL_SNAKE_CASE 
This case is used only for constants in your functions or class. So any const in python should be named with all capitals and underscore between the words.
Example: 
```python
MILLISECONDS_TO_SECONDS = 1000
VERSION = 2.0
```



## Bonus topics
Also all variable and functions which are not exposed and are only for internal use should be named with a leading `_`, like when using function decorators.
```python 
def two_square(a, b):
    def _square(x):
        return x * x;
    return _square(a) + _square(b)
```

Or in case of function decorators
```python
# Function decorator to time the function call, this decorator can be used for any function.
import time
def timeit(foo):
    def _func(*args, **kwargs):
        startTime = time.time()
        foo(*args, **kwargs)
        endTime = time.time()
        print(f'Time taken to execute: {endTime - startTime} second')
    return _func

@timeit
def two_square(a, b):
    def _square(x):
        return x * x;
    return _square(a) + _square(b)

# Call the function normally
two_square(3, 4)
```
Function decorators use *args and **kwargs, to know more about these read my other article [here](https://dev.to/varunvk/what-are-args-and-kwargs-in-python-bak)
VS Code April 2020 Release Highlights Video
Tags: discuss, vscode, javascript, webdev
Published: 2020-05-13 16:45:17

---
title: VS Code April 2020 Release Highlights Video
published: true
description: Highlights of some of the latest features found in the April 2020 release of Visual Studio Code.
tags: discuss,vscode,javascript,webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/wf7bbz2d32ybiunfebrd.png
series: vscode-release-2020
---

## April 2020 VS Code Release
You can read through the [release notes](https://code.visualstudio.com/updates/v1_45?WT.mc_id=devto-blog-brcl) to find out more about them or watch this video to see some of the highlights from it.

{% youtube J2k18Q7wrK0 %}

### Features Highlighted

- [Semantic Token Styling](https://code.visualstudio.com/updates/v1_45?WT.mc_id=devto-blog-brcl#_semantic-token-styling)
- [Switch Tabs using Mouse Wheel](https://code.visualstudio.com/updates/v1_45?WT.mc_id=devto-blog-brcl#_switch-tabs-using-mouse-wheel)
- [New JavaScript Debugger (Preview)](https://code.visualstudio.com/updates/v1_45?WT.mc_id=devto-blog-brcl#_new-javascript-debugger)
- [Accessibility Improvements](https://code.visualstudio.com/updates/v1_45?WT.mc_id=devto-blog-brcl#_accessibility)


What's your favorite feature or improvement in this month's release? Share it below 👇
CSS Annotations for Dynamic Styling
Tags: css, angular
Published: 2020-05-13 16:24:13

Consider this code:

```typescript
      ...
      let css = `
           content:"21:appGrid:columns";
           display:grid;
           grid-template-columns: ${this.columns};
           grid-column-gap: ${this.columnGap};
          `;
      if(this.rows){ 
         css = `
           content: "28:appGrid:rows";
           display: grid;
           grid-template-rows: 14em 1fr;
         `;
      }
      //this is where we set style dynamically
      this.htmlElement.setAttribute("style", css);
```

We are dynamically injecting a style to a particular HTMLElement. It allows us to pass in parameters etc. But what is the content: tag doing?

Did you know that [content: tags](https://www.google.com/search?q=css+content) are only applied to [psuedo-css class elements](https://www.google.com/search?q=pseudo+css+elements)? 

We are hijacking this behavior to use the content: tag to annotate our dynamic content. The only requirement is that we don't use this with pseudo elements. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9tv6wkc1zwfbmn1659jo.jpg)

We now know that this dynamic style, was injected via javascript; coming from line 28: of our appGrid code, in the 'rows' part. It gives us a toehold to find the root cause of an injected style issue.

JWP2020
Do you know what a virtual list is?
Tags: javascript, typescript, programming, algorithms
Published: 2020-05-13 21:09:35

---
title: Do you know what a virtual list is?
published: true
description: 
tags: javascript, typescript, programming, algorithms  
---

One of first learning segments I am working on is about virtual lists, what they are, why we use them, and how to create your own from scratch!

Before we can get to building something, or choosing a solution (like a virtual list), we should first have a problem where we need the thing we are building.

Lots of optimizations come with a cost. Optimizations aren't always more performant, even though the name "optimization" gives the illusion that it is. The other cost is the abstraction or sometimes confusing code you'll have to maintain this new optimization.

When building applications, its only a matter of time before you are asked to render large data sets to the screen. To use a concept we all know, imagine you had to create Twitter. Twitter has an endless amount of tweets you can scroll through. Now imagine what that can do to the performance of the browser or your non browser application. To scroll through tweets, you need to put these tweets in render all of these tweets to the screen. Eventually you will hit a problem where your first render will be expensive since you would have to render thousands of tweets.

The "simple" solution, introduced to the web in the early 2000s, would be to only render what could fit on the page, and ajax more once you hit the bottom of the page. This is a technique that combines a backend that can paginate requests, and client code that knows when to request more data and render it.

Virtual lists can work in this way as well, but it is a bit smarter. Not only will a virtual list only render what could be visible, but it will remove items from the screen as you scroll away from them, where the user would never see them anyway. This helps with memory, animations, and overall better user experience when done correctly.

Want to build one from scratch so you can understand this concept fully? [Subscribe to our newsletter and be one of the first readers to learn how to build one](https://weekend.dev/signup/)!
Deno 1.0 is out!
Tags: javascript, deno, news
Published: 2020-05-14 00:13:56

{% twitter 1260701643311583234 %}

## Disclaimer

**Don't panic**. Node isn't going anywhere.

## What is Deno?

From [deno.land](https://deno.land/):

Deno is a simple, modern and secure runtime for JavaScript and TypeScript that uses V8 and is built in Rust.

- Secure by default. No file, network, or environment access, unless explicitly enabled.
- Supports TypeScript out of the box.
- Ships only a single executable file.
- Has built-in utilities like a dependency inspector (deno info) and a code formatter (deno fmt).
- Has a set of reviewed (audited) standard modules that are guaranteed to work with Deno: deno.land/std

## But why!?

From Ryan Dahl:

JavaScript has changed significantly since Node was designed in 2009. Notably:

- Promises / Async / Await
- ES Modules
- Typed Arrays

Node has problems:

- A poorly designed module system, with centralized distribution.
- Lots of legacy APIs that must be supported.
- Security

(These problems aren't unique to Node. Python and Ruby suffer similary)

Ryan Dahl's HolyJS talk

{% youtube HjdJzNoT_qg %}

## Installation

Using shell

```bash
curl -fsSL https://deno.land/x/install/install.sh | sh
```

Using homebrew

```bash
brew install deno
```

## Getting Started

A sample http server

```javascript
import { serve } from "https://deno.land/std@0.50.0/http/server.ts";
const s = serve({ port: 8000 });
console.log("http://localhost:8000/");
for await (const req of s) {
  req.respond({ body: "Hello World\n" });
}
```

Blog post: https://deno.land/v1

{% youtube 3Vl8a3zYjiw %}
Launching the Big O Visualizer
Tags: computerscience, react, typescript
Published: 2020-05-14 02:15:54

Last month I launched the Big O(omicron) Visualizer on [https://omi.cr](https://omi.cr). This tool provides a framework for analyzing the performance of algorithms by making its run time complexity visual in an appealing graph.

![Time complexity of sorting algorithms on a random list of numbers](https://dev-to-uploads.s3.amazonaws.com/i/tf52ur4difrfyvxeuq05.png)

I came up with the idea for this project while doing a refresher on Computer Science fundamentals. A typical exercise followed the format: "Given problem statement X, implement an algorithm Y. What is the time complexity of Y? Can it be improved? If so, what is the best time complexity possible?". These questions are straightforward for simple or well-known algorithms, but when things get more exotic and there are a lot of moving parts involved, it can become quite hard to reason about an algorithm's time complexity. It was during this process that I had the thought of analyzing an algorithm's complexity by measuring its actual runtime behavior. And thus, the Big O(micron) Visualizer was born.

Being a pet-project, I picked a fresh stack of modern and exciting frameworks and technologies I wanted to familiarize myself with. The most notable technologies used in this project are [React](https://reactjs.org/), [Gatsby](https://www.gatsbyjs.org/), [TypeScript](https://www.typescriptlang.org/) and [Highcharts](https://www.highcharts.com/). This project was initialized using a popular Gatsby starter [LekoArts/gatsby-starter-minimal-blog](https://github.com/LekoArts/gatsby-starter-minimal-blog), which emphasizes typography and has minimal aesthetics. [whawker/react-jsx-highcharts](https://github.com/whawker/react-jsx-highcharts) serves as the glue between Highcharts and React, making it easier to create charts that respond to things happening inside the website.

# Feedback

If you have any questions or ideas, then please direct them at me by [opening an issue on the project's GitHub repository](https://github.com/MartinDevillers/omicron/issues/new/choose). All feedback is welcome!

# Thank you

* [Lennart/LekoArts](https://www.lekoarts.de/) for making such cool [Gatsby themes](https://github.com/LekoArts/gatsby-themes)
* [Will Hawker](https://github.com/whawker) for making [React JSX Highcharts](https://github.com/whawker/react-jsx-highcharts)
* [Kyle Jensen](https://www.kylejensen.dev/) for making [javascript-algorithms](https://github.com/kylejensen/javascript-algorithms)
* [Marco Ziccardi](https://mziccard.me/) for making [Node-TimSort](https://github.com/mziccard/node-timsort) and of course [Tim Peters](https://en.wikipedia.org/wiki/Tim_Peters_(software_engineer)) the original creator of [TimSort](https://en.wikipedia.org/wiki/Timsort)
“RxJS Cheatsheet” VS Code extension
Tags: rxjs, vscode, cheatsheet, showdev
Published: 2020-05-18 14:21:43

This post was originally published on [my blog](https://dzhavat.github.io/2020/05/18/rxjs-cheatsheet-vs-code-extension.html).

---

So, I’m back with another VS Code extension! 🚀

I’m really excited to share [“RxJS Cheatsheet”](https://marketplace.visualstudio.com/items?itemName=dzhavat.rxjs-cheatsheet). 🎉

Here’s a demo:

![Demo](https://dev-to-uploads.s3.amazonaws.com/i/onpl1okct1oo39wib1ia.gif)

[Learning RxJS isn’t easy](https://mobile.twitter.com/BenLesh/status/1260332868234022914). There are Observables, operators, Subjects, subscriptions, marble diagrams, etc, which can be quite hard to understand when first starting out. Thankfully, there are many resources for learning RxJS. They are all great. Use them. This extension is yet another resource. It’s available right in your code editor and its purpose is to give you quick information about RxJS related stuff.   

While it’s really fun working on the extension, I think it’s wise to test it with real users as early as possible. Therefore I’ve decided to publish a very minimal version in order to get feedback from the community.

In this first version, you’ll see only a handful of Observable-creation functions and operators. I’ve tried to include the most frequently used. Each item contains information about the import path and a marble diagram. There are other things worth including but I’ve kept those for later.

After installing the extension, you can open it by running the “Open RxJS Cheatsheet” command.

If you work with RxJS give it a try and let me know what you think. All ideas and suggestions for improvements are welcome! 🙂

I hope you will find it useful!
4 Best Online Collaboration Tools For Remote-Teams
Tags: productivity, collaboration, webdev
Published: 2020-05-14 12:30:39

If you are looking to improve business processes and workflows, a great starting point is online document collaboration! And, one way to boost the whole process is by using a collaboration tool.

[Online collaboration tool](https://blog.bit.ai/best-online-collaboration-tools/) makes it easy for companies to simultaneously manage projects and smoothen the flow of information throughout the organization. Say goodbye to shoulder tapping and clogged email and Slack threads! There are many [benefits of collaboration as well](https://blog.bit.ai/benefits-of-collaboration/) such as workplace productivity, improved engagement, etc!

The most common online collaboration tools these days are web-based, so that work never stops wherever your team is located around the world.

##[Bit.ai](https://bit.ai/)
One of the most powerful and feature-rich tools on this list is Bit. A new age, a cloud-based collaboration tool that helps teams create, manage and track documents.

Bit allows teams to create [workplace documents](https://blog.bit.ai/workplace-collaboration/) like- project proposals, sales decks, training documents, how-to guides, company policies, process documentation, media kits, fact sheets, competitive research, case studies, e-books, etc. and provides a safe and robust place to store these documents.

##[Asana](https://asana.com/)
Asana is another online task management platform available for the users that is similar to Trello in quite a few ways.

It offers a board that displays all the tasks that are currently assigned and when each assignment is due. The board is common to all the members so that everyone can see the status of other tasks.

##[NowBridge](nowbridge.com)
NowBridge is one of the more unique online collaboration platforms available today. Instead of providing team members with a standard board, NowBridge tries to create the illusion of being in a room with other team members.

NowBridge exchanges still images of members who are remotely working on the same project. This allows members to check who is available in real-time.

##[Wrike](https://www.wrike.com/)
Wrike is a project collaboration tool that gives teams an overview of project status and the team’s productivity.

Users also can create Gantt charts, edit tasks, and work with their teammates. Wrike lets teams break down substantial work into smaller pieces so that each task can be completed on time.
Announcing the ReactEurope Remote Hackathon 2020
Published: 2020-05-14 13:25:50

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

We're super excited to announce the ReactEurope Remote Hackathon 2020.

Because it is remote, we will be able to run it for a few days to let you write quality projects.

It will start on Sunday 17th May at 11am until Wednesday 20th 6pm Paris time (UTC+2).

Each participant will need to:
- Register here https://bit.ly/RE2020HackathonRegistration
- You can form teams of up to 3 or do it on your own
- Create a react app that makes use of [KendoUI](https://www.telerik.com/kendo-react-ui/) or [AWS Amplify](https://aws.amazon.com/amplify/) (or both)
- Create a repository on github
- Provide a public a url to check a live demo
- Send us the public url and repository url on a google form https://bit.ly/RE2020Hackathon
- that's it! You can start coding right away! Nothing else needed.
- The winner will demo at 6pm on the 20th of May on our Youtube channel on the 20th

We will pick a few finalists that will demo on our youtube channel and get a chance to win a free ticket for next year conference as well as a few extra prize from our sponsors Progress and AWS Amplify.


Please join our #hackathon channel on discord to participate!

https://bit.ly/re2020discord

The good folks from Progress Kendo React will be there to answer your questions.



![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5f0fy4p7fbgm5fv00f6a.png)
How about an AWS Lambda Spot with 70% savings?
Tags: aws, awslambda, serverless
Published: 2020-05-14 13:39:38

---
title: How about an AWS Lambda Spot with 70% savings?
published: true
description: Would you enjoy having a Spot version of Lambda serverless functions with 70% savings? Like and share this article to spark a discussion around it
tags: aws, aws-lambda, serverless
---

A couple of days ago I published this tweet:

{% twitter 1260296325456891905 %}

Some people confused my idea saying that Lambda is already Spot. I understand the position they come from. Lambda only charges per usage, it's not 'rented'.

But the idea I have for Spot is the situation when AWS has idle servers lingering around their data centers, in which they incentivize low-value workloads by lowering prices. Low revenue is better than nothing in those cases.

Workloads that wouldn't be cost-effective to run on EC2, become interesting on Spot instances.

Spot has particularities:

* AWS can terminate the instance at any moment (when someone else is willing to pay more for it), so your workload must be super fault-tolerant;
* We can bid how much we'd like to pay for each workload, so we'll use the Spot instances only when the price is low enough;

The same could happen for Lambda. We store invocations in a particular queue and integrate it with a Lambda Spot, setting a price per invocation and per GB-seconds. When the price is low enough, the Lambda platform will start pulling messages and processing them.

Under the hood, Lambda runs on Firecracker, which runs on EC2 instances. What we need is a Firecracker running on Spot Instances. They could go away on a snap, which would halt all Lambda executions, but that's fine.

Leave your suggestions in the comments. Like :heart: the article if you like the idea :bulb:
Fish Shell + Deno | Command Line
Tags: deno, fish, Commandline, software
Published: 2020-05-14 17:35:15

### TLDR; This is a short tutorial on how to set up and use Deno with the Fish shell. NOTE: I am using a Macbook, I am not sure how to fix it on other OS.

Today, I wanted to try Deno for the first time, but I also use Fish as my main shell for the Command Line and I got this error after executing `deno`

`fish: Unknown command: deno`

The way I solved it was to go into the fish config files:
`~/.config/fish/config.fish`

and add the following lines:
`set -x DENO_INSTALL /Users/YOUR_USER/.deno`
`set -x PATH $DENO_INSTALL/bin:$PATH`

then just `source ~/.config/fish/config.fish`

After that you will be able to execute Deno in the command line using Fish Shell. Any errors after that, might be related to Deno’s shell or missing flags when running it.

Thanks for reading this short how-to post and feel free to share it.
Chrome Screenshot Specific Element
Tags: chrome, screenshot, devtools
Published: 2020-05-15 06:39:59

Did you know Chrome developer console comes with a whole hidden Command menu?

Well, I didn't know till a while ago, and it comes packed with cool features.

Today we are looking into making a screenshot of a specific element with it.

## How to Screenshot a specific element

- Inspect the element you wish to screenshot
- Press Cmd + Shift + P | Ctrl + Shift + P to open the Command menu
- Type `Screenshot` within the menu
- Select the `Capture node screenshot` to capture the selected element.

[View on Youtube](https://www.youtube.com/embed/axZu4wW6WR4)

Wow, I hope your as excited about this hidden menu as I am.

<iframe width="560" height="315" src="https://www.youtube.com/embed/axZu4wW6WR4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Low-code For Payroll Software Development
Tags: programming, lowcode, tutorial, 1c
Published: 2020-05-15 08:25:39

The payroll system is often the most complicated piece of software in a company. Its complexity is due to the periodic calculations that distinguish payroll from other business application tasks. It is periodic calculations that make it challenging to build payroll software without low-level programming. Nevertheless, it is possible to accelerate the development of such applications significantly.

Read more in our medium article. 
https://medium.com/1c-developer/low-code-for-payroll-software-development-f77444d9d3ad
Would you translate technical terms in non-English interview?
Tags: discuss, webdev, career
Published: 2020-05-15 08:49:55

---
title: Would you translate technical terms in non-English interview?
published: true
description: 
tags: discuss, webdev, career
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/29h0qdngegfzn9n9rnn4.jpg
---
This post is targeted mostly on people living outside English speaking countries, but everyone could give their input.

Lets say you live in Germany and go to technical on-site interview.
The interview process will most likely lead to 3-way dilemma:

* The interview will most likely be held in your country's official language (which is German in your case)
* All the documentation and other sources you have every browsed to get knowledge were mainly written in English (with exceptions in very active communities)
* The technical terms might not always translate between languages

Obviously, you would not translate names like React, Node, CSS, etc.
But what about technical terms like 'design patterns', 'library', 'framework', 'hosting', 'package managers', 'rendering', 'back-end', 'module bundlers', etc?

Would you try to translate them to something equal in German or would you stick with English, when mentioning them?