teleren/devto huggingface dataset:
Cómo forzar el tamaño de la ventana de una aplicación en Linux
Tags: linux, tutorial
Published: 2020-08-05 16:01:36

Encontré este método para forzar externamente el tamaño de la ventana de una aplicación. Necesitaba hacer esto porque en la actualidad las aplicaciones Flutter de escritorio (Linux) no cuentan con una forma de definir el tamaño de la ventana al abrirse (o por lo menos no logré encontrar una forma de hacerlo).

## Identificar el nombre de la aplicación que se quiere redimensionar.
- Abrir la aplicación a redimensionar.
- Buscar el nombre del proceso en ejecución, por ejemplo ejecutando el comando `ps x` o con algún monitor de procesos visual. Algunos ejemplos en mi caso podrían ser `firefox`, `mousepad`, `Telegram`, etc.

## Redimensionar la ventana
- Asegurarse de que la aplicación a redimensionar se encuentra **sin maximizar**, caso contrario, no funcionará.
- Ejecutar el siguiente comando reemplazando `nombre_aplicación` por el nombre del proceso y las dimensiones por las deseadas, en donde 500 es el ancho y 450 el alto:

`xdotool windowsize $(xdotool search --name "nombre_aplicación" | tail -1) 500 450`

## Notas
- Por alguna razón este método no funciona con todos los procesos, es cuestión de probar o de aprender a usar correctamente la herramienta, algo que por el momento no tengo interés en hacer porque ya cumple con lo que necesito :smile:
- Hay aplicaciones que tienen tamaños mínimos predefinidos, por lo que si se especifica con xdotool un tamaño menor, se respetará igualmente el definido internamente por la aplicación.
- Tip: Se puede crear un alias o agregar el comando al lanzador de la aplicación para forzar el tamaño cada vez que se abre.
Gulp vs Grunt
Tags: gulp, grunt, taskrunner, node
Published: 2020-08-05 15:57:08

Automation tools are great--they save us time and help us avoid human error. They can do repetitive tasks at a much faster rate and with better precision, which frees us up to do more productive tasks.

I've been looking at both tools and here is my takeaway.

## What does Gulp and Grunt do?
Both have the ability to check for new files, or changes to files, in certain directories and run tasks applicable to them. Once you've set up the processes you want to run and apply them to your existing files, any new/modified files will automatically have the processes applied to them as well.

Gulp and Grunt are both use Node.js and plugins to accomplish the automated tasks you've set up. They both use `.js` files to build tasks (i.e. `gulpfile.js` for Gulp, `gruntfile.js` for Grunt).

**Common tasks that both tools can accomplish and/or automate include:**
* Compressing image files
* Eliminating debugger and console statements from scripts
* Minifying, concatenating, and cleaning up JavaScript and CSS
* Linting code for errors
* Updating databases

---

## Gulp vs Grunt: What's different?
**Gulp**
* Each plugin is designed to do **one** thing very well
* Has **4000+** plugins (at the time of this article)
* Faster than Grunt - uses streams and handles tasks in memory (only one file is written)
* Can process **several** tasks at the same time
* Relies more on **code** than configuration (less friendly)

**Grunt**
* A plugin can be used to do **multiple** tasks at the same time
* Has **6000+** plugins (at the time of this article)
* Uses data configuration files similar to JSON
* Need to declare source and destination files for all tasks
* Can process **one** task at a time
* Relies more on **configuration** than code (friendlier to a larger number of users)

---

Which task runner(s) do you use and why?
Js Documentation Page
Tags: codepen
Published: 2020-08-05 11:58:07

<p>Responsive Web Design Projects - Build a Personal Portfolio Webpage</p>

<p>Objective: Build a CodePen.io app that is functionally similar to this: <a href="https://codepen.io/freeCodeCamp/full/zNBOYG" target="_blank">https://codepen.io/freeCodeCamp/full/zNBOYG</a>.</p>

<p>Fulfill the below user stories and get all of the tests to pass. Give it your own personal style.</p>

<p>You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!</p>

<p>User Story #1: My portfolio should have a welcome section with an id of welcome-section.</p>

<p>User Story #2: The welcome section should have an h1 element that contains text.</p>

<p>User Story #3: My portfolio should have a projects section with an id of projects.</p>

