teleren/devto huggingface dataset:
Pandas' Classy Styler
Tags: python, pandas, styler
Published: 2020-08-30 20:31:23

I knew it could be faster, but I could not find a way of doing it...  Hang on, let me start at the beginning.

I have been working on a largish data set that gets pivoted down to something quite small.  About 20 rows by 30 columns.  Quite a bit of the data was empty and the figures were just integers.  I had to display it in a table, with one row and some rows showing up in yellow (the totals or running totals), and some cells (matching a non-visible criteria), in red.

I thought this was easy.  You pivot the table, get the Styler, apply formatting, once for the yellow rows and once for the red cells, and then you render the whole thing to HTML.  Easy... but apparently slow.

It must have been my apply statements that were slow (commenting them out made the render run much faster).  I managed to reduce the runtime down a bit by supplying a subset.  Not a big win, but something.

Next I figured the computation of the red cells were too slow, so I did it before hand, having an exact same-shaped DataFrame indicating which to format as red.  The apply for this part could then simply return the full DataFrame, pretty much as is (no computation required).  This did not lead to much of a performance improvement either.

I kept on bumping my head.  I looked at the output, and say *style* **a lot**.  I knew what I had to do...  I had to look at the actual code.

I started off my looking at the template.  This part shows that there are attributes and class.  Well, the class was there, but not what I needed it for.

[pandas/pandas/io/formats/templates/html.tpl (v0.23.x)](https://github.com/pandas-dev/pandas/blob/0.23.x/pandas/io/formats/templates/html.tpl)
`
...
<tbody> 
    {%- block before_rows %}{%- endblock before_rows %}
    {%- for r in body %} 
    {%- block tr scoped %}
    <tr> 
        {%- for c in r %} 
        {%- if c.is_visible != False %} 
        <{{ c.type }} id="T_{{ uuid }}{{ c.id }}" class="{{ c.class }}" {{ c.attributes|join(" ") }}>{{ c.display_value }}</{{ c.type }}>
        {%- endif %} 
        {%- endfor %} 
    </tr> 
    {%- endblock tr %}
    {%- endfor %} 
    {%- block after_rows %}{%- endblock after_rows %}
</tbody> 
...
`

And so it I.  I eventually tracked down a part where there is some mention of a class...  But I wasn't getting a class produced, just styling.  Class must be better than styling surely, so how do *I do that*?  I kept on looking at the code and come to the conclusion that nobody uses the *class* part of this code.  Wait... what...?  Nobody uses this?  Nobody uses this. Nobody. Uses. This.

What is *This*?  Well, it is seemed to be a same-shaped list of lists that tells the styler which class to use, if any.  If only there was a way of getting my pre-calculated styles into that variable before it being rendered.

One monkey-patch later, this thing produces cleaner HTML and *rendered* much faster.
Day 45: Interfaces in Typescript
Tags: 100daysofcode, typescript
Published: 2020-08-30 19:59:00

I wrote or rather ctrl + c and ctrl + v and Interface today. Which sparked my interest on understanding interfaces in typescript.

####What are Interfaces?
An interface defines the form in which an object takes. Take an example of a work contract, it defines the code of conduct. Having signed the contract you have to adhere to the code of conduct. Interfaces are similar to this you define the options/ properties of an object, so anytime you use this interface you have to adhere to the defined form.
####How do i create an interface?
```typescript
interface person {
  firstName: string;
  isSleepy: boolean;
}
```

####How do i use an interface?
You pass in a parameter with the type of our declared interface `me:person`. The parameter will contain the properties of your interface.
```typescript
const me:person = {
  firstName: Maggie;
  isSleepy: true;
}
//For a function
function myState(me: person){
  firstName: Maggie;
  isSleepy: true;
}
```
I really enjoyed Harry Wolf's video content:
{% youtube crjIq7LEAYw %}

I found interfaces really similar to classes, which gets me wondering, what is the difference between the two?

_Day 45_
What's new in the GitLab release: 13.2 ?
Tags: devops, opensource
Published: 2020-08-30 19:42:50

Excited for the new GitLab 13.2 features? Well, Web-based open-source DevOps lifecycle tool now supports the Agile streamlining and project management that aids issue tracking and collaboration.
Let’s sneak peek into its new ingredients!
Hear it out Scrum or XP teams, the iterations and milestones can now be assigned to associate an issue for more than one timebox. The Container Host Security that uses Falcon offers the security to its container at the host level.
The Figma plug-in for the design upload; Cluster health monitoring for system performance check, Epic Confidentiality on work items, Composer Repositories to check on the project dependencies and Feature Flag to view the project status and milestone details are some of the flashing features of the 13.2.
The integration with Jira throws light on workflow and facilitates collaboration. Before the application could be merged into the code, Load performance testing features customises the load. Stunning! Isn’t it a good integration option over a few Version Control Systems?
The complementary features that include the deployment of multiple Kubernetes Cluster and managing Application Logs in GitLab UI - Feather on the cap.
Your extensive use of .gitlab-ci.yml file in 12.10, 12.6 and 12.9 versions during the creation of release tags, the Extended Release evidence and Dynamic Child Pipelines; becomes a cake-walk by the 13.2 expansion through the use of 'release' keyword in the CI/CD files, incorporation of CI test results in its JSON file and configurable Jssonet data templating language respectively.
Improvements in Audit event, managing user credentials, bulk edition from the issue list, minimizing milestone section of the Roadmap and REST API support are few of the smooth feature extensions.
Cool facets like IBM z/OS Mainframe support and advanced global search make your 13.2 a better Agile project planning and management tool.
Getting a hang of 13.2 features isn’t tedious if you want to try Agile in an open-source DevOps tool, hence ​A must try Tool!​
DOM Manipulation
Tags: javascript, html, css
Published: 2020-08-30 19:31:18


In this task I was told to create a HTML Button and manipulate it with my javascript.
The button's initial text label is 0. After each click, the button must increment by 1. Recall that the button's text label is the JS object's innerHTML property.

####html 
           <html>
               <head>
                  <link rel="stylesheet" href="css/button.css" 
                  type="text/css">
                  <meta charset="utf-8">
                  <title>Button</title>
              </head>
             <body> 
               <button id='btn' >0</button>
               <script src="js/button.js" type="text/javascript"> 
               </script>
              </body>
        </html>

#### css 
         #btn{
               width:96px;
               height:48px;
               font-size:24px;
              }
