teleren/devto huggingface dataset:
Introducing the CloudSkew Professional Plan
Tags: azure, aws, kubernetes, googlecloud
Published: 2020-12-26 12:08:44

[CloudSkew](https://www.cloudskew.com) now introduces a professional plan for cloud architects. Subscribe to create unlimited architecture diagrams & reusable templates.

![cloudskew professional plan](https://assets.cloudskew.com/assets/pages/pricing/pricing-table-01.png)

Bonus: All early adopters & power users have been upgraded/grandparented for free for the next 6 months!

Please refer to our [pricing page](https://www.cloudskew.com/docs/pricing.html), [FAQs page](https://www.cloudskew.com/docs/frequently-asked-questions.html), [terms of service](https://www.cloudskew.com/about/terms-of-service.html) and [privacy policy](https://www.cloudskew.com/about/privacy-policy.html) for more details.
Top 3 soft skills every programmer needs to have. In
Tags: webdev, beginners, career, programming
Published: 2020-12-26 11:56:18

When you hear the word programmer or programming, to a layman a picture of a geeky or nerdy math genius who's stays behind the computer all day writing codes pops up! No being a programmer is about that, it's about solving problems and building solutions. In this post I'll be be top five soft skills every programmer needs to have
↗️ COMMUNICATION
unarguably, a great deal of programmers lack communication skills they are not able to communicate problems with their team members there by making a problem very hard to solve.a lot of programmers have problem with communication because most of them spend the whole day writing codes and debugging and doing a lot of stuffs without getting out and meeting with people. Communication is a very essential skill every programmer should have this will enable him or her to pass across messages communicates solutions and problem with his community.
↗️ TEAMWORK AND COLLABORATION
Many projects require a dozen of engineers to build, it's takes more than just interacting with your computer. You've to be able to work together with people. A programmer cultivate the habit of working hand-in-hand with others to build real life solutions.
↗️ PROBLEM SOLVING AND ANALYTICAL THINKING.
Our world is filled with problem which needs to be solved by Man someone wants said today solution tomorrow's program so we keep on solving problem progressively a programmer needs to cultivate the habit of identifying a problem and ability to solve them he or she needs to be able to think critically in bringing good and simple solutions.
Machine Learning: a visual explanation
Tags: beginners, machinelearning, datascience, codenewbie
Published: 2020-12-26 11:29:56

Recently, I came across this cool article that has a visual representation for a beginner-level introduction to the concept. 

Everyone needs to appreciate the work done by the [r2d3.us](http://www.r2d3.us/) team.


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


It is possible to adjust the presentation to several other languages. (the one above is in Portuguese, choose yours :sunglasses:)

Click [here](http://www.r2d3.us/uma-introducao-visual-ao-aprendizado-de-maquina-1/) to access this masterpiece.
Change Picture Technics
Published: 2020-12-26 11:28:49

Hello Developers, i am not sure if i am right here, because it is so that i want to discuss with your about something and i am not the one hoe want to post something like a turotial, i am new to this website, so please just let me know when this is the wrong website for that.

What i want to discuss with you is the following, lets imagene you have a website with 10 - 20 html tags in which pictures are shown. pictures from lets say people. And now you want to change the picture of one html tag when a button is clicked.

Now my questions is, how would you recommend to include the picture into the html tag, would you just use a simple <img> tag or would you use css and background image technic?

Bot solutions will work of course, but i am not sure which will work better, because imagene we want to change the picture maybe a lot of times, and if you use for example <img> tags then the browser does maybe use more storage then for a background image, and there are maybe also other things which would be a reason to better use this or that, so let me know what you think or what you know about this?
Run graphical apps with WSL 2
Tags: wsl, ubuntu, windows, gui
Published: 2020-12-26 11:27:53

I found this wonderful application on Microsoft Store called [GWSL](https://www.microsoft.com/store/productId/9NL6KD1H33V3)

Just launch the app then open wsl run any graphical app with commands. GWSL will automagically open for you.

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

It even works with desktop environment.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qlnjxxgswhbyjzapyolo.png)
LGTM Devlog 1: New Logo, and jumping the gun by buying a domain
Tags: devjournal, git, github, python
Published: 2020-12-26 11:26:08

The first thing a programmer must do for a new project is... buy a domain. Sorry, but those are the rules. We let hubris and enthusiasm take over, and we sincerely believe that "this is it, this is the project that I complete, I must reserve this domain right now at the start".

I suspect there's a big pool of unused domains out there, purchased by programmers for projects that aren't finished. Today, I'm adding to that pool... I hope temporarily...

# The Name
I'm naming this project LGTM, meaning "Looks Good To Me", it's a phrase often used during code reviews, where one programmer reviews the work of another, and if there isn't anything to comment on, a single "LGTM" message might be sent.

In my mind, LGTM is synonymous with git. In fact, the first time I saw it, it was in the context of using git, and I thought it meant "Let's Get This Merged"

# The Logo
I've pulled together a logo for the project, mostly because I already had a git-themed logo on hand that I'm re-using from a previous project that I had designed earlier. Feels good to re-use it, and gives the project some identity early on.

New Logo:
![LGTM Banner Logo](https://dev-to-uploads.s3.amazonaws.com/i/5x2fet6dlfovud0ev3lp.png)

Why the cats? Well inevitably being an internet thing, it features cats. But the icon is meant to be reminiscent of the official git logo:

![Official git logo](https://dev-to-uploads.s3.amazonaws.com/i/jb40a9sz4vf7lwn868yl.png) 

It also has a sort of NPM vibe to it, though that was accidental.

# The Domain
Ok, I'm going ahead and pulling the trigger on purchasing this domain: lgtm.page

I'm serious about what I said earlier - we as developers have this tendency to jump the gun and buy domains for projects that never see the light of day. It's kind of a "didn't finish the project tax". But... it's also added incentive for me to complete the project, and it's something you, the readers of this blog series, can have a look at sometimes.

![Domain purchase screen](https://dev-to-uploads.s3.amazonaws.com/i/9f3j2qm2ni9wycx9rvej.png)

And on a practical note, I think I will need it soon for technical reasons - GitHub uses webhooks to notify services of git activity, so I will need an address for GitHub to post to
Best Tips for Iterm2 Mac

Tags: mac, webdev, productivity, tools
Published: 2020-12-26 11:23:07

## Open Quickly (⌘+⇧+O)

![Image-3](https://looselytyped.com/til/2017-11-13-about-open-quickly-in-iterm2/images/Open_Quickly.png)

You can quicly open a window or a tab with *Profiles*. You can also open a workspace which contains multiple window with *Arrangements*.


## Profiles

![Image-2](https://robmercier.me/blog_images/iterm2-profiles-fullsize.jpg)


You can save a terminal window with the Profile Section. (Example Backend Profile, Frontend Profile, Database Profile, Bash Profile, etc)

### SSH Profile

You can override the command sent at window startup like an ssh connection.

```
Sent text at start : ssh admin@myhost.com
```

### K8S Profile - PS1

You can override the command sent at window startup in order to inialize the K8S context.

```
Sent text at start : source "$(brew --prefix)/opt/kube-ps1/share/kube-ps1.sh";PS1='$(kube_ps1)'$PS1
```

### Screenfetch

![Image-Screenfetch](https://www.cyberciti.biz/media/new/cms/2015/09/screenfetch-osx.jpg)

You can override the command sent at window startup in order to launch the screenfetch.

```
Sent text at start : screenfetch 
```

## Arrangement

![Image-Arrangement](https://iterm2.com/img/screenshots/settings26.png)

You can save a workspace which contains multiple window with *Arrangements*.

Open it with *Restore from Arrangement*.


## Markers and Annotations

![Image-Annotation](https://iterm2.com/img/screenshots/v3-screen-shots/iterm2-annotations.png)

You can add annotations via (⌘+⌥+M).

You can add markers via (⌘+⇧+M).


## Shortcuts

### Iterm

Clear Buffer (⌘+K)

Show Iterm2 History (⌘+⇧+H)

### Bash

<b>!!</b> : Execute the last command typed

<b>!top</b> : execute the most recent command that starts with ‘top’ (e.g. !).

<b>![value]</b> : Execute the last command typed that starts with ‘value’

<b>Ctrl+R</b> : Interactively search through previously typed commands

<b>history n</b> : Shows the stuff typed – add a number to limit the last n items


## Badges (Optional)

![Image-1](https://iterm2.com/images/Badge.png)

The badge's color may be set in Preferences>Profiles>Colors.

Change the Badge to \(session.username)@\(session.hostname).


## Other Links

[Cheat Sheet](https://gist.github.com/squarism/ae3613daf5c01a98ba3a)

[https://gist.github.com/poopsplat/7195274](https://gist.github.com/poopsplat/7195274)

[https://webstudiya.com/develop-faster-with-iterm-profiles-and-window-arrangements/](https://webstudiya.com/develop-faster-with-iterm-profiles-and-window-arrangements/)

[https://www.tecmint.com/linux-command-line-bash-shortcut-keys/](https://www.tecmint.com/linux-command-line-bash-shortcut-keys/)
CloudSkew featured at Azure Community Conference
Tags: azure, community
Published: 2020-12-26 11:14:40

A big thanks to the [Azure Community Conference](https://www.azconf.dev/) for featuring CloudSkew. Here's the recording in which [Mithun Shanbhag](https://twitter.com/mithunshanbhag) (CloudSkew creator) talks about the internals of [cloudskew.com](https://www.cloudskew.com) and how it was built on top of Azure.

{% youtube isRLHQZbs08 %}
Export the HTML Canvas as print optimized file
Tags: dohackathon, webdev, html, javascript
Published: 2020-12-26 11:09:01

Drawing things that result in an art sketches on the HTML Canvas is fun but how do you export them? For a quick export it's fine to right click on the canvas and save it. The file will have a set resolution wich is the same as your canvas resolution. If you want to print your canvas content in a professional way you will need a much higher resolution and usually a fixed width/height. In this article I will show you how to configure your canvas to export a high dpi image optimized for printing.

## How?
First thing we need is a reference to the canvas in our JS code and the 2D context of our canvas.

```javascript
const cvs = document.getElementById("drawing");
const ctx = cvs.getContext("2d");
const dpr = window.devicePixelRatio;
```
Printers use the measurement DPI wich stands for dots per inch. The canvas is based on pixels so there must be a conversion between these two. Let's say I want my canvas content printed on a 2 inch by 2 inch piece with a resolution of 300 dpi. In this case my real canvas width/height must be 300*2 pixel:
```javascript
const dpi = 300;
let width = 2;
let height = 2;
cvs.width = width * dpi * dpr;
cvs.height = height * dpi * dpr;
ctx.scale(dpr, dpr);
```
As you see there is a third constant multiplied with our canvas size, the device pixel ratio. It is the device specific ratio of physical pixel per pixel calculated by your website. [Read more here](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio) We also need to scale the context to this ratio to make it look crisp.
The last step for the canvas setup is to scale it with css so it fits the screen. By doing this it will keep the set resolution but will appear smaller on the screen.
```css
canvas {
  width: 600px;
  height: 600px;
}
```
And that's it. If you now right click on the canvas and save it you can see the generated image has the defined size optimized for print.
Instead of a right click to download the image the canvas has a 'toDataURL' Function wich we can use to download the image with code. The generated DataURL can be added to an anchor tag to start the download:
```javascript
function download() {
  const downloadUrl = cvs.toDataURL();
  const a = document.createElement("a");
  a.href = downloadUrl;
  a.setAttribute("download", "SketchDownload");
  a.click();
}
```
Simply link the function to a button and we can export a HTML canvas with a specific size on the click of a button. 

## Creative Coding Workbench
This article is part of my progress for the Digital Ocean Hackathon Project 'Creative Coding Workbench'.

### Features:
 - ~~draw sketch on HTML canvas~~
 - ~~export sketch for print~~
 - expose sketch settings to UI
 - toggle sketch animation
 - save sketch to a library
 - load sketch from a library
 - edit sketch from a library
 - ...

### Technologies:
 - Sapper 
 - Digitial Ocean App Platform
 - ...

Stay tuned for updates on this project as there will be posts for each part of it.
How do you pace yourself when working on an interesting project?
Tags: discuss, mentalhealth, productivity
Published: 2020-12-26 11:08:15

How do you make yourself take breaks and pace yourself when you are working on a project you are really passionate about/ interested in ?


Recently I have been working on a project which is interesting, and I like working on it, but I have noticed that I have been working on it too much. It is not just about the coding part, where I actually sit and work on the code, but also when I am not coding, it is still on my mind. I keep thinking on 'how will I implement this feature' or 'how will I solve this issue' and so on. (also now I get why they say only ~10% of coding is actually typing :wink: )

I have found out this YouTube channel a few months back, and it is amazing, but in particular, I was re-watching this video 3rd or 4rth time :
{% youtube Mt-YuVhsvpY %}

And I wondered if is it just me, or it is a common problem for others as well?

As she has said in the video , do you also have a feeling that you could be working on the project instead of what you are doing?

How do you force yourself to take breaks, and pace yourself when working on a project you are really exited about?

If you have experienced anything like this or have any tips on how one can deal with this please leave a comment :smile:
Thank you!
Where do you prefer your conditionals – inside or outside?
Tags: discuss, watercooler, programming
Published: 2020-12-26 10:53:43

---
title: Where do you prefer your conditionals – inside or outside?
published: true
description: 
tags: discussion, watercooler, programming
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/iaai56xgagmroenksmtt.jpg
---

> <span>Cover photo by <a href="https://unsplash.com/@emilymorter?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Emily Morter</a> on <a href="https://unsplash.com/s/photos/question?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>

Many times when i'm writing a piece of logic, i face this dilemma while calling a function. If a function needs to be invoked under certain condition, should i put the conditional check inside the function and do early return, OR first do an conditional check and the invoke.

Both have their pros and cons, IMO
##  Conditional inside the method
- Pros - My execution path remains free of branches and the flow looks linear and simple to read.
- Cons - The intent and actual execution would differ in some cases.
![carbon](https://dev-to-uploads.s3.amazonaws.com/i/wcp8tv8o4qbrckcvfdyq.png)
 
## Conditional before calling the function
- Pros - Intent is clear, i want to invoke this function only when a certain condition is met.
- Cons - Branches and readability.
![carbon (2)](https://dev-to-uploads.s3.amazonaws.com/i/9f8hiq08fxaapdzojxo8.png) 

### What are your thoughts on this?
A simple component comparison between 3 popular #JavaScript frameworks
Tags: javascript, react, vue, angular
Published: 2020-12-26 10:47:11

##Vue.js : 
Vue.js is an open-source model–view–viewmodel front end JavaScript framework for building user interfaces and single-page applications. It was created by Evan You, and is maintained by him and the rest of the active core team members.
![vue](https://dev-to-uploads.s3.amazonaws.com/i/53u9klh71ppklg40pi0p.png)

##React :
React is an open-source, front end, JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.
![react](https://dev-to-uploads.s3.amazonaws.com/i/jmyb89s8vjf4alhl2cqj.png)

##Angular :
Angular is a TypeScript-based open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS.
![angular](https://dev-to-uploads.s3.amazonaws.com/i/gqmyvdid35zht76cel5k.png)
Cannot read property 'transform' of undefined"
Tags: react
Published: 2020-12-26 10:31:16

Hi everyone,

I'm trying for few days to use D3 with react and I'm facing to an error with d3.zoom(),

the code is minimal and only contain a small svg and the zoom 
       
const zoom = d3.zoom()
        .scaleExtent([1, 10])
        .on('zoom', () => {
          d3.select('svg').attr('transform', d3.event.transform);
        });

const svgCanvas = d3.select(this.refs.canvas)
            .append('svg')
            .attr('width', canvasWidth)
            .attr('height', canvasHeight)
            .call(zoom)

There is nothing to do I always got the error "Uncaught TypeError: Cannot read property 'transform' of undefined"

Did anyone faced to the same problem?
#JavaScriptmas solutions
Tags: javascript, scrimba, javascriptmas
Published: 2020-12-26 10:24:42

### My 24 solutions to [#JavaScriptmas challenge by Scrimba](https://scrimba.com/learn/adventcalendar):###
1. https://t.co/LY3ZziXUxL?amp=1
2. https://t.co/54Z8gky0S1?amp=1
3. https://t.co/edaEPxgwYb?amp=1
4. https://t.co/c4DbwFqKi4?amp=1
5. https://t.co/SM4TtH0Avb?amp=1
6. https://t.co/602RVdoV73?amp=1
7. https://t.co/QKke1LLIun?amp=1
8. https://t.co/BFpdaVRxD6?amp=1
9. https://t.co/ZNNENRVbTF?amp=1
10. https://t.co/fyqfVOTzaQ?amp=1
11. https://t.co/no8mn1QsPy?amp=1
12. https://t.co/Osjtn8TvHM?amp=1
13. https://t.co/SlaQdk4C6Y?amp=1
14. https://t.co/8AWrj2kN7K?amp=1
15. https://t.co/9Q2g4HhdAL?amp=1
16. https://t.co/nx1DDEGEEx?amp=1
17. https://t.co/JeKgdsQAHb?amp=1
18. https://t.co/yDe7VJV7SK?amp=1
19. https://t.co/u1010oH1wj?amp=1
20. https://t.co/7ThZaX4BHJ?amp=1
21. https://t.co/kDRdlFDFW6?amp=1
22. https://t.co/07PlQfFmnF?amp=1
23. https://t.co/lky6wbITfp?amp=1
24. https://t.co/bm7UU8V0vX?amp=1
text-align: right doesn't work...
Tags: css, react
Published: 2020-12-26 10:20:17

![Screen Shot 2020-12-26 at 19.22.26](https://dev-to-uploads.s3.amazonaws.com/i/by6rpe8ifc8chdm5gu08.png)

I trapped in this problem many times so I would like to leave it here. 

I wanted this 'Login' button to be on the right edge of this header but I could not apply text-align: right.

```
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
button:{
    textAlign: 'right',
    display:'block',
}
}));

export default function Top() {
  const classes = useStyles();

  return (
      <div className={classes.root}>
        <AppBar position="static" color='white'>
          <Toolbar >
            <Button className={classes.button} 
                    color="inherit">Login
            </Button>
          </Toolbar>
        </AppBar>
      </div>
  );
}
```

I found out this does not work because Button is enclosed by the parent element, 'Toolbar'. When you use 'text-align', it needs to know 'where is the center?' or 'where is the middle?'. Therefore, you should select a parent element which is also a block element, and apply text-align. 

```
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
button:{
    textAlign: 'right',
    display:'block',
}
}));

export default function Top() {
  const classes = useStyles();

  return (
      <div className={classes.root}>
        <AppBar position="static" color='white'>
          <Toolbar className={classes.button}>
            <Button color="inherit">Login</Button>
          </Toolbar>
        </AppBar>
      </div>
  );
}
```

I used to use 'float: right' but it's not really recommended for various reasons so I've been trying to find other ways! 

Please give me any correction if my grammar is weird or does not make sense!
10 Great Homebrew formulas for Web Developers
Tags: homebrew, mac, php, brew
Published: 2020-12-26 09:43:38

[Homebrew](https://brew.sh/) is the first software I Install on any MAC machine. I think it gives me the feeling to be back on my beloved Linux box, with [APT](https://wiki.debian.org/Apt) or [YUM](https://www.redhat.com/sysadmin/how-manage-packages). It's definitely not the same thing, but you know us nostalgic.

Nostalgia aside, I wanted to summarise a collection of favourite formulas that I find super useful for my daily tasks, specifically thinking about a daily developer life.

#*EMP (Nginx, Mysql, PHP) Stack

Homebrew allows a very quick deployment of a *EMP stack, which I prefer compared to a container or virtual environment.
```
brew install nginx php mysql
```

Configuration files are located in `/usr/local/etc/` and is the same as a Linux box.

Formulas are updated very quickly: PHP 8.0 was available on homebrew just a few days after the stable release.

#AWS

Who doesn't need to use AWS on a daily basis to optimise/deploy stuff or simply monitor their infrastructure?
```
brew install awscli
```

#CURL & WGET

Can't live without them.
```
brew install curl wget
```

#RCLONE

[Rclone](https://rclone.org/) is incredibly useful to quickly transfer files across different cloud services. Personally, I've used to backups S3 buckers to Google Drive or replicate S3 buckets into Azure and it works splendidly.
```
brew install rclone
```

#PHP-CS-FIXER

[Php-cs-Fixer](https://github.com/FriendsOfPHP/PHP-CS-Fixer) is a great command-line utility to enforce coding standards. Easily integrated into deploy flows or simply in your favourite editor, in my case Sublime.
```
brew install php-cs-fixer
```

Another alternative I tested and liked is [phpcbf](https://github.com/squizlabs/PHP_CodeSniffer/wiki/Fixing-Errors-Automatically) which you can install via composer
```
composer global require squizlabs/php_codesniffer
```

#STRIPE

[Stripe](https://stripe.com/) CLI is incredibly useful for monitoring of activities, frauds, and automated tests/reporting. The Webhook listener is also very handy.
```
brew install stripe
```

#HTOP

[HTOP](https://htop.dev/) is a great improvement of top, which I use everywhere, from DEV servers to my own laptop. I know it's not as modern as [YTOP](https://github.com/cjbassi/ytop) but I got used to it and can't get to change.
```
brew install htop
```