teleren/devto huggingface dataset:
Management, Refactor, and Prune
Tags: management, refactor, refactoring
Published: 2019-11-28 01:53:35

---
title: Management, Refactor, and Prune
published: true
date: 2019-11-26 00:00:00 UTC
tags: management, refactor, refactoring
canonical_url: https://yiming.dev/clipping/2019/11/26/management-refactor-and-prune
---

<section id="content" role="main">
    <div id="outline-container-sec-" style="padding-top: 70px">
        <div></div>
            <blockquote>
<ul>
<li>Being a great manager and English gardening have more in common than you might imagine.
<ol>
<li>small, seemingly minor activity</li>
<li>clip away the dead leaves or diseased areas of a garden to encourage healthy growth.</li>
<li>done periodically</li>
<li>The day that you stop pruning is the day that the garden is full of weeds and overrun</li>
</ol>
</li>
</ul>
</blockquote>
<p>
-- from <a href="https://m.signalvnoise.com/what-great-managers-do-prune/">What great managers do: Prune - Signal v. Noise</a>
</p>

<p>
Gardening is a spectacular analogy not only for management, but also for code refactoring.
We need to prune our codebase consistently.
And the activity of pruning in a software project is called refactoring.
</p>

<p>
Like pruning, refactoring is a small, seemingly minor activity.
Renaming a variable, making a public function private, or moving a function from a module to another.
It's the accumulation of all these small, incremental steps that <a href="https://yiming.dev/clipping/2018/06/07/livable_and_disposable_code/">make our codebase a better place to live</a>.
</p>

<p>
Like pruning, refactoring demands us to remove dead code or technical debt to encourage good design.
<a href="https://en.wikipedia.org/wiki/Broken_windows_theory">Broken windows theory</a> is real.
Only by constantly fixing the broken windows in our codebase, can we nudge others to not break another window.
</p>

<p>
Like pruning, refactoring is a periodical activity.
We cannot be refactoring all the time, or we have no time for building the real thing.
Often, people schedule a repetitive event to tackle the technical debts accumulated along the way.
Further more, experimental messy is a necessary evil.
Because we need these experiments to tell us if there's a better design.
</p>

<p>
So if you need to explain refactoring to other non-technical people, you can use pruning as an analogy.
And please remember this:
</p>
<blockquote>
<p>
The day that you stop refactoring is the day that the project is full of tech debts and overrun.
</p>
</blockquote>

<p>
P.S. Refactoring is everywhere in our daily life.
I even <a href="http://dsdshcym.github.io/blog/2018/01/28/using-vim-emacs-is-like-a-refactoring-process/">treat optimizing my editor workflow as a refactoring process</a>.
Pruning is just one of the best analogies out there.
</p>

    </div>
</section>
What frustrates you the most about web performance?
Tags: discuss, webdev, webperf, beginners
Published: 2019-11-25 23:37:12

Are you trying to learn how to make websites faster? What frustrates you about performance, whether that's learning, implementing, or anything else related to it?