#### js

     document.addEventListener('DOMContentLoaded', () => {
      const button = document.getElementById('btn');
    
     button.addEventListener('click', (e) => {
          const count = Number(e.currentTarget.innerText) + 1;
        
          e.currentTarget.innerText = count;
         });
       });
Leetcode - Valid Palindrome (with JavaScript)
Published: 2020-08-30 19:22:47

Today I am going to show how to solve the Valid Palindrome  algorithm problem.

Here is the problem:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/iqz2iot9tjbqm2i3cp45.png)

Let’s take a simple example and determine whether or not this string is a palindrome. A palindrome is a string that's written the same forward as backward.

 "abcdcba"

There are several ways to solve it. First, I’ll look at the simplest and most straightforward ways. 

We can build up a new string (newString += s[i]) that is going to be the reversed version of our input string. We then compare that new string to the input string to see if they are equal to each other. If they are equal, it means our input string is a palindrome. 

This solution will give us O(N) space and O(n^2) time complexity. We can improve the time complexity from O(n^2) to O(n) by using an array.

Instead of creating a new string, we can just store everything in an array. Then at the end, we can join all the elements of the array into one string and then do the comparison to determine if the string is a palindrome. 

We can improve this solution by  iterating through the string and using pointers. 

We can start with a pointer on the first letter and a pointer on the last letter. Then we compare the two. If they are equal to each other, we keep moving the pointers to the next letters until the pointers overlap. Then we return true, indicating that the string is indeed a palindrome. If they are not equal to each other, then we return false.

