teleren/devto huggingface dataset:
PivotTable.js in .Net Core Razor Pages - Tutorial (With Some More Javascript)
Tags: dotnet, javascript, tutorial, pivottable
Published: 2019-12-06 19:34:07

*This tutorial appeared on my personal blog.* https://mydev-journey.blogspot.com/2019/12/pivottablejs-in-net-core-razor-pages.html

Being a former accountant, and my current projects also serving business processes, I find that Pivot Tables are a must in any application of this kind. I struggled without them but now I found a solution, using an Open Source Javascript Library.

I already implemented some of the functionality in one of my projects, but I have to admit that it was a little bit hard, that's why I want to help by showing this example.

Prerequisites for this tutorial:
1. intermediate javascript;
2. basic .Net Core Razor pages knowledge (recommended reading list: https://mydev-journey.blogspot.com/2019/11/razor-pages-not-for-shaving.html
3. study briefly the documentation of pivottable.js, take the simple one: https://pivottable.js.org/examples/simple_ui.html;
4. clone the official repo https://github.com/nicolaskruchten/pivottable
5. my previous tutorial on ChartJS, has a very similar approach and result, and might be a learning step towards this more advanced tutorial: https://mydev-journey.blogspot.com/2019/12/chartjs-tutorial-with-aspnet-core-22.html
6. Repo on Github for this project, to try it:
https://github.com/zoltanhalasz/PivotTableJS


Steps to follow if you want to do it yourself:

A. Create .Net Core Web App (default, razor pages)

B. download pivot table repository from point 4.
Then take the pivot.js and pivot.css files and copy them under the newly created pivot folder in wwwroot.

C. take my _LayoutPivot file and use it instead of the default generated _Layout file from Shared. My _LayoutPivot file will contain all proper references to jquery and pivot.js. Then include it in the _ViewStart file, like :     Layout = "_LayoutPivot";

D. Create InvoiceModel Class, with Json Properties Annotation, this is the main entity for the listing.

E. Create InvoiceService Class which will be injected in the constructor of Index page class. (and set up in Startup.cs).

F. The index cshtml page will just iterate through the list of invoices retrieved by the service and display them.
The backend part in PageModel class will be comprised of:
1. the OnGet function - prepare the data to display
2. the other function - OnGetInvoicePivotData - will pass the JSON array to the javascript fetch in the page.

G. The scripts in the index.cshtml page: below the list of invoices you can find:
1. the pivot - javascript code - retrieving the list using fetch and then giving it to pivotUI function, as per documentation mentioned above.
2. an export to excel (code from stack overflow- how to export an html table to excel from javascript), tailored to export our pivot table.

H. Final result should display as below, showing the list and the pivot table also, together with the Export button:
![PivotImage](https://thepracticaldev.s3.amazonaws.com/i/ltzhfmnlmhvhp368ikby.jpg)
Paper as a Platform
Tags: discuss, webdev, css, html
Published: 2019-12-06 19:19:52

---
title: Paper as a Platform
published: true
description: Sure it's static, but people may want to print something from your site. How do you approach paper?
tags: discuss, webdev, css, html
cover_image: https://thepracticaldev.s3.amazonaws.com/i/i4ax6i6cs3v6mgm1pbjy.jpg
---

The past couple of weeks, I've been printing articles from blogs, newspaper sites, magazine sites, and a few course description pages from a few colleges.

And now it just hit me how great some of the experiences have been and how poor others have been. Images, margins, advertising, footers, etc. Some pages remove, resize, and re-emphasize exactly the right things for it to look great on the printed page.

Most of the time I'm thinking about digital platforms: web, mobile, desktop (the odd kiosk now and again). But anyone could choose to print from a website, moving it from the digital platform to the paper platform.

# Discuss

How do you approach designing and implementing for paper UX?
Awesome API tools
Tags: api, apitools, opensource, testing
Published: 2019-12-06 18:21:56

---
title: Awesome API tools
published: true
description: 
tags: #API, #apitools, #opensource, #testing
---
A Curated collection of useful awesome API tools that you can test your API

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/1wzflfrpae8sra07vk9c.jpg)

# API TOOLS LIST

* [Postman](https://www.getpostman.com) - Postman is a good choice for API testing for those who don’t want to deal with coding in an integrated development environment.
* [Postwoman](https://postwoman.io) - Postwoman is API request builder
* [Postlify](https://postlify.netlify.app) - Postlify is a web based API request builder, built with ReactJs.
* [Assertible](https://assertible.com/) - Continuously test and monitor your APIs after deployments and across environments.
* [Pyresttest](https://github.com/svanoort/pyresttest) - YAML based REST testing and API microbenchmarking tool
* [OWASP Zaproxy](https://github.com/zaproxy/zaproxy) - A tool to test your API for known security vulnerabilities, with a great CI integration

# Repo url : 
https://github.com/elangosundar/awesome-api-tools
Tips for Succeeding with Microservices?
Tags: architecture, discuss, microservices
Published: 2019-12-06 17:43:03

---
title: Tips for Succeeding with Microservices?
published: true
description: How do you successfully manage microservice complexity?
tags: architecture,discuss,microservices
---

The microservices tradeoffs are very real, not just technically but also organizationally.

If you are developing within a microservices architecture, what are some gotchas and other tips for working day-to-day with this design that others should know?
Contact form with animated feedback
Tags: ux, css, javascript, webdev
Published: 2019-12-06 17:41:41


##SVG interactions to improve your UX with UI

Animations are the best way to bring life to our websites: they help us tell stories and communicate what is happening at that moment. They naturally catch our attention so it’s important to learn how and when to apply them. If we use animations in the right way, we can improve our website’s usability, if we abuse them we can ruin the user experience.

In this article we’ll show an example of interactive animations, the ones that appear right after the users take an action and can help them notice the results.

A good case for using SVG interactions are form validations. We can let the user know what is happening at the time they interact with the inputs. This is an example that you can find at our [Leniolabs](https://leniolabs.com/) website.

![Interaction with contact form](https://miro.medium.com/max/3268/1*XPFw4In3bxandeYGJGhXRA.gif)

In this example we need both inputs to be filled. As soon as the user types any letter the green check icon will confirm that the input is valid. This is a small interaction that we can achieve by adding the `required` HTML5 attribute to our text `input` or `textarea` like this:

```html
<input type=”text” name=”name” id=”name” aria-required=”true” autocorrect=”off” required>
```

In CSS we use the selector + pseudo-class: `input:valid` or `textarea:valid` with a SVG in the background that will show only when the element is valid:

```css
input#name:valid, textarea:valid {
 background: white url(‘data:image/svg+xml,\
 <svg xmlns="http://www.w3.org/2000/svg" width=”26" height=”26">\
 <circle cx=”13" cy=”13" r=”13" fill=”%23abedd8"/>\
 <path fill=”none” stroke=”white” stroke-width=”2" d=”M5 15.2l5 5 10–12"/>\
 </svg>’) no-repeat 98% 5px;
 border: 3px solid $lightgreen;
 transition: background ease 0.2s;
}
```

When adding an inline SVG in CSS is important to use the namespace `xmlns=”http://www.w3.org/2000/svg"` or the image won’t be displayed.

The transition of the background will make the SVG move from its initial position to 98% to the right, as defined in the background shorthand in CSS.

In JavaScript we can check those validations and add a class to the form (and the SVGs) when both fields are completed, and another class if at least one input is empty. Each class will bind to a CSS animation: one will make the form shake and the envelop fall out of the *Send* button; the other one will make the envelop fly directly to the mailbox and the red flag will be up.

```javascript
document.getElementById(‘sendBtn’).addEventListener(‘click’, function (e) { 
 if (submitName[‘0’].validity.valid && submitText[‘0’].validity.valid) {
 e.preventDefault();
  message.classList.remove(‘not-active’);
  message.classList.add(‘active’);
  mailbox.classList.add(‘active’);
 }
 else {
  message.classList.add(‘not-active’);
  formshake.classList.add(‘active’);
 }
});
```

Here is the complete code:
{% codepen https://codepen.io/marianab/pen/xywxNg %}
What personal blogs would you recommend?
Tags: discuss
Published: 2019-12-06 17:41:30

---
title: What personal blogs would you recommend?
published: true
description: 
tags: discuss
---

I'm looking for more reading from personal blogs, these are the current ones I read:

https://www.oaktreecapital.com/insights/howard-marks-memos

http://www.docbastard.net

https://meltingasphalt.com

http://paulgraham.com/
Why Are There So Many Javascript Frameworks, And How Do I Choose The Best One?
Tags: explainlikeimfive, javascript, frameworks, beginners
Published: 2019-12-06 17:32:30

<p> For the most part, I've mostly programmed in backend develppment, but in an effort to move towards my goal of becoming  Full Stack Developer, I've started to teach myself Javascript. I want to eventually learn  a Framework as well, but I'm a little intimidated by the sheer number of Javascript Frameworks in existence right now. Can anyone shine some light on how to pick up the proper Javascript Framework to work with? Are there any Frameworks that are better for Python/C++/PHP backend? </p>
Day 3 - JavaScript Engine - Learning Node JS In 30 Days [Mini series]
Tags: node, javascript, codenewbie
Published: 2019-12-06 17:23:37

Today’s topic is __‘JavaScript Engine’__

__Why we need JavaScript engine ?__

Because computer is not smart enough to understand JavaScript without JavaScript engine

So, JavaScript engine work as a middle man to make computer understand the JavaScript

__So what is the purpose of JavaScript engine ?__

Make the JavaScript codes into machine/binary codes

__Some JavaScript engines__

V8 by Google for Chrome(most used)

SpiderMonkey by Mozila for Firexof

JavascriptCore by Apple for Safari

Chakra by Microsoft for Microsoft Edge

Hemes engine by Facebook for Android apps

See the full list in https://en.wikipedia.org/wiki/JavaScript_engine

__What is V8 ?__

V8 is an open-source JavaScript engine developed by The Chromium Project for Google Chrome and Chromium web browsers. The project’s creator is Lars Bak. The first version of the V8 engine was released at the same time as the first version of Chrome: September 2, 2008. (Wikipedia)

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/7382h7v74yg3q7hspr8w.png)

__So how v8 works?__

We write codes
It goes to v8
finally v8 changes it to c++
c++ changed into assembly language
finally assembly to machine codes


__Are you feeling tired after all these information ?__

One tricky question for you then, if every company can make their own version of engine then they should not make it in their way right ? Why same JavaScript codes works on all browser in a same way ?

Tired of searching answer ?

Because everyone follow __‘ECMAScript’__. This is standardized for writing JavaScript engine!

Originally it published on [nerdjfpbblog](https://blog.nerdjfpb.com/day3-nodejsin30days/) and graphical version on [instagram](https://www.instagram.com/p/B5vTb4ogyqq/). you can connect with me in [twitter](https://twitter.com/nerdjfpb) or [linkedin](https://www.linkedin.com/in/nerdjfpb/) !
Day21:Compute md5, sha256 and hmac - 100DayOfRust
Tags: rust
Published: 2019-12-06 17:01:23

### Cargo.toml

```
[dependencies]
rust-crypto = "^0.2"
hex = "^0.4"
```

### main.rs

```rust
use crypto::mac::Mac;
use crypto::digest::Digest;
use crypto::md5::Md5;
use crypto::sha2::Sha256;
use crypto::hmac::Hmac;
use std::fs;

fn main() {
    let content = fs::read_to_string("main.rs").unwrap();
    let mut md5hasher = Md5::new();
    md5hasher.input_str(&content);
    let hash = md5hasher.result_str();
    println!("md5 is {}", hash);

    let mut sha2hasher = Sha256::new();
    sha2hasher.input_str(&content);
    let hash = sha2hasher.result_str();
    println!("sha256 is {}", hash);

    let mut hmacor = Hmac::new(Sha256::new(), "key".as_bytes());
    hmacor.input("this is a string".as_bytes());
    let hash = hmacor.result();
    println!("hmac is {}", hex::encode(hash.code()));
}
```

Result
```
md5 is 86f3786c855da3d6a5aa226a86a95f15
sha256 is e05e040cae828af17ab37b351e322dd31faaf7aee9eb8829e7a025fb0b5e3871
hmac is 64bf374b05b1611beecbd917c75954975384c022964e7b30d5501e6c4846a6ff
```
My Experience doing fun ( stupid ? ) stuff with Python
Tags: python, learnings, tutorial, telegram
Published: 2019-12-06 16:42:17

# My Experience doing fun ( stupid ? ) stuff with Python & JS - Part I

### Subtitle : How I learned to love Rust & Clojure

So, the last fortnight was nice. I tried to implement a bunch of stuff in Python & JS, and in the process, learned a few important things about both languages. I'll list below what I tried and what I learned :

## Part Une : Python

![https://www.pyinstaller.org/_images/pyinstaller-draft2b-windowed.png](https://www.pyinstaller.org/_images/pyinstaller-draft2b-windowed.png)

So Telegram had a Data Clustering contest going on : [https://contest.com/docs/data_clustering](https://contest.com/docs/data_clustering) , where users were supposed to create binaries for a CLI-based app, which would perform a set of operations akin to Data Science on a certain dataset.

They recommended using C/C++, since performance was a factor. However, I chose Python, thinking 'since Python was already popular in Data Science applications, why not choose that ?'. Following this train of thought, I was not wrong, burning through the various operations was a breeze in Python. However, the part where I would get stuck is in building the binaries ( a very essential step here ).

I tried using PyInstaller, but try as I may, the library wouldn't make my binary run at all. I would keep running into some weird import issues ( hidden imports ). The solutions I tried were :

1. Add hidden imports from CLI. But, multiple hidden imports couldn't be added this way.
2. Create a spec file and write my hiddenimports there. PyInstaller kept overwriting my spec file.
3. Add hidden imports using a hook. PyInstaller refused to detect my hook.
4. Import hidden imports directly. This solution worked but my whatthelang import broke. I gave up at this point.

You can follow my past adventures here : [https://github.com/akash-joshi/telegram-cluster](https://github.com/akash-joshi/telegram-cluster)

## Conclusion Une : Don't F*ck with Python ( when you want to build binaries )

A naive conclusion I draw from this is not to use Python when I want to form binaries. I looked at C/C++ but they don't have functional conveniences like the map & reduce combinator, which I'm a huge fan of : [https://www.youtube.com/watch?v=uM--v7XS5IY](https://www.youtube.com/watch?v=uM--v7XS5IY)

Rust does support these functional concepts, so that is a lang which I would probably choose in the future, in case a contest with a binaries requirement pops up.

However, [pkg](https://www.npmjs.com/package/pkg) is something I want to experiment with too.
3 best-read resources in Svelte Status #18
Tags: svelte, javascript, typescript, frontend
Published: 2019-12-06 16:41:40

---
title: 3 best-read resources in Svelte Status #18
published: yes
description: Weekly curated blogs and tools for Svelte developers. 
tags: svelte, javascript, typescript, frontend
---

<img src="https://miro.medium.com/max/1168/1*lbeVlYyU70DvcwEZfTSlBQ.png" />

<h3><strong><a href="https://www.reddit.com/r/reactjs/comments/e43l6w/rich_harris_implements_the_round_react_demo_with/">1. Awesome-svelte-resources: Svelte v3+ utility</a></strong></h3>

<p>Several people have asked me to make a @sveltejs version of this interesting demo that's doing the rounds, which purports to show how fast React can be with 'scheduling'. Let's take a look! <i>By Rich Harris.</i></p>

<h3><strong><a href="https://dev.to/zev/how-does-svelte-actually-work-part-1-j9m">2. How does Svelte actually work? — Part 1</a></strong></h3>
<p><strong>10 minutes —</strong> I’m writing a course that uses Svelte (and FastAPI and other snazzy things) and realized I could use some deeper knowledge of how Svelte operates. Specifically, how the code works that Svelte compiles to. I’ll post my insights as they come about, so this is part 1 of x. <i>By Zev Averbach.</i></p>

<h3><strong><a href="https://dev.to/collardeau/lazy-loading-images-in-svelte-1mk6">3. Lazy loading images in Svelte</a></strong></h3>
<p><strong>4 minutes —</strong> A technique I recently implemented for a painter’s portfolio website that I built using Sapper. <i>By Thomas Collardeau</i>.</p>

<h2><strong>About Svelte Status</strong></h2>
<p><a href="https://getrevue.co/profile/svelte">Svelte Status</a> is a mailing consisting of the latest blogs and tools curated for Svelte pros. I’m <a href="https://github.com/marlosin">Marlos</a>, your curator, working from the Netherlands to help building a cloud platform for front-end developers that is called Jexia.</p>
<br></br>
<p>Do you have a question, feedback or you want to notify me about a recent blog for Svelte devs? Reach out to me via marlos at sveltestatus.com. </p>
Ruby CSV Creator
Tags: ruby, csv, api
Published: 2019-12-06 15:58:24

I created this based on an API call that I parsed in the format of an array of hashes, like the example, in order to quickly generate a csv file for uploading.

{% gist https://gist.github.com/Brandongoodman615/42c0c1ee38ec1df0f0a698f05fe4044f %}

https://gist.github.com/Brandongoodman615/42c0c1ee38ec1df0f0a698f05fe4044f
Giving Thanks for Diversity in Tech: Marcy Sutton
Published: 2020-01-15 20:41:06

---
title: Giving Thanks for Diversity in Tech: Marcy Sutton
published: true
date: 2019-12-06 15:52:44 UTC
tags: 
canonical_url: https://www.thisdot.co/giving-thanks-for-diversity-in-tech-marcy-sutton
---

![image-5-sq-crop](//images.ctfassets.net/zojzzdop0fzx/4tS1oUJsJ0po2UYrKEyMSn/4d105693106be335f09efeac412b7fcd/image-5-sq-crop.jpg)

Marcy Sutton is a Washington State based web professional, currently serving as the Head of Learning at Gatsby. 

She is an O'Reilly Web Platform Award recipient who is passionate about web accessibility, having spoke this year at A11yTO, Smashing Conf NYC, Gatsby Days London, An Event Apart Chicago, and Clarity Conf. But her advocacy is not limited to just speaking- she is also heavily involved with A11ySea (Seattle Area Accessibility & Inclusive Design). 

For Marcy, inclusion does not only motivate her web accessibility focus, but also her interest in supporting other women in tech. She is an organizer with NW Tech women, and is a former chapter leader with Girl Develop, where she learned a lot about prioritizing the most vulnerable, and building organizations that support more than the status quo of white women.

When asked about what inclusion means to her, she shared that, “Inclusion means creating spaces where everyone feels welcomed: this means taking feedback on ways to improve, and anticipating diverse needs to help everyone have a good experience at work and events.”  

When Marcy isn’t working on one of the world’s leading web building technologies, or traveling the world speaking about web accessibility, among other topics, she loves snowboarding, riding her bicycle, and camping in the mountains in her “beefy” off-road van!

Having spent much of her free time speaking over the past 6 years, Marcy is taking a break for the time being.  She urges anyone who would like to hear her speak to check out her [Frontend Masters](https://frontendmasters.com/workshops/javascript-accessibility/) accessibility course, which is approved for continuing education credit for IAAP accessibility accreditation!

Would you like to keep up with Marcy in the coming year?  You can do so by checking out her Twitter [@marcysutton](https://twitter.com/marcysutton)!
3 best-read blogs of Go Gazette #85
Tags: go, backend, grpc, docker
Published: 2019-12-06 15:48:32

---
title: 3 best-read blogs of Go Gazette #85
published: yes
description: Weekly curated blogs and tools for Golang developers. 
tags: go, backend, grpc, docker
---

<img src="https://miro.medium.com/max/1176/1*Thrw_Pl00rpTl2sTSBTC2A.png" />

<h3><strong><a href="https://sagikazarmark.hu/blog/getting-started-with-go-kit/">1. Getting started with Go kit</a></strong></h3>

<p><strong>8 minutes —</strong> Go kit is often accused of being too complex, compared to other libraries used for building applications. This post ought to explain the differences between them and demonstrate the thought process of building an application with Go kit. <i>By Márk Sági-Kazár.</i></p>

<h3><strong><a href="https://ieftimov.com/post/testing-in-go-dependency-injection/">2. Testing in Go: dependency injection</a></strong></h3>
<p><strong>6 minutes —</strong> Let’s code through an example in Go and see how dependency injection can help us out. <i>By Ilija Eftimov.</i></p>

<h3><strong><a href="https://research.swtch.com/vgo-principles">3. The principles of versioning in Go</a></strong></h3>
<p><strong>28 minutes —</strong> Russ Cox about how his team added package versioning to Go, in the form of Go modules, and the reasons behind its choices. <i>By Russ Cox.</i>.</p>

<h2><strong>About the Go Gazette</strong></h2>
<p><a href="https://www.getrevue.co/profile/golang-jexia">The Go Gazette</a> is a mailing consisting of the latest blogs and tools curated for Golang pros. I’m <a href="https://github.com/veger">Maarten</a>, your curator, working from the Netherlands to help building a cloud platform for front-end developers that is called Jexia.</p>
<br></br>
<p>Do you have a question, feedback or you want to notify me about a recent blog for Golang pros? Reach out to me via maarten at go-gazette.com.</p>
3 best-read blogs in Up & Running Weekly #48
Tags: kubernetes, docker, opensource, devops
Published: 2019-12-06 15:39:30

---
title: 3 best-read blogs in Up & Running Weekly #48
published: yes
description: Weekly curated blogs and tools for DevOps, SRE and I&O professionals. 
tags: kubernetes, docker, opensource, devops
---

<img src="https://miro.medium.com/max/1162/1*rGevqJN2j0a3ePPyV5DOMQ.png" />

<h3><strong><a href="https://servicemesh.io/">1. The Service Mesh: all you need to know</a></strong></h3>

<p><strong>20 minutes — </strong>What each engineer should know about the most over-hyped tech. <i>By William Morgan.</i></p>

<h3><strong><a href="https://kubernetes.io/blog/2019/11/26/running-kubernetes-locally-on-linux-with-microk8s/">2. Running Kubernetes locally on Linux with Microk8s</a></strong></h3>
<p><strong>5 minutes —</strong> Microk8s is the click-and-run solution for deploying a Kubernetes cluster locally. <i>By ihor dvoretskyi.</i></p>

<h3><strong><a href="https://blog.picnic.nl/from-monolith-to-microservices-9b2ef44401e3">3. From Monolith to Microservices</a></strong></h3>
<p><strong>6 minutes —</strong> If the decision is made to move to a microservices-based architecture, there is one primary requirement that needs to be fulfilled beforehand: Having an agile work environment in place. <i>By Jakob Löhnertz.</i></p>

<h2><strong>About Up & Running Weekly</strong></h2>
<p><a href="https://www.getrevue.co/profile/cloud-architecture">Up & Running Weekly</a> is a mailing consisting of the latest blogs and tools curated for DevOps pros. I’m <a href="https://github.com/snedi">Denis</a>, your curator, working from the Netherlands to help building a cloud platform for front-end developers that is called Jexia.</p>
<br></br>
<p>You have a question, feedback or you want to notify me about a noteworthy blog? Reach out via denis at upandrunningweekly.com.</p>