Photo by [JESHOOTS.COM](https://unsplash.com/@jeshoots?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/frustration?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)


---

This article was originally published on [sia.codes](https://sia.codes/). Head over there if you like this post and want to read others like it, or sign up for my [newsletter](https://buttondown.email/sia.codes) to be notified of new posts!
Nice looking Git log
Tags: cli, webdev, git, github
Published: 2019-11-25 23:11:16


One of the most used git command is `git log` which shows commit logs.

```bash
$ git log
```

I found custom `git lg` looks more self-sufficient and descriptive. If you want to have this command follow next instruction.

Following image shows what's the difference between custom `git lg` and `git log --oneline`.


### Instruction:

Go to `C:\Users\YOURUSERNAME` and add code in .gitconfig file:

```
[alias]
	lg = log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit --branches
```

That's it!

From now on you can call `git lg` and have new view in terminal. Enjoy!
Multi-language switcher, Client carousel | Module Monday 65
Tags: showdev, githunt, webdev, javascript
Published: 2019-11-25 23:10:26

---
title: Multi-language switcher, Client carousel | Module Monday 65
published: true
description: Module Monday 65
tags: showdev, githunt, webdev, javascript
cover_image: https://res.cloudinary.com/component/image/upload/b_rgb:ffffff,c_lpad,h_350,w_800/v1574466004/multilanguage_aucfqp.gif
canonical_url: https://guide.anymod.com/module-monday/65.html
---

## Multi-language and more
This week we introduced a feature for i18n (internationalization) that allows mod content to be in different languages, with easy switching. 🎉

As always, these modules can be used on any website, web app, or anywhere else. There are hundreds more like these built & shared on [AnyMod](https://anymod.com).

Click a mod to see it along with its source code.

## Multi-language picker
Set up content versions and switch between them easily.
<a class="btn btn-sm" href="https://anymod.com/mod/language-picker-kdamrb?preview=true">View mod</a>
<a href="https://anymod.com/mod/language-picker-kdamrb?preview=true">
  <img src="https://res.cloudinary.com/component/image/upload/v1574466004/multilanguage_aucfqp.gif"/>
</a>

## Client carousel
Showcase your clients or technologies with a responsive slider.
<a class="btn btn-sm" href="https://anymod.com/mod/client-carousel-ordkao?preview=true">View mod</a>
<a href="https://anymod.com/mod/client-carousel-ordkao?preview=true">
  <img src="https://res.cloudinary.com/component/image/upload/v1574466004/carousel_puxarg.gif"/>
</a>

## Icon section
Editable content and icons to highlight your features.
<a class="btn btn-sm" href="https://anymod.com/mod/icon-section-ordonr?preview=true">View mod</a>
<a href="https://anymod.com/mod/icon-section-ordonr?preview=true">
  <img src="https://res.cloudinary.com/component/image/upload/v1574466003/icon-section_bofdzx.png"/>
</a>

## Instagram post embed
Easily add your post to any page.
<a class="btn btn-sm" href="https://anymod.com/mod/instagram-post-embed-orlmm?preview=true&lorem=true">View mod</a>
<a href="https://anymod.com/mod/instagram-post-embed-orlmm?preview=true&lorem=true">
  <img src="https://res.cloudinary.com/component/image/upload/v1574466007/instagram_ia0tte.gif"/>
</a>

## Image cards
Pre-styled content and images with call to action.
<a class="btn btn-sm" href="https://anymod.com/mod/image-cards-with-link-and-cta-button-raoldr?preview=true">View mod</a>
<a href="https://anymod.com/mod/image-cards-with-link-and-cta-button-raoldr?preview=true">
  <img src="https://res.cloudinary.com/component/image/upload/v1574466004/image-cards_kbodpt.png"/>
</a>


<hr>

I post new mods from the community [here](https://dev.to/tyrw) every (Module) Monday -- I hope you find them useful!

Happy coding ✌️
CSS Positioning Tutorial
Tags: css, webdev, tutorial, youtube
Published: 2019-11-25 22:57:37

CSS positioning has been around for quite some time.  Even with the advent of all of the new css layout methods, CSS Positioning is still in heavy use today, and a necessity to learn.

[Subscribe To The Channel!](http://www.youtube.com/FollowAndrew?sub_confirmation=1)

{% youtube UO8ed-JB4So %}
Watch the Video Tutorial on YouTube for a visual explanation!


Regardless of which position type you choose, you'll always be moving an element in a specific direction from where it normally would flow.  We call this altering the 'document flow'.  There are 4 keywords you'll use to move.  You can use positive or negative numbers.  The value is always an **offset** from the keyword you choose, with positive number pushing 'inwards' and negative values pushing 'outwards':

* Top, Right, Bottom, Left

![CSS Position Keywords](https://thepracticaldev.s3.amazonaws.com/i/gk1l03l85dc57zh4d5q4.png)
(image from video tutorial)

There are 4 main types of CSS positioning. We'll take a look at each starting with Relative Position

##Relative Position 

Two important things with relative positioning:

* Relative positioning is positioned according to itself
* Relative positioned elements are **not removed** from the document flow

##Absolute Position 

Two important things with absolute positioning:

* Absolute positioning is positioned according to the Parent Element (if the parent has a position)
* Absolute positioned elements **are removed** from the document flow

##Fixed Position 

Two important things with fixed positioning:

* Fixed positioning is positioned according to the viewport (browser window)
* Fixed positioned elements **are removed** from the document flow

##Sticky Position 

One important things with sticky positioning:

* Sticky positioning behave like relative, until they get 'stuck', then they behave like fixed (but on the parent, not the viewport)

##Z-Index
Whenever you start moving things around, inevitably you'll have boxes that 'sit' on top of one another.  You'll need to control the z plane stacking order.  You do this via z-index property.  It's pretty simple, the **higher values sit on top of lower values**:

![z-index](https://thepracticaldev.s3.amazonaws.com/i/awyvs4roadkb04ba6p2y.png)
(image from video tutorial)
🍪 Screenshot or scrape webpages behind a login with JavaScript (in Node.js)
Tags: javascript, webdev, puppeteer
Published: 2019-11-25 22:50:50

Let's imagine, that you want to programmatically screenshot your dev.to dashboard. We learned in part 1 how to do screenshots. But so far we only did screenshots of public pages. The dev.to dashboard is only available if you're logged in. No problem! That's actually an easy task because you can set cookies with puppeteer. The only thing you have to do is open the Dev Tools and copy the `remember_user_token` cookie. With the correct domain settings (I prepared these in the example) you can now access the webpage as if you were logged in. Actually your puppeteer session is logged in. This is possible for most of the pages because usually, a login relies on a cookie, which you can just copy. Try it yourself!

```js
// npm i puppeteer
const puppeteer = require('puppeteer');

const cookie = {
  name: 'remember_user_token',
  value: 'YOUR_COOKIE_VALUE', // replace this!
  domain: 'dev.to',
  url: 'https://www.dev.to/',
  path: '/',
  httpOnly: true,
  secure: true,
};

// we're using async/await - so we need an async function, that we can run
const run = async () => {
  // open the browser and prepare a page
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // set the cookie with your user information to appear logged in
  await page.setCookie(cookie);

  await page.goto('https://dev.to/dashboard');
  await page.screenshot({
    path: 'my_dev_to_dashboard.png',
    fullPage: false, // set to true to get the whole page
  });

  // close the browser
  await browser.close();
};

// run the async function
run();
```

![My dev.to Dashboard](https://thepracticaldev.s3.amazonaws.com/i/bc9qd8g4l94hn16yhvt0.png)

Please consider following me, if you're interested in what else you can do with puppeteer and if you don't want to miss any of my upcoming articles in this series.

Thanks for reading!
My first Svelte app
Tags: javascript, svelte, beginners, devtoapi
Published: 2019-11-25 22:27:50

I've created my first Svelte application. My first impression is that it's really easy to get started if you have experience on other frontend frameworks.
I've spent a few hours to figure things out and successfully create a working app. 

I've used dev.to api to fetch articles, you can search by any tag and results will be displayed. You can see it here: https://codesandbox.io/s/sveltedevtoapp-yrg6r

I know that some parts of the code is not ideal and probably I'm doing many things wrong. Let me know if you see something really weird. 

My overall experience coding a Svelte app was really great until now. 
I will definitely keep learning about it and create a bigger application in the future.
Azure PowerShell Overview
Tags: azure, powershellscript
Published: 2019-11-25 22:09:30

In this [tutorial](https://github.com/patricksameerajayalath/AzureTutorials/blob/master/Azure%20PowerShell%20Overview.pdf) I’m going to show how to:

•	Find out which PowerShell version is available on Local Machine 
•	Install/Upgrade PowerShell on Local Machine 
•	PowerShell Scripts
•	PowerShell ISE
•	Cloud Shell



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


You can find the PDF version of this tutorial [here](https://github.com/patricksameerajayalath/AzureTutorials/blob/master/Azure%20PowerShell%20Overview.pdf).

You can find all my Azure/.Net tutorials [here](https://dev.to/patricksameerajayalath) and [here](http://sameerajayalath.blogspot.com/).

Enjoy !!
Global SKILup Day: Register for FREE Training
Tags: devops, cloud, agile, sre
Published: 2019-11-25 22:08:50


Global SKILup Day on 10 DEC 2019 is all about upskilling to advance your #ITcareer and advancing the humans of DevOps.Treat yourself to a day of FREE virtual DevOps training led by well-known influencers from the DevOp, Agile Scrum ITSM, Cloud & SRE communities. Wherever you sit in the DevOps sphere, Software Dev or IT Operations, here a great resource. View agenda and speaker lineup: Sign up now:https://devopsinstitute.com/globalskilupday/ 

Great for those focused on continuous learning and growing their career by adding actionable, HOW-TO knowledge to improve your skills portfolio. The agenda will be a strong blend of human, process, and automation know-how led by some of the most experienced and well-known influencers from the DevOps, Agile, ITSM, Cloud and SRE communities. More details here: https://devopsinstitute.com/globalskilupday/
Typescript Partial<T>, where have you been my whole life?
Tags: angular, typescript
Published: 2019-11-25 21:56:26

Oh boy, how did I not know about Partial<T> until now?  This is something all Typescripters need to know.

I'll use the example based on the official docs...
https://www.typescriptlang.org/docs/handbook/utility-types.html

Let's sasy you have a simple interface and instance...
```javascript
interface Todo {
    title: string;
    description: string;
}

const todo1 = {
    title: 'organize desk',
    description: 'clear clutter',
};
```
How would we write a method that takes our instance of Todo and updates it with values from another Todo?

How about this?
```javascript
function updateTodo(originalTodo: Todo, fieldsToUpdateTodo: any) {
    return { ...originalTodo, ...fieldsToUpdateTodo };
}

const todo2 = updateTodo(todo1, {
    description: 'throw out trash',
});
```
Not great.  We had to type fieldsToUpdateTodo as *any* because if it was an Todo, we would need to set every property on the Todo interface.  What if we only wanted to update *description*?  Hence using *any*.  I guess we could mark all properties in Todo as optional, but then we'd lose a lot of the typechecking that we love.

If we knew we only ever wanted to update *description* things are easier...

```javascript
function updateTodoDescription(originalTodo: ITodo, description: string) {
    return { ...originalTodo, description: description };
}
```

But this pattern isn't scaleable if we had many properties and wanted to arbitrarily update properties.

Let's cut to the chase.  How can *Partial<T>* help?  Turns out it's simple, barely an inconvenience...
```javascript
function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>) {
    return { ...todo, ...fieldsToUpdate }; 
}
```
Wrapping an object in Partial marks all the properties on that object as optional.

We can then call our updateTodo like this...
```javascript
const todo2 = updateTodo(todo1, {
    description: 'throw out trash',
});
```
We are not forced to set every property from the Todo interface.  Our UpdateTodo method can then happily use the spread operator to merge the two Todo's.
What are you getting for Black Friday
Tags: question, blackfridaydeals
Published: 2019-11-25 21:23:03

What are you getting for Black Friday (tech-wise)? Any plans for Christmas (I know, I know, it's early, but there are some people who know exactly what they want 😀). I'm looking for a cool tech gadget or something of the sort but I can't find anything interesting... Suggestions?
How to HTTP...
Tags: http, javascript, webdev, productivity
Published: 2019-11-25 21:10:20

Every day, working as a full-stack web developer I had to test HTTP requests.

I started using postman, but oh man, how annoying is postman? As a developer, the only thing I want to do was coding, so why not write directly HTTP requests?
With IntelliJ, you can do.

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

IntelliJ IDEA supports *.http* files. 
You can directly write HTTP requests and run them, with complete code completion even inside the body of the request (for example if using `content-type: application/json` he will help you write a json, how cool is it?).

Other useful tools:
* environment variables support
* cURL to HTTP converter
* requests history
and more.

And now I'm so used to write HTTP files that I don't want to write curl or fetch anymore.
So I created __[HTTP-TO](https://github.com/alfredosalzillo/http-to)__ an online HTTP requests converter.

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

For now, it supports conversion to the Javascript fetch and Dart http module.
Write http requests and convert directly to fetch!
YPSKA #14 Pupeteer
Tags: headless, node, javascript, chrome
Published: 2019-11-25 21:04:16

[Puppeteer](https://pptr.dev/) is a framework for automation of the Chrome browser. It usually is run headless (ie no user interface visible), but it can be configured to display the user interface. It’s a great tool for any form of automated testing of your website. It can automate any task that can be done by a user in Chrome browser. 

Why not include it in your website project?
Diversity and inclusion… What about accessibility?
Tags: a11y, ux, webdev
Published: 2019-11-25 20:57:13

---
title: Diversity and inclusion… What about accessibility?
published: true
description: What if a part of diversity and inclusion at companies would be to hire people with disabilities as Q.A.?
tags: a11y, accessibility, ux, webdev
cover_image:
---

Have you ever thought how would it be like to wake up in the morning having 80% vision loss, or lose your arms mobility? How your daily activities would be affected? Yes, I’m pretty sure we don’t think about that unless you have one of those conditions.

Whether you are an engineer or a designer (actually, any profession you may have) it’s our responsibility to think about these scenarios at the time of creating and implementing products, software, services, etc. Real innovation takes accessibility (a11y) into consideration.

A few days back I attended a “diversity and inclusion” training where some observations came up (besides the obvious ones: race, sexual orientation, religion, etc) like why companies communications don’t include overweight people in their visuals, or why the age of employees is between 20 to 35 years old… and of course, I thought about people with disabilities.

In my everyday work, I have to think about how would be to navigate a website with my eyes closed or navigate a website just with keyboard (no mouse). Is it accessible? Responding to pretty basic needs like contrast colors, accessible font-size, navigate using only the keyboard, all elements should give the right context using assistive technology, custom dropdowns behave like a native select, etc. and of course, is the user able to complete the desired action? Cases like making the monthly electricity payment or a transaction from a bank account to another, book a doctors appointment and so forth.

And it’s hard to think that way, or test new implementations “imagining” a disability. Think about a11y mobile devices, different OS and assistive technologies, and so on. Imagine spreading this way of thinking to product, management, engineering, and quality assurance people.

And then, in a discussion with my peers, an idea popped, which is chasing my mind lately: What if a part of diversity and inclusion at companies would be to hire people with disabilities as Q.A.? Wouldn’t that be real innovation? Wouldn’t that lead companies to deliver products, software or services really accessible? I’m pretty sure there might be companies that already do it, but, are we encouraging this kind of inclusion and diversity actions? I know we can do more of what we are doing now.

Basic stuff on web a11y among a big list of things to consider:
• Color contrast
• Correct font-size
• Friendly keyboard navigation
• Understandable assistive technology context
• Correct usage of HTML elements
• Correct HTML structure and semantic

Questions? Comments? Please let me know as I’m planning to publish more about a11y and the questions or scenarios I have to face day to day.
🗄️ The easiest way to scrape a website with Javascript (in Node.js)
Tags: javascript, webdev, puppeteer
Published: 2019-11-25 20:53:23

Scraping of webpages is really simple and elegant with Puppeteer. Let's try to scrape [Codesnacks](https://codesnacks.net) and get all the links on the page with anchor and text.

We can easily do this using puppeteer. There's no need to fetch the data first and parse it. You can just let puppeteer visit the page and run your own Javascript in the context of the page. The best way to do this is to first run it in the console of your browser and the just copy it to the code if you made sure everything works as planned.

```javascript
// npm i puppeteer
const puppeteer = require("puppeteer");

// we're using async/await - so we need an async function, that we can run
const run = async () => {
  // open the browser and prepare a page
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  // open the page to scrape
  await page.goto("https://codesnacks.net");

  // execute the JS in the context of the page to get all the links
  const links = await page.evaluate(() => 
    // let's just get all links and create an array from the resulting NodeList
     Array.from(document.querySelectorAll("a")).map(anchor => [anchor.href, anchor.textContent])
  );

  // output all the links
  console.log(links);

  // close the browser 
  await browser.close();
};

// run the async function
run();
```

Before there was puppeteer there were several tools, that you had to stitch together.
+ a library to fetch the document (e.g. axios or node-fetch)
+ a parser to parse the HTML and access the DOM nodes (e.g. cheerio)

The problem with this approach was, that dynamically rendered pages were even harder to scrape. That's no issue with puppeteer, since it's actually using chrome - just headless.