```javascript
var isPalindrome = function(s) {

    let leftIdx = 0;
    let rightIdx = s.length - 1;
    
    while(leftIdx < rightIdx){
        if (s[leftIdx] !== s[rightIdx]) return false
       
        rightIdx --
        leftIdx ++ 
        
    }
    return true
};
```

What do we do if a string has spaces or other symbols in it? 

"A man, a plan, a canal: Panama"

There is no inbuilt method in Javascript to determine if the specified character is a letter or digit. We could build a helper method to pass the string through. But I am going to use a different approach. Before iterating through the string, I am going to remove all spaces and symbols. by using the replace() method with regex. It takes two parameters, the string to be replaced and the string we are replacing it with.

NOTE: https://regexr.com/ is a good resource for learning and practicing regex expressions.

```javascript
var isPalindrome = function(s) {
    s = s.replace(/[^a-zA-Z0-9]/g,"").toLowerCase();
    
    let leftIdx = 0;
    let rightIdx = s.length - 1;
    
    while(leftIdx < rightIdx){
        if (s[leftIdx] !== s[rightIdx]) return false
       
        rightIdx --
        leftIdx ++ 
        
    }
    return true
};
```
74: Default 
Published: 2020-08-17 12:11:52

#**Math Matters** 
I set up the new default, used to be ONLY Vanilla Javascript! Now turned out to be the minimum skills solving math problems, Programming is drawing the logics, without operations, the computer does not work, To make a movement? There needs a fundamental operation 'ADD', 'SUBTRACT', 'MULTIPLE', 'DIVISION' 

-------------------------------
#**Problem-solving Skill, that's the real** 
This is my algorithm,
* Understand the problem
* Figure out the solution
* Identify the solution into Algorithm How? Following the grammar, The key point was applying 
* Add the creativity to make the mathematical expression

-------------------------------
#**The New Normal Math** 
The reason I kept my eye on the mathematics, I got taught by education really wrong ways, math was supposed to learning how important the process is, and I discovered that I don't have to know the knowledge, the point was visualizing the code with proofs, and talking about the solution in public! Coding has no answer, no certification, no hierarchy! All I need is to keep coding, and learning. I am happy to meet coding, one thing is only hard, facing problems and doing it again. 

-------------------------------
#**No matter I am a beginner** 
It does not matter how quick I solve problems, to reach the level of employable level presented me the real possibility, :) Perfectionism was the real harmful! Got a new motivation to be a mentor for someone, one day, as well. Again, this story belongs to me, not everyone, I hope this wouldn't generalize other cases, I would love writing about my personal story on Dev while coding!
Message Sessions In Azure Service Bus(FIFO Pattern).
Tags: azure, dotnet, csharp, beginners
Published: 2020-08-30 18:30:43

## Introduction:
In this article, we will discuss sessions in the Azure Service bus queue for absolute beginners. 

### What is Session in Azure Service Bus? 
Azure Service bus sessions ensure ordered handling of unbounded messages. Sessions are useful if your application demands an ordered message delivery (FIFO Pattern) or waits for a response after the message being delivered (Request-Response Pattern).

>
In this article, we'll be discussing FIFO Pattern.

### Problem:
Let's assume we're building an application where we'll send a series of messages which are related to each other and moreover the sequence how it will be received and processed is very important. Looks easy. But there is a catch. There might be multiple receivers. Now how we'll guarantee the sequential delivery and ensures that single receiver receives and process all messages of the series. Here is the representational image.

