teleren/devto huggingface dataset:
I build a thing - writer mode for VSCode
Tags: vscode, extension
Published: 2019-04-01 10:15:16

---
title: I build a thing - writer mode for VSCode
published: true
description: 
tags: vscode, extension
---


# Why

So I build the thing called writer mode - why? I really like using VSCode for both my
coding and writing in markdown. There is zen mode but I wanted a little bit more than
full screen and no sidebars. That's why I created write mode.

# What

What exactly is writer mode? I see it as a zen mode with additional features to make
writing better experience in visual studio code. Besides activating zen mode I've added
larger font & I disabled vertical rules that guide how many characters are in line.

![Imgur](https://i.imgur.com/33zYvoE.gif)

I also played a little bit vs code api. I have to say it is really easy to start developing your own extension from
scratch. Sometimes I felt a little bit lost on how
to get access to certain things but the overall experience was really nice.

# Future plan

The main focus for now is to have a feature where the current line is highlighted and the rest of the editor is dimmed.
I believe this gives even more focus on things that I'm writing. I also want to add configuration options.

## Summary & TL;DR

I've built a VSCode extension called writer mode for distraction-free writing. You can
download it using this [link](https://marketplace.visualstudio.com/items?itemName=noaal.writer-mode).
What are your #DevGoals ?
Tags: discuss, goals, inspiration
Published: 2019-04-01 08:28:56

---
title: What are your #DevGoals ?
published: true
description: Let's talk about goals.
tags: #discuss #goals #inspiration
---
I believe drawing attention to goals will be an inspiration for devs to think about their goals and take actions towards them. As the matched.io team, we started the #DevGoals campaign to inspire devs to pursue their goals and to encourage more people to become software developers. In this campaign, for each of the first 1,000 developers who share their #DevGoals, we'll donate € 1 to Code Your Future.

So, what are your goals as a developer?

...

Share, inspire and encourage on www.matched.io
grid-area in VueJS
Tags: css, javascript
Published: 2020-05-11 08:42:51

---
title: grid-area in VueJS
published: true
date: 2019-04-01 08:05:00 UTC
tags: CSS,JavaScript
canonical_url: https://drmsite.blogspot.com/2019/04/grid-area-in-vuejs.html
---
As you can probably tell from recent posts, I'm making extensive use of CSS grid layouts... I'm also having to support IE11 while doing so, oh joy. The thing is I like the grid-area approach to defining where things should go within the layout, and I write it in the following way:
```css
{ 
  ... 
  grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end; 
  ...
}
```
Which is cool, but it took me ages to figure out why it wasn't working... even though it was simple enough to get it working in IE11 too where I replaced it with four declarations:  
```css
{ 
  ... 
  grid-row: grid-row-start; 
  grid-row-span: (grid-row-end - grid-row-start); 
  grid-column: grid-column-start; 
  grid-column-span: (grid-column-end - grid-column-start); 
  ...
}
```
I was left though with it still not working as expected until I clocked that Vue was replacing grid-row-end and grid-column-end with auto. I then clocked that the JS syntax is slightly different in that the final two values can also use spans like this:  
```css
{ 
  ... 
  grid-area: grid-row-start / grid-column-start / span (grid-row-end - grid-row-start) / span (grid-column-end - grid-column-start); 
  ...
}
```
Setting it as four integers was not working, setting it as integers prefixed with span was working in Vue where the final two integers were getting replaced with auto - so I replaced all instances with width and depth spans and updated my script accordingly, the required output is now:  
```css
{ 
  ... 
  grid-area: grid-row-start / grid-column-start / span width / span depth; 
  ...
}
```
Combined with the specificity required for IE11 we then have the following:  
```css
{ 
  ... 
  grid-row: grid-row-start; 
  grid-row-span: width; 
  grid-column: grid-column-start; 
  grid-column-span: depth; 
  grid-area: grid-row-start / grid-column-start / span width / span depth; 
  ...
}
```
Which, when converted to a method function, results in this:  
```javascript
placeElement: function (x, y, width, depth) {
  return { 
    gridRow: x, 
    gridRowSpan: width, 
    gridColumn: y, 
    gridColumnSpan: depth, 
    gridArea: [x, y, "span " + width, "span " + depth].join(" / "),
  };
}
```
Not brilliant to look at but Vue will auto prefix the individual values so that gridRow becomes `-ms-grid-row` etc. for IE11 and won't bother outputting anything other than the grid-area for Chrome et al.  
  
It also seems cleaner in that we have the four arguments and it looks more natural and logical somehow to define how many rows and columns the element should span.  
  
Along with that, returning an object means we can then add to it in subsequent functions.
Customize bash shell for user while login ?
Tags: discuss, shell, bash
Published: 2019-04-01 07:29:49

---
title: Customize bash shell for user while login ?
published: true
tags: discuss , shell , bash
---

I hope I can find an ans here. I want to customize my bash login when I login to a red-hat server. I see online where I need to change under /etc , but thats not I am looking for.

Basically when i login , i should get a custom message , memory and cpu of the server etc.
My first published library in the Android arsenal
Tags: android, androidlibrary, androidarsenal, kotlin
Published: 2019-04-01 06:29:26

---
title: My first published library in the Android arsenal
published: true
tags: android, android-library, android-arsenal, kotlin
---

Hello Guys! 

Yesterday my first library published in [Android-arsenal](https://android-arsenal.com). It is a really impressive feeling when you've done something original and may be useful for someone.

Here is my library in android-arsenal: [Android-arsenal-FillingButton](https://android-arsenal.com/details/1/7598)
and here is in Github: [FillingButton](https://github.com/Devit951/FillingButton)
Rahim Hassanally — Dealer Member
Tags: rahimhassanally
Published: 2019-04-01 05:45:43

---
title: Rahim Hassanally — Dealer Member
published: true
description: About Rahim Hassanally
tags: #rahimhassanally
---

Rahim Hassanally, was appointed by Governor Jerry Brown in September 2013, and reappointed in March 2017. Mr. Hassanally is the owner of Momentum Auto Group. He is secretary for the Toyota Lexus Minority Dealers Association Board of Directors and a member of the National Automotive Dealers Association and the National Association of Minority Automobile Dealers Board of Directors. Mr. Hassanally is a member of the Administration Committee and Chair of the Policy and Procedure Committee. Mr. Hassanally is also a Board Member of AIADA.
Google decides to not phase out Inbox!
Tags: discuss, jokes
Published: 2019-04-01 05:27:28

---
title: Google decides to not phase out Inbox!
published: true
tags: discuss, jokes
cover_image: https://thepracticaldev.s3.amazonaws.com/i/usslllpni1upsb9apsol.jpeg
---

I can't believe Google decided to keep Inbox! Our voices have been heard. 💯🙌

{%twitter 1112585735050285056 %}
Vanilla JS equivalent for jQuery Ready
Tags: jquery, webdev, showdev, vanillajs
Published: 2019-04-29 18:17:19

---
title: Vanilla JS equivalent for jQuery Ready
published: true
tags: ['jquery', 'webdev', 'showdev', 'vanillaJS']
canonical_url: https://learnwithparam.com/blog/vanilla-js-equivalent-of-jquery-ready/
---

> jQuery has solved the problems of neutralizing side effects in JS rendering across different browsers for last decade. Now web browsers and rendering engines are much more smarter and increasingly support standard javascript API.

Document ready function is widely used feature from jQuery. With growing trends in modern web development and much better browser support for vanilla JS API’s, We can replace or reduce jQuery dependency easily.

```js
// Longer version in jQuery
$(document).ready(function() {
  // DOM events and DOM manipulations
});

// Shorter version in jQuery
$(function() {
  // DOM events and DOM manipulations
});
```

Lets see the example of ready function in vanilla JS

```js
function ready(callbackFunc) {
  if (document.readyState !== 'loading') {
    // Document is already ready, call the callback directly
    callbackFunc();
  } else if (document.addEventListener) {
    // All modern browsers to register DOMContentLoaded
    document.addEventListener('DOMContentLoaded', callbackFunc);
  } else {
    // Old IE browsers
    document.attachEvent('onreadystatechange', function() {
      if (document.readyState === 'complete') {
        callbackFunc();
      }
    });
  }
}

ready(function() {
  // your code here
});
```

This snippet is supported on modern browsers and old IE browsers too. You can restrict support based on requirement.

`DOMContentLoaded` only waits till the DOM element gets loads, not wait for stylesheet, images and other network calls. Next time if you use jquery on a site, make sure to evaluate whether you need extra 30+ kb on page load just for basic JS operations 😎


### Stay in touch!

If you enjoyed this post, you can find me on [Twitter](https://twitter.com/learnwithparam) for updates, announcements, and news. 🐤
can I predict and evaluate with the whole dataset?
Tags: machinelearning, keras, datascience
Published: 2019-04-01 05:04:53

---
title: can I predict and evaluate with the whole dataset?
published: True
description: I split the dataset into 80-20 of train and test and I evaluated the model with test dataset. I predict and evaluated model with the whole dataset before that I shuffled the dataset? can we do things like that? if not, what is wrongdoing like that?
tags: Machine Learning, Keras, Data science
---
100 days 100 Python Scripts Challenge
Tags: python, 100dayschallenge, automate, productivity
Published: 2019-04-01 04:41:02

---
title: 100 days 100 Python Scripts Challenge
published: true
description: This is a challenge to create one python script a day for 100 days. It doesn't matter it's small or big, doesn't matter it's deep learning or executing a simple shell command, I just gotta write the code daily.
tags: python,100dayschallenge,automate,productivity
cover_image: https://cdn-images-1.medium.com/max/1600/0*GEsDQGQ1BucUNW1g
series: 100 days 100 python scripts
---

For a long time, I wanted to take up this challenge. But I was always procrastinating. Finally, I started this last week. 

## 100 days 100 python scripts. 

The objective of the challenge is very simple. I will write one python script a day for 100 days. It doesn't matter it's small or big, doesn't matter it's deep learning or executing the shell command, I just gotta write the code that will help me to increase my productivity. 

### Day 1: generate_chrome_icon

This script will generate different resolution icons for chrome extensions when you give a png or JPG as input.

### Day 2: generate_two_display_wallpaper
This script will merge two wallpaper horizontally and generates two monitor wallpaper.

### Day 3: download_all_images

When a static link is given it will scrap the page and download all the images in the page.

### Day 4 : zip_react_projects

It removed the node_modules and create a zip of the react project. Will be helpful to zip and mail it to someone. 
 


You can visit the code in the following public Git Repo

[100 days 100 scripts Git repo](https://github.com/ganeshraja10/automated-python-scripts)

Please feel free to give any suggestions or ideas for more scripts. Thanks.
What should I write about next?
Tags: ask, advice, discuss
Published: 2019-04-01 01:15:53

---
title: What should I write about next?
published: true
description: Asking for advice on the next kind of post I should write
tags: ask, advice, discuss
---

Hi all, I wanted to touch base with you all and ask everyone what topic(s) I can cover or you would like covered. Let me know in the comments.
React Native ScrollView Example
Tags: reactnative, react, android, javascript
Published: 2019-04-01 04:11:33

---
title: React Native ScrollView Example
published: true
description: React Native ScrollView Example
tags: #reactnative #react #android #js
---

Post Link : <a href="https://www.skptricks.com/2019/03/react-native-scrollview-example-tutorial.html" >React Native ScrollView Example </a>


This tutorial explains how to implement scrollview component in react native application. The ScrollView is a generic scrolling container that can host multiple components and views. The scrollable items need not be homogeneous, and you can scroll both vertically and horizontally (by setting the horizontal property). ScrollViews can be configured to allow paging through views using swiping gestures by using a pagingEnabled props. Swiping horizontally between views can also be implemented on Android using the ViewPagerAndroid component.

<a href="https://www.skptricks.com/2019/03/react-native-scrollview-example-tutorial.html" >React Native ScrollView Example </a>

<img src="https://2.bp.blogspot.com/-dQWmxJ0zDuE/XKDcQSENH4I/AAAAAAAACn0/lJAasMOCEmcw4FVPLtXbcVH7dw5o3PF8gCLcBGAs/s640/scroll.png" />

A ScrollView with the single item can be used to allow a user to zoom content. Set up a maximumZoomScale and minimumZoomScale props and the user will be able to use pinch and expand gestures to zoom in and zoom out.


<a href="https://www.skptricks.com/2019/03/react-native-scrollview-example-tutorial.html" >Click here to read more </a>

1. <a href="https://www.skptricks.com/2018/09/react-native-horizontal-scrollview-in-react-native.html">React Native Horizontal ScrollView Example </a>
2. <a href="https://www.skptricks.com/2018/09/react-native-vertical-scrollview-example-android.html" >React Native Vertical ScrollView Example </a>
AWS White Paper Walkthrough - Security Overview of AWS Lambda March 2019
Tags: aws, whitepaper, security, lambda
Published: 2019-04-01 03:26:33

---
title: AWS White Paper Walkthrough - Security Overview of AWS Lambda March 2019
published: true
description: 
tags: aws, whitepaper, security, lambda
---

This AWS White Paper was just announced a few days ago by Jeff Bar and its on the Security of AWS Lambda. I don't know about you but I find it quite the chore to read through white papers so I made a video extracting out the important information while also contextualizing with examples.

If you want to see any specific AWS White Papers receive the treatment of a video walkthrough comment on down below.
An a11y extension coming to a browser near you
Tags: a11y, javascript, extensions
Published: 2019-04-01 04:27:37

---
title: An a11y extension coming to a browser near you
published: true
tags: a11y,javascript,extensions
canonical_url: https://www.nickyt.co/posts/an-a11y-extension-coming-to-a-browser-near-you-1mg2/
cover_image: https://thepracticaldev.s3.amazonaws.com/i/ir0wzbkqn1rw9vu67irj.png
---

Last year when I was looking to take on a new role somewhere, one of the places I interviewed at was Khan Academy. TLDR, I wasn’t hired 😉. However, as a candidate, I wanted to stand out. Relevant post 👇

{%link https://dev.to/nickytonline/take-chances-and-standout-because-who-knows-3kh6 %}

In a nutshell, I [put up a PR](https://github.com/Khan/tota11y/pull/131) to Khan’s tota11y repository to convert their a11y tool to a browser extension.

{%github https://github.com/Khan/tota11y %}

The goal of the PR was, aside from standing out, was to make it an extension without interfering with how their tool works when loaded as a [bookmarklet](https://khan.github.io/tota11y/#Try-it).

I’ll be up front, I’m not an a11y expert, so this tool was actually really good for me to learn a few things. Here’s a shot of it in action.

{%twitter 1040818193911173120 %}

One of the coolest features is the screen reader wand (Khan's work, not mine).

![tota11y screen reader wand in action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/69eecgpq40a25yed3u0z.jpeg)

The PR isn’t merged yet, but will hopefully be in the next month or so. Regardless, you can try it out today as an unpacked extension in Chrome, FireFox, Brave or any browser that lets you load Chrome Webstore extensions. All you need to do is [clone my branch](https://github.com/nickytonline/tota11y/tree/poc/tota11y-as-chrome-extension) and build it locally. See the [README](https://github.com/nickytonline/tota11y/tree/poc/tota11y-as-chrome-extension#loading-tota11y-as-an-unpacked-chrome-extension) for instructions for loading it as an unpacked extension.

I hope you find it useful and shoutout to the devs at Khan for making this great tool.
#Its cool to always receive, also Contribute
Tags: os, javascript, python, opensource
Published: 2019-04-01 00:51:43

---
title: #Its cool to always receive, also Contribute
published: true
description: 
tags: os,javascript,python,opensource 
---

So today i started to think about what makes an excellent developer, why are developers so different, why are some really appreciated and some are not even known, after contemplating, i discovered that the saying *givers never lack* was never a lie. 

I started to think again within myself, i am not good enough to give anything yet but then that saying popped into my head again, after analyzing personally how many articles, courses on YouTube i have watched for free all because of some developers love for the community, i felt guilty, i checked my dev.to profile i had no post, but have read over 100 articles, i answered only few questions on stack overflow but always use it.i really felt bad, i then made a decision today to start giving back, i may not be a good writer, a great coder but i am going to give all i have to the community back.

i write this to you out there, who might be like me who doesn't contribute in anyway because we feel we have nothing to offer or feel inferior, i like you analyze where you would have been if not for others selflessness. Thank you
JavaScript object spread explained
Tags: javascript, es6, spread
Published: 2019-04-01 00:50:38

---
title: JavaScript object spread explained
published: true
description: The easiest way to understand javascript object spread
tags: javascript, es6, spread
---


If you want to update a piece of an object while creating a new object, then the spread syntax is the way to go.

When you see `...`, you should just think of flattening the object.

When you see this:

```js
const metadata = {
  first: "Matt",
  last: "Crowder"
};

const updatedMetadata = {
  ...metadata,
  last: "Jenkins"
};
```

You should just see `updatedMetadata` as such:
```js
const updatedMetadata = {
  first: "Matt",
  last: "Crowder",
  last: "Jenkins"
};

```

Key/value assignments are read from top to bottom, so the last key's value will take priority in setting the value.

And now `updatedMetadata` will have the value of:

```js
{
  first: "Matt",
  last: "Jenkins"
}
```

So the spread flattens out the object wherever you place it, so if we had placed the spread metadata *after* `last: "Jenkins"`, then we would get no updates!

```js
const metadata = {
  first: "Matt",
  last: "Crowder"
};

const updatedMetadata = {
  last: "Jenkins",
  ...metadata
};

// results in 

const updatedMetadata = {
  last: "Jenkins",
  first: "Matt",
  last: "Crowder"
};

// which gives us nothing
```

So be careful where you place your spread syntax!
Array destructuring in PHP
Tags: php
Published: 2019-04-12 11:30:00

---
title: Array destructuring in PHP
published: true
tags: php
canonical_url: https://stitcher.io/blog/array-destructuring-with-list-in-php
---

In PHP, `list` or `[]` is a so called "language construct", just like `array()`. This language construct is used to "pull" variables out of an array. In other words: it will "destructure" the array into separate variables.

Continue reading on [https://stitcher.io/blog/array-destructuring-with-list-in-php](https://stitcher.io/blog/array-destructuring-with-list-in-php)
Let's See Your Awesome Workspaces!
Tags: homelabs, showoffsunday, noplacelikelocalhost
Published: 2019-03-31 23:50:46

---
title: Let's See Your Awesome Workspaces!
published: true
description: Show off your awesome workspaces where all the magic happens! Whoever has more of a cable management problem than I do wins!
tags: homelabs, show off Sunday, no place like localhost
---

Curious how everyone else likes to have their environment set up. Mine is a disaster right now, but man there's a lot of cool computers in that mess :)

<img src="https://thepracticaldev.s3.amazonaws.com/i/8ssunt5fyxhsg6c91rrf.jpg" alt="Desk with MacBook Pro, aging desktop and 4 monitors">

<img src="https://thepracticaldev.s3.amazonaws.com/i/t1e2mlmsr1blnu52pbto.jpg" alt="Makeshift server rack and some out of control Ethernet cables">

I do most of my work on my 2013 MacBook Pro and my good ol' desktop from university (2 rightmost screens). After a good 6 years of service, he's finally getting replaced with a powerhouse I ordered yesterday.

The Poweredge R720 that is gracefully propped up on the windowsill is still in search of a purpose...I wanted to turn it into a private cloud server and mess around with Docker & DevOps tools a lot. Unfortunately job hunting has taken me away from being able to load some cool stuff on it :(
Implement Secure data solutions
Tags: applicationsecurity, azure, security
Published: 2019-03-31 23:34:45

---
title: Implement Secure data solutions
published: true
description: Encryption options
tags: Application Security, Azure, Security
---
__Azure Security Spectrum__

![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/6xuclz83ffddfp9tg49e.png)

__Encryption__
- Encryption
Process of translating plain text data (plaintext) into something that appears to be random and meaningless (ciphertext)

- Decryption
Process of converting ciphertext back to plaintext

- Symmetric encryption is used to encrypt more than a small amount of data
    - A symmetric key is used to encrypt the data
    - The same key must be used to decrypt the data

__Encryption at rest__
- Encryption (or encoding) of data when it is persisted
    - Very common security requirement to encrypt data with a secret encryption key anytime it is persisted to disk
- Prevents attackers from accessing sensitive data when they have full access to a server’s machine, storage or drives
- Encryption at rest design in Azure uses symmetric encryption:
    - A symmetric encryption key is used to encrypt data as it is written to storage
    - The same encryption key is used to decrypt that data as it is readied for use in memory
    - Data may be partitioned, and different keys may be used for each partition
    - Keys are stored in a security-enhanced location with access control policies
    - Data encryption keys are often encrypted with asymmetric encryption to further limit access
![Encryption at rest in Azure](https://thepracticaldev.s3.amazonaws.com/i/1azwwaue1duhbh9hfhtc.png)

__Encryption at Rest for Azure Services__
- Azure Storage
    - Data is automatically encrypted server-side for all Storage services (Blob, Queue, Table, Files)
    - Keys are managed by the service
- Azure SQL Database
    - Transparent Data Encryption (TDE) is enabled by default on all new databases
    - Supports customer-managed 2048-bit keys in Azure Key Vault
- Azure Cosmos DB 
    - Backups and media attachments are stored in Blob storage
    - Databases are automatically encrypted on SSDs