<p>User Story #4: The projects section should contain at least one element with a class of project-tile to hold a project.</p>

<p>User Story #5: The projects section should contain at least one link to a project.</p>

<p>User Story #6: My portfolio should have a navbar with an id of navbar.</p>

<p>User Story #7: The navbar should contain at least one link that I can click on to navigate to different sections of the page.</p>

<p>User Story #8: My portfolio should have a link with an id of profile-link, which opens my GitHub or FCC profile in a new tab.</p>

<p>User Story #9: My portfolio should have at least one media query.</p>

<p>User Story #10: The height of the welcome section should be equal to the height of the viewport.</p>

<p>User Story #11: The navbar should always be at the top of the viewport.</p>

{% codepen https://codepen.io/isurojit/pen/mdeWMgZ %}
The Developer's Deployment Checklist
Tags: devops, cicd
Published: 2020-08-05 15:29:09

---
title: The Developer's Deployment Checklist
published: true
description: Make sure that you know what you're deploying to production and how it's going to get there.
tags: #devops, #cicd
cover_image: https://cdn-images-1.medium.com/max/1600/1*XquoK2QaftPaoEz3df3XAg.png
---

I was struggling setting up a new deployment pipeline for this project I'm working on using [Conducto](https://www.conducto.com/docs/), so I decided to make a checklist to help. Hopefully it'll help somebody else!

1. Make a list of all of the things that should be included in this release
2. Make sure that any open PRs have been adequately reviewed
3. Make sure that everything is merged or rebased to the same branch
4. Run all of your unit tests locally
5. Do some manual user testing
6. Build/update a pipeline that will handle your code and deploy to the staging environment
 - Set environment variables
 - Do any code formatting
 - Run any unit tests
 - Run any integration tests
 - Set the rules around deploying from new branches, tags, or repos
 - Set the path to the cloud service you use
7. Let the team know that the new features are up on staging and get some testing in to catch any weird behavior
8. Build/update a pipeline that will handle your code and deploy to production
 - Clear the server cache
 - Set environment variables
 - Do any code formatting
 - Run any unit tests
 - Run any integration tests
 - Set the rules around deploying from new branches, tags, or repos
 - Set the path to the cloud service you use
9. Track server utilization
10. Track exception rates
11. Have a post deploy meeting to see if there's anything that could be done better next time

This is just a quick, simple deployment strategy. Let me know if there's something you would add or move around!
What I need to do to be a Software Engineer?
Tags: discuss, beginners, career
Published: 2020-08-05 15:14:43

So I read that tweet and start to think about carrer again.
Is a CS degree an essential skill to be a software engineer?
What does a software engineer do comparated to a guy that write code like a fullstack developer?
I know it's just titles but we need to have a goal, and my goal is to be a Software Engineer, and I don't have a CS degree and don't want to do it so early.
- What do you think about a CS degree? 
- Do you have one? 
- Are you a software engineer without a degree?

{% twitter 1290191239585792004 %}
Awesome things for awesome people - July 2020
Tags: webdev, css, animation, javascript
Published: 2020-08-05 15:09:44

Because not everyone signs up to my [newsletter](https://tinyletter.com/jh3y).

Here's a roundup of some of the things I made in July 👍

# CSS 3D Toaster
Tap to flip that toast! And there are some hidden features here too!
{% codepen https://codepen.io/jh3y/pen/KKVjLrx %}

# Use HSL && scoped CSS variables to prototype UI
A small demo showing how to leverage HSL && CSS variables to rapidly prototype UI components.

You can check out a [video walkthrough here](https://egghead.io/lessons/css-use-the-hsl-color-space-and-scoped-css-variables-to-prototype-ui-variants).

{% codepen https://codepen.io/jh3y/pen/ZEQdZeK %}

# An animated single div tree!
An animated tree built with [Pxl](https://pxl.netlify.app).

{% codepen https://codepen.io/jh3y/pen/ExPBLgo %}

# And here's the apple!
{% codepen https://codepen.io/jh3y/pen/KKVjGdZ %}

# OctoBear
Saw a lot of custom OctoCats in July. So I made this abomination!

{% codepen https://codepen.io/jh3y/pen/yLeWPqJ %}

# Ship it!
Another GreenSock button to add to the collection 😅 Click this one for some fun animation. Sound on.

{% codepen https://codepen.io/jh3y/pen/zYrXKBm %}

# BRB
Finally created a BRB scene for my [live stream](https://twitch.com/jh3yy).

{% codepen https://codepen.io/jh3y/pen/MWKxxPE %}

# Image reveals with CSS filter && clip-path
Create "fancy" image hover reveals combining these two properties 😎

{% codepen https://codepen.io/jh3y/pen/LYGaNby %}

# Rambear
No words. Rambear has been deployed to help fire out code.

{% codepen https://codepen.io/jh3y/pen/QWyYZbP %}

# No div truck
A little tongue in cheek perhaps. But, after seeing lots of single div, it was time for a "No div". The scene is built using the pseudo-elements on the `body` tag.

{% codepen https://codepen.io/jh3y/pen/VweqyyW %}

# CSS is Cake!
Tap each slice to reveal something different.

{% codepen https://codepen.io/jh3y/pen/KKVGoGJ %}

# CSS Monument
It was a bit of a 3D CSS month.

{% codepen https://codepen.io/jh3y/pen/bGEQpop %}

# Slick animated underlines with CSS
These are neat. If you need something a little different for your project. I have [a walkthrough here](https://egghead.io/lessons/css-create-an-animated-underline-effect-using-css-transition-and-css-background-position).

{% codepen https://codepen.io/jh3y/pen/gOPjBPM %}

# CSS Cyberpunk buttons
We attempted to make some Cyberpunk-esque buttons on the stream by digging around the site.

{% codepen https://codepen.io/jh3y/pen/BajVmOg %}

# Thanos simulator with canvas
Tap or click your fingers(Make a noise near your mic 😅) to make half the people disappear!

{% codepen https://codepen.io/jh3y/pen/LYGewyN %}

# Animated Google Fonts
You can now grab variable fonts out of Google Fonts! That brings many benefits. But, one fun thing is animating the axis on a font 😅

{% codepen https://codepen.io/jh3y/pen/GRoOVNy %}

I also put together an article about this.

{% link https://dev.to/jh3y/animated-google-fonts-193d %}

-----

Wanna see more? Reach out and say "Hi!" on [Twitter](https://twitter.com/jh3yy)!
Using Next.js Link Component with Material UI Buttons and Menu Items
Tags: nextjs, materialui, mui, react
Published: 2020-08-05 15:07:02

> Update
 1. This blog post refers to Material-UI V4 but it should work with the V5 also.
 2. I've created a template repository for using Next.js with Material UI which you can use as a starting point.
>
demo: https://material-pwa.vercel.app/
>
repository: https://github.com/ivandotv/nextjs-material-pwa

[Link component](https://nextjs.org/docs/api-reference/next/link) is a *magic* component of next.js framework, that does the routing both client-side and server-side (properly rendering links for SEO purposes).

[Material UI](material-ui.com/) is a most popular framework for implementing [Google's material design system](https://material.io/design).
Since both frameworks expect a certain HTML structure to be present in order to render their components, using them together is not straightforward as it seems, luckily it's not that hard at all.
 
In this article, I'm going to show you how to properly render material UI buttons and menu items as nextjs links.

Rendering a material UI `button` is very easy, just wrap the button component with the nextjs link component and make sure you use `passHref` property on the link component. 
```javascript
<Link href="/about" passHref>
  <Button variant="contained" color="secondary">About</Button>
</Link>
```
[`passHref`](https://nextjs.org/docs/api-reference/next/link#if-the-child-is-a-custom-component-that-wraps-an-a-tag) must be used every time you use a custom component inside the `Link` component. Without it when you test your code client side it will appear that everything is working because the `Link` component will properly route the links however the generated `a` tag will not have a `href` property, so website crawlers will see no links, which will negatively impact your SEO. 
The reason it appears that it works is that the `link` component has a value for `href` and it just listens to click events on its child components and then does the routing.

You can confirm this by disabling javascript in the browser and trying to navigate nextjs app, you will see that the links won't work.

### Using ListItem Component

[`ListItem`](https://material-ui.com/components/lists/) component is used inside all kinds of material UI menus, and it is a little bit trickier to set up because the generated HTML structure of the component is more complex than a simple button component.

Outhere on the internet you will find a lot of solutions that are using higher-order components and passing props all over the place however, the solution is very simple and it is offered by the API of the `ListItem` component itself. 
What we need to do is to change the underlying element of the `ListItem` component to be an `a` tag. We can do this by using the `component` property of the `ListItem`.
```javascript
<Link href="/about" passHref>
 <ListItem button component="a" onClick={onClick}>
  <ListItemText>About</ListItemText>
 </ListItem>
</Link>
```
And that's it, links will work on the client-side, and they will be properly rendered on the server-side.
nvm command not found :(
Tags: node, nvm, wsl, ubuntu
Published: 2020-08-05 14:59:06

Node Version Manager (NVM) is a tool used to manage multiple active Node.js versions.

If you're trying to install NVM(Node Version Manager) in WSL you probably may run into this error. 
```bash
-bash: nvm: command not found
```

### What is WSL ?
The Windows Subsystem for Linux lets developers run a GNU/Linux environment -- including most command-line tools, utilities, and applications -- directly on Windows, unmodified, without the overhead of a traditional virtual machine or dual-boot setup.

### How to fix this error ?

- **Installation**

  To install nvm use the following cURL or Wget command
```
bash curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
```

```bash 
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
```

- **nvm command not found** :(

Running either of the above commands downloads a script and runs it, but if you type nvm and if you get ``bash: nvm: command not found`` it happens because the source is missing from the following profile files 
```bash
~/.bash_profile, ~/.zshrc, ~/.profile, or ~/.bashrc
``` To fix this simply follow these steps.

- **Steps**
  
  1) Type the following command.
```bash
nano ~/.zshrc
```
  
  2) Add the source lines from the snippet below to the correct profile file at the bottom.
```bash
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
```
 
  3) Close and restart the terminal it should fix the error!

The official documentation on [GitHub](https://github.com/nvm-sh/nvm#installing-and-updating) is really helpful.

Thanks for reading!
Fund Accounting 101: What Is Fund Accounting?
Published: 2020-08-05 14:54:44

Fund accounting is a detail-oriented, deadline-driven role designed to streamline back-office administration for an investment fund so that fund management can concentrate on its core tasks of fundraising and the acquisition of portfolio assets. With the <b><a href="https://www.phxa.com/fund-accounting/">right fund accounting partner</a></b>, an investment fund can rely on systematic day-to-day tracking of portfolio investments, their income, expenses and changes in value, cash flow in and out of the fund, management of investor needs and interaction with auditors and regulators. Fund accounting will produce ongoing reporting that monitors the vital statistics of the fund, supports investor information needs, aids the production of tax documents and simplifies audits and regulatory filings.

<b>Read More:</b><a href="https://www.phxa.com/news/what-is-fund-accounting/">Fund Accounting 101: What Is Fund Accounting?</a>

<b>Contact Details:</b>
415-485-4500
<a href="https://www.phxa.com/">Fund administrator Service</a>

<b>Visit Reference Profile Websites:</b>
<a href="https://bit.ly/31l1yuj">https://bit.ly/31l1yuj</a>
<a href="https://bit.ly/3gxv32a">https://bit.ly/3gxv32a</a>
<a href="https://bit.ly/2DF23qY">https://bit.ly/2DF23qY</a>
<a href="https://bit.ly/3fsFgvv">https://bit.ly/3fsFgvv</a>
<a href="https://bit.ly/2PnoF1I">https://bit.ly/2PnoF1I</a>
<a href="https://bit.ly/2C4nLnM">https://bit.ly/2C4nLnM</a>
<a href="https://bit.ly/33vfqob">https://bit.ly/33vfqob</a>
<a href="https://bit.ly/2EUrXaH">https://bit.ly/2EUrXaH</a>
<a href="https://bit.ly/33u44kD">https://bit.ly/33u44kD</a>
<a href="https://bit.ly/3ke736z">https://bit.ly/3ke736z</a>
<a href="https://bit.ly/3ke736z">https://bit.ly/3ke736z</a>
<a href="https://bit.ly/39Yq0oZ">https://bit.ly/39Yq0oZ</a>
<a href="https://bit.ly/31l6y1Y">https://bit.ly/31l6y1Y</a>
<a href="https://bit.ly/39YRSJH">https://bit.ly/39YRSJH</a>
<a href="https://bit.ly/3fvIi2b">https://bit.ly/3fvIi2b</a>
<a href="https://bit.ly/2Dq9jXE">https://bit.ly/2Dq9jXE</a>
<a href="https://bit.ly/3fDJcdb">https://bit.ly/3fDJcdb</a>
<a href="https://bit.ly/31pUBbr">https://bit.ly/31pUBbr</a>
<a href="https://www.phxa.com/transfer-agency/">Fund Transfer Agent</a>
Take your GitHub to the next level
Tags: github, readme
Published: 2020-08-05 14:46:25

Recently I have seen the video of **codeSTACKr**, where he showed how to use the readme and Github action to create a beautiful GitHub profile. If you want to create something like this for your profile follow the youtube tutorial of **codeSTACKr**, he explained everything in detail. 

{% youtube ECuqb5Tv9qI %}

Don't forget to check my GitHub, there are some cool projects.
{% github arnabdeypolimi/arnabdeypolimi %}

Make your GitHub beautiful!
Enjoy!
Vectors and Matrices
Tags: vector, matrix, machinelearning, datascience
Published: 2020-08-05 13:53:34

![https://miro.medium.com/max/1756/1*UsrXoK2aHGPNtVBqmnwoig.png](https://miro.medium.com/max/1756/1*UsrXoK2aHGPNtVBqmnwoig.png)

Vectors are a collection of co-ordinates that a point has in a given space. They are defined by their magnitude and direction.

![https://miro.medium.com/max/1741/1*RrAXw2ka-y8zym7Fh3O83Q.png](https://miro.medium.com/max/1741/1*RrAXw2ka-y8zym7Fh3O83Q.png)

For n-dimensions there are n-coordinates in the given space.

![https://miro.medium.com/max/1753/1*8lrgqR150k90ta0WlhqV5Q.png](https://miro.medium.com/max/1753/1*8lrgqR150k90ta0WlhqV5Q.png)

Unit vector has a magnitude of one. To find the unit vector of any vector divide each element of the vector by the vectors length.

![https://miro.medium.com/max/1746/1*puB82lx2Qg91kSpICSUpfQ.png](https://miro.medium.com/max/1746/1*puB82lx2Qg91kSpICSUpfQ.png)

The projection of vector x on vector y can be found by dividing the dot product of x and y by the magnitude of the vector y and multiplied by vector y . The projection of vector x is in the direction of y vector.

![https://miro.medium.com/max/1748/1*o_pW8Evl_fllL5VWHLUMTg.png](https://miro.medium.com/max/1748/1*o_pW8Evl_fllL5VWHLUMTg.png)

This is an example on projecting vector x on vector y.

![https://miro.medium.com/max/1754/1*_nYs_6eRuBLburjkNM9Qmw.png](https://miro.medium.com/max/1754/1*_nYs_6eRuBLburjkNM9Qmw.png)

Above is an example to calculate the angle between two vectors.

![https://miro.medium.com/max/1753/1*u_jnY2kUB109oFN1qw1FuQ.png](https://miro.medium.com/max/1753/1*u_jnY2kUB109oFN1qw1FuQ.png)

Two vectors are said to be orthogonal when the angle between them is 90°. That is the dot product between the vectors should be zero.

# **Matrices :**

![https://miro.medium.com/max/1758/1*iliJemU_mPtkXOZgpLdJYg.png](https://miro.medium.com/max/1758/1*iliJemU_mPtkXOZgpLdJYg.png)

Matrices are a collection of row vectors or column vectors. Data we deal are mostly is in the form of matrices. We manipulate these matrices to find relations and make predictions.

Here is a useful playlist :

https://www.youtube.com/playlist?list=PL2jykFOD1AWazz20_QRfESiJ2rthDF9-Z
Hit 500 Signups
Published: 2020-08-05 14:38:02

Massive milestone for Proxies API. I haven't documented the progress of this app on dev.to because I didn't know about its existence but believe me its been quite a ride. I came close to shutting down a couple of times and Covid almost made sure I did it. But here I am. I am quite proud I stuck through till here. Proxies API does what it says in the name. It is a rotating proxy API for web scrapers. We pass web page fetch requests through a network of over 2 million high speed, residential proxies and render pages, solve CAPTCHAs, handle sessions, cookies and other issues so you never get blocked.