![Problem](https://dev-to-uploads.s3.amazonaws.com/i/8r35fc32ic5uitvert8u.jpg)


The Azure Service Bus is not prescriptive about the nature of the relationship between messages and doesn't define a model for determining where a message sequence starts or ends. 

### Solution:
By assigning same session id to each message of the series we can assure the sequential delivery of the messages. When using sessions the service bus queue creates another virtual sub-queue inside and ensure FIFO pattern.

![Solution](https://dev-to-uploads.s3.amazonaws.com/i/bctqeq5zxzzrfnmhe1xr.jpg)

When the receiver receives one message it holds an exclusive lock on all messages with the received messages session-id that exists in the queue. That exclusive lock will be held till the last message of that session received. 

Following are a few important points about sessions:
* Sessions are not available for Basic price tier. 
* Once session is enabled for a queue,  normal sending and receiving of messages won't be available in that queue. Every message should be sent and received with a session lock. 


### Conclusion: 
There are many more features of Azure Service bus and session is one of them. I will be coming up with more articles about the rest of the features. 
>
Watch this space for a code file link.

Useful articles related to Service Bus:
* [How to Send and Receive messages through Azure Service Bus Queue using .Net Core Client.] (How to Send and Receive messages through Azure Service Bus Queue using .Net Core Client.)



Cover Image Courtesy: <span>Photo by <a href="https://unsplash.com/@scottwebb?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Scott Webb</a> on <a href="https://unsplash.com/s/photos/bus?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
JavaScript Object-Oriented
Tags: flatironschool, jsproject, jsoo, javascript
Published: 2020-08-30 18:11:56

Ok friends, let's start from the beginning right? What is object-oriented programming?

The idea behind Object-Oriented programming is that you create a blueprint for the look of your "object" and call it over and over again to do whatever you want with it. Sounds helpful right? Well, it is. Every time you want to use an object, you must first create it so that it exists, and then configure its properties to use the attached functionalities. These functionalities are known as 'methods'. For example, a User object may have a get user details (in the form of a method) functionality attached. As you can see in theory is a really clear idea. 

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

When you start learning JavaScript the structure used to create "methods" are functions. In a function-based structure, most of the time, you will need to inject a dependency into the function for it to work. The problem with the above becomes that if you were to expand the number of functions, this can soon be quite tricky. Although initially, it seems much easier to write everything as functions and call it as needed. <i> Actually, that was my game plan for me JS project. If you're new at JavaScript I would suggest starting written your code like this and ones you feel confident in your code to move to classes and JSOO. Just a suggestion!</i>

But... why we need an Object-Oriented structure in JavaScript if a simple function would work just as fine? Well, when you think around classes rather than a series of interconnected functions, you are <strong>reducing the risk and scope of failure if it occurs</strong>. That's because every dependency injection creates a <strong>potential point of failure and as a programmer, we DON'T WANT OR NEED THAT!</strong>. Not only is it time-consuming to track functions, but it is even more time and mental cost if you have to do it a dozen times for exactly the same thing. 


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

OOP in JavaScript can decrease the mental load and potential spaghetti relationships inherent in function-based programming. The more you learn and the more applications you build it's pretty easy to notice that JavaScript-based front-ends and back-ends apps grown in both size and complexity. When the structure of the code is easily understandable, it reduces the possibility of errors, making it easy to add new functions without breaking everything around it and that's the real beauty of JavaScript Object-Oriented Programming. 

Thank you for reading! :)
Liman MYS 1.3 Sürüm Duyurusu
Tags: liman, management, opensource, linux
Published: 2020-08-30 18:10:08



HAVELSAN tarafından geliştirilmekte olan Liman MYS 1.3 sürümü 30 Ağustos 2020 tarihinde Mert ÇELEN tarafından duyuruldu.

# Değişim Günlüğü
Liman'ın eklentileri tamamen core'dan ayrılarak yeni bir Go diliyle yazılmış servise aktarıldı. Bu go servisi ile Liman içerisindeki tüm eklentiler artık çok daha hızlı ve verimli çalışırken, bu servislerin çoğaltılması sağlanarak yük dağılımı ortamı hazırlandı.
Yeni servisin kaynak kodlarına https://github.com/limanmys/renderer adresinden ulaşabilirsiniz.

# Hata Düzeltmeleri
Kısıtlı mod içerisindeki görseller iyileştirildi.
map - Array Function
Published: 2020-08-30 18:02:48

The map function creates a new array populated with the results of the calling function.

```
const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

Syntax :

let new_array = arr.map(function callback( currentValue[, index[, array]]) {
    // return element for new_array
}[, thisArg])

callback  - a required function which takes in currentValue, index, the array as parameters
currentValue  -  required parameter. This is the current value of the item in the array
index  -  optional parameter. This is the index of the item that is selected
array  -  optional parameter. This is the array on which map function gets executed.
```

the map function is called for each item in the array, such that the result is returned as a new processed item as per requirement.

###Mapping an array of numbers to an array of square roots

```
let numbers = [1, 4, 9]
let sum = numbers.map(function(num) {
    let add = 5;
    add += num
    return add;
})
// sum is now     [6, 9, 14]
// numbers is still [1, 4, 9]
```

###Using map function to reformat objects in an array

```
let kvArray = [{key: 1, value: 10}, 
               {key: 2, value: 20}, 
               {key: 3, value: 30}]

let reformattedArray = kvArray.map(obj => {
   let rObj = {}
   rObj[obj.key] = obj.value
   return rObj
})
// reformattedArray is now [{1: 10}, {2: 20}, {3: 30}], 

// kvArray is still: 
// [{key: 1, value: 10}, 
//  {key: 2, value: 20}, 
//  {key: 3, value: 30}]
```

###Mapped array contains undefined

```
let arr = ["We", "Are", "Bros", 4]
let filteredArr = numbers.map(function(item, index) {
  if (index < 3) {
     return item
  }
})
// index goes from 0, so the filterNumbers are 1,2,3 and undefined.
// filteredArr is ["We", "Are", "Bros", undefined]
// numbers is still ["We", "Are", "Bros", 4]
```
WebSockets
Tags: feynman, websockets, webdev
Published: 2020-08-30 18:00:59

# WebSockets

WebSockets are a way for 2 computers to talk with each other. To see why WebSockets are useful, let's first look at HTTP requests.

HTTP requests are a common way for computers to talk with each other. One computer, which we'll call the *client*, **requests** information from the other computer, which we'll call the *server*. The server **responds** back to the client with information. We call this the **request/response cycle**.

<img src="https://raw.githubusercontent.com/newyork-anthonyng/feynman-technique/master/websockets/http.jpg" width="500">

Notice how the server can only respond to requests from the client. If the server has something interesting to tell the client, it has to wait for the client to ask them about it. Consequently, if the client wants to know when the server has an interesting update, the client needs to keep making requests to the server. We call this polling.

<img src="https://raw.githubusercontent.com/newyork-anthonyng/feynman-technique/master/websockets/polling.jpg" width="500">

Polling is a work-around for a fundamental problem with HTTP requests; servers can't send information to the client unless the client requests it. WebSockets solve this.

WebSockets creates a permanent connection between the client and server. The client can send messages to the server through this connection. More importantly, the server can send messages to the client whenever it wants. It doesn't even need a request.

<img src="https://raw.githubusercontent.com/newyork-anthonyng/feynman-technique/master/websockets/websockets.jpg" width="500">

What are some use cases where you want to use WebSockets rather than HTTP requests?

* Does your application have messages that are frequently sent?
> ie: A stock market application may need to send multiple events per second for stock prices.

* Does your application need to maintain a connection for a long time?
> ie: A chat application needs to stay connected to send and receive messages.
How to Master my skills ?
Tags: html, css, javascript
Published: 2020-08-30 17:57:44

Hello Everyone! I am very new to coding. I want to become a self taught web developer. The thing is I have learnt HTML & CSS from many sources and currently I am learning Javascript. But before going in depth with Javascript and other stuff I want to master my skill in HTML and CSS. 
The main problem starts here whenever I am starting to build something I am getting stuck with like where to start and what should I do.
Please help me with this😔