teleren/devto huggingface dataset:
Cinnamon Desktop: Alt + Tab Switcher Style
Tags: cinnamon, desktop
Published: 2018-11-07 01:51:05

---
title: Cinnamon Desktop: Alt + Tab Switcher Style
published: true
description: It is a small tip about Cinnamon desktop environment, which is well known as the standard of Linux Mint. Cinnamon has a lot of useful function and elegant effect, and most of them satisfy me. The default style of "alt + tab" windows switcher is one of few exceptions to me.
tags: cinnamon, desktop
---

### Summary

It is a small tip about [Cinnamon desktop environment](https://en.wikipedia.org/wiki/Cinnamon_(software)), which is well known as the standard of [Linux Mint](https://www.linuxmint.com/).

I have moved from [Mate](https://mate-desktop.org/) to Cinnamon recently.
(Well, I like Mate for its good balance between lightweight and usefulness.)

Cinnamon has a lot of useful function and elegant effect, and most of them satisfy me.
The default style of "alt + tab" windows switcher is one of few exceptions.

### Before

With too small icons, I couldn't figure out what the application is:

![](https://thepracticaldev.s3.amazonaws.com/i/v0f4p7udi5soh1l13orr.png)

### Configuration

In the system settings window, go to [Preferences] - [Windows]:

![](https://thepracticaldev.s3.amazonaws.com/i/gc9dg3qqezbjmk4wlubt.png)

Choose [Alt-Tab] tab and set up [Alt-Tab switcher style]:

![](https://thepracticaldev.s3.amazonaws.com/i/un8sosz7fd0vqfofbmvf.png)

The options are:

- Icons only
- Thumbnails only
- Icons and thumbnails
- Icons and window preview
- Windows preview (no icons)
- Coverflow (3D)
- Timeline (3D)

### After

With bigger icons and also thumbnails:

![](https://thepracticaldev.s3.amazonaws.com/i/sa0yz393wt2xpqrqww4l.png)

It's better to me : )
Write CSS variables faster in SCSS
Tags: css, sass, scss, frontend
Published: 2018-11-07 00:33:08

---
title: Write CSS variables faster in SCSS
published: true
description: Because the whole var(--myVar) is a bit cumbersome.
cover_image: https://thepracticaldev.s3.amazonaws.com/i/78n1n06si8x8xoxe7bf3.png
tags: css, sass, scss, frontend
---

**Update** (October 20th, 2022): while this helper remains cool, I have decided to not use it outside of personal projects. Compared to IDE auto-completion, its benefits might not be worth the cognitive load linked to any additional abstraction.

---

I love [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/var) ([here’s why](https://dev.to/meduzen/comment/6k2d)) but the syntax isn’t very readable to me:
- there’s this double hyphen thing in the name: `--varName`;
- the `var` function is required to access it: `color: var(--myColor);`.

Crazy. Let’s simplify this with…

## The `v()` function!

```scss
@function v($var) {
  @return var(--#{$var});
}
```

- [Demo on Codepen](https://codepen.io/meduzen/pen/YRyEPe?editors=1100)
- [NPM package](https://github.com/meduzen/v-helper)!

## Usage

First, define your CSS variables normally:

```css
:root {
  --primary: #000;
  --bg: #fff;
}
```

Then, use it with `v(varName)`.

```scss
html {
  background: v(bg);
  color: v(primary);
}
```

It generates this:

```css
html {
  background: var(--bg);
  color: var(--primary);
}
```

That’s only a 4 characters win, but it’s a cool one for readability and you’ll use it often.

That’s it!

## Optional second parameter as fallback

As it was [pleasely mentioned](https://dev.to/equinusocio/comment/6kda) in the comments, the CSS `var()` function can take a fallback as second parameter: if the wanted CSS variable isn’t defined or has an understandable value for the browser, this default value will be used.

So, let’s update `v()` accordingly:

```scss
@function v($var, $fallback: null) {
  @if($fallback) {
    @return var(--#{$var}, #{$fallback});
  } @else {
    @return var(--#{$var});
  }
}
```

Now, let’s write something that benefits from the optional fallback, like a “pin the video in a corner” feature:

{% codepen https://codepen.io/meduzen/pen/EOPoao %}

## One small bit of fun

Do you know that `--` is a valid name for a CSS custom property? Unfortunately, it’s hard to declare and use it in SCSS. But the `v()` helper [makes your life a bit easier](https://github.com/meduzen/v-helper#---is-a-valid-custom-property-name). ✌️

## Other attempts that could have been cool, but…

If you’re wondering how to improve my package, I compiled [three unsuccessful attempts in a Gist](https://gist.github.com/meduzen/7ada5fc3d7296767c9e7f677229d60d4). Feel free to propose CSS variable tips!
Quick tip for typing Markdown links or images
Tags: markdown
Published: 2018-11-06 23:54:11

---
title: Quick tip for typing Markdown links or images
published: true
description: 
tags: markdown
---

I always had problems to type the links in Markdown and I never remembered if parenthesis or the brackets should wrap the text or the link. I solved this by remembering as a function that receives a url:

```
[text](url)
```

;)
Dev team size
Tags: discuss
Published: 2018-11-06 23:31:34

---
title: Dev team size
published: true
description: A conversation about the optimal team
tags: discuss
---

Given a company that supports a web app and ios mobile app (both apps use React), what would be the ideal dev team size and distribution be? (In your opinion)

By distribution, I mean how many back-end devs, front-end devs etcetera.
VScode completes things I don't want it to complete.
Tags: help, elm, vscode
Published: 2018-11-06 23:12:22

---
title: VScode completes things I don't want it to complete.
published: true
description: Upon hitting enter key VScode completes the syntax in a way I don't want.
tags: help, elm, vscode
---

This upon hitting the enter key >

![VScode completes the syntax](https://thepracticaldev.s3.amazonaws.com/i/yhnagb6tlk7ka46q0jjp.png)

turns into this >

![VScode completed the syntax](https://thepracticaldev.s3.amazonaws.com/i/48jub4amvop1p07c9one.png)

It should actually start a new line with indentation instead.

**********************************

![Let In expression in VScode](https://thepracticaldev.s3.amazonaws.com/i/9hv55imwxkhinr4fm8pb.png)

When I hit enter it becomes this >


![weird VScode behavior](https://thepracticaldev.s3.amazonaws.com/i/vdb0xaruyyvmumgq5aad.png)

Again it should start a new line with indentation.

***********************************

How do I make VScode not make a new line?

From this >

![](https://thepracticaldev.s3.amazonaws.com/i/pu2ttjebwxdih13c7261.png)

The red line indicates where the cursor is.

Into this >

![](https://thepracticaldev.s3.amazonaws.com/i/l4su0jmmhqbc0xf1k2wz.png)

The green line indicates where I want the cursor to be so I can type code like this >

![](https://thepracticaldev.s3.amazonaws.com/i/e5uijnrko76hyqj2uku4.png)

********************************

The solution to the enter problem:

![The solution to the enter problem with VScode](https://thepracticaldev.s3.amazonaws.com/i/xl37jimyxz4eysbwhp7v.png)

Go to the setting. Type "enter" in the search and turn off "Accept Suggestion On Enter".
Game Off 2018 (1)
Tags: pixelart, gamedev, gameoff2018
Published: 2018-11-06 22:39:34

---
title: Game Off 2018 (1)
published: true
description: The map of a new game!
tags: pixelart, gamedev, game off 2018
---

So it's my first post here so... Hello? My name is Bigaston and I'm a young beginner game dev. For now I studies computer science in France but... It's not the subject of today!

Today I walk to talk to you about a new project I start : a game for the [Game Off 2018](https://itch.io/jam/game-off-2018)

The theme is **hybrid** so I'm going to made a farming game where you have to plant some flower and hybrid them to earn more and more money!

The first thing I do is to create some tiles and a basic map!

![The world](https://thepracticaldev.s3.amazonaws.com/i/5goev048sn8jrlwl0cpg.png)

I think I'm going to use this place to share my progress!

Thanks and have a nice day!
add one
Tags: rust, algortihm
Published: 2018-11-06 21:20:46

---
title: add one
published: true
description: 
tags: rust, algortihm
cover_image: https://i.imgur.com/hut95Zz.png
---

Here is a little program I wrote in Rust that allows you to add one to any number


{% github o2sh/add-one %}

The idea is pretty simple. Indeed, since incrementing a number leaves most of it unchanged, it's much faster to work on the decimal digits itself.

As a consequence, after breaking the input into a list of digits, we just have to increment or decrement (in case of negative input) the last number.


####*Not so fast...*

What if the number has trailing nines for positive inputs or trailing zeros for negative numbers ?

Well, if the number has trailing nines (e.g.: 7561325999) or trailing zeros (e.g.: -1645000), we just need to increment the last "non-nine" digit (or decrement the last "non-zero" digit) and switch the nines into zeros and zeros into nines (for negative inputs).


And, in the case of floating point inputs (e.g.: 15691.12313) we simply ignore the decimal part and apply the previous rule to the integer part.


####*Unless...*


...the input belongs to ]-1,0[ (e.g.: -0.2 + 1 = 0,8 (not 1.2!)). In which case, we have to give it a special treatment.


Thanks for reading ! :)
A Basic Example on jQuery Events
Tags: jquery, javascript, beginners
Published: 2018-11-06 14:28:07

---
title: A Basic Example on jQuery Events
published: true
description: a simple example of using jQuery event method "on" is provided
tags: jQuery, JavaScript, Beginners
---
jQuery is a JavaScript library that is quite salient on event-driven responses to page elements, allowing users to interact with pages through text input. A simple example is easily demonstrated below. 

First, build out a simple HTML page that allows for search, add, and delete functionality to an existing list of names.  The list is hard coded as an array which, then, allows for array methods to be combined with the event methods. The HTML file is below:

<img src="https://thepracticaldev.s3.amazonaws.com/i/4tjglwu4jcmbs82gzla0.png"/>

Next, code a simple CSS file.  The code below is the only necessary code that is later combined with the search button to provide a page color change. The color will change to blue after entering an existing name from the list and clicking search.

<img src="https://thepracticaldev.s3.amazonaws.com/i/xga8d65f5axhsi5nqgsg.png"/>

The list, called student list, is coded into the app.js file below. 

<img src="https://thepracticaldev.s3.amazonaws.com/i/o36t5o9kn83gdpbasl4p.png"/>

Then, a render function is created to allow the list to render to the page below the input field.

<img src="https://thepracticaldev.s3.amazonaws.com/i/bjel37rwe52briiyix82.png"/>

The add, search and delete functions are added to the code using jQuery event method “on”, as seen below.

<img src="https://thepracticaldev.s3.amazonaws.com/i/si02mz17t7d5jhoblqqh.png"/>

It is as simple as that.  You can now add names to the existing list that will render to the page at the bottom of the existing list. You can delete names from the existing list and the new list will render to the page without the deleted name.  Or, you can search for names on the existing list. After you input a name from the existing list and you click the search button, the body of the page will change to blue.

The page rendering of the student list prior to entering text or clicking any of the buttons is shown below. Some additional code was added to the CSS file for this simple style.

<img src="https://thepracticaldev.s3.amazonaws.com/i/x3dmk7u5x1h7x8qy9wss.png"/>

The page rendering is as follows after an existing list name is entered in the field and the search button is clicked.

<img src="https://thepracticaldev.s3.amazonaws.com/i/af7z8l58dsey6al4czrd.png"/>
Unequally distributed quantity
Tags: python, combinatorics
Published: 2018-11-06 20:04:19

---
title: Unequally distributed quantity
published: true
description: How to split a quantity unequally
tags: python, combinatorics
---

Suppose that you have to divide or to distribute a quantity in three (maybe a rent payment), but you want to do it unequally.

It can be done more or less mentally, but I wanted to have
quickly all the possibilities and decided to write some code to do it.

I though how it is done mentally. For instance, dividing 990 units in 3 parts:

   1. You have three parts of 330 each one
   2. Subtract 5 to one and add it to another
   3. Repeating that you obtain different possibilities to divide initial quantity


## Translation to code.

First approximation to the problem was to establish a minimum that each person would pay. Let’s to say 250. 250×3= 750, so it remained 240 units to share out.

I wanted a granularity of 5 units, so there was in fact a 24/5=48 items (of 5 units) to share out.

It was not trivial for me to lay out the problem until I realized that this matched with some well known combinatorial problem that I didn’t remember. After a search I found exactly what I was looking for: [Start and bars](https://en.wikipedia.org/wiki/Stars_and_bars_(combinatorics))
__It can be used to solve many simple counting problems, such as how many ways there are to put n indistinguishable balls into k distinguishable bins.__

It can be easily done with Python using [combinations function](https://docs.python.org/2/library/itertools.html#itertools.combinations)

```python
 import itertools
 
def combinations(n, k):
	return itertools.combinations(range(n), k)
 
def calculate_rent(n, k):
	for c in combinations(n, k):
		if sum(c)==n:
			yield c
```
*combinations(n,k)* return *r* length subsequences of elements from the input iterable n. Afterwards, we only want subsequences whose sum of the k bins be equal to n.

Just left to write some auxiliary code in order to print the list. Due to what we have obtained is a list of ways  to put n indistinguishable balls (48) into k distinguishable bins (3), it is necessary to multiply each ball by our granularity (5) and sum the minimum.

```python
total = 990
minimum = 250
people = 3
granularity = 5
remain = total - minimum*people
rent_combinations = calculate_rent(remain/granularity,people)
for rents in rent_combinations:
	print([5*i+minimum for i in rents])
```

Below is displayed a partial screen-shot of the 192 total elements of the output.

![Output](https://i1.wp.com/myram.xyz/wp-content/uploads/2018/10/output-1.jpg?w=760&ssl=1)

[Original post in myram](https://myram.xyz/unequally-distributed-divide-quantity-python/)
Readability with break statements
Tags: awspython
Published: 2018-11-06 19:52:06

---
title: Readability with break statements
published: true
description: 
tags: aws python
---

There is a widespread belief that `break` and `continue` statements are a bad programming practice.  [See this StackOverflow thread for an discussion.](https://softwareengineering.stackexchange.com/questions/58237/are-break-and-continue-bad-programming-practices)  They can make code less readable if they make the intent less clear.  In some cases, though, I believe they are actually better than the alternatives and can improve readability.

Here's a recent example from working with AWS in Python.

```python
ssm = boto3.client("ssm")
response = ssm.send_command(...)
command_id = response["Command"]["CommandId"]
while True:
  invocation = ssm.get_command_invocation(... command_id ...)
  if invocation['Status'] not in ['Pending', 'InProgress']
    break
  time.sleep(5)
```

This code sends a command to AWS SSM, and gets the status of the invocation in a loop, exiting when completed.  It will also pause before retrying.  

Note that the only way to terminate this loop is the `break` statement.

I thought of a few alternatives to avoid a `break` but actually like them less.

One option is to bootstrap an initial request outside the loop, so you can include the status directly on the `while` condition:

```python 
invocation = ssm.get_command_invocation(... command_id ...)
while invocation['Status'] not in ['Pending', 'InProgress']:
  time.sleep(5)
  invocation = ssm.get_command_invocation(... command_id ...)
```

I don't like this as much because of the duplication.

Another way to address this is by using a flag to indicate completion:

```python
done = False
while not done:
  invocation = ssm.get_command_invocation(... command_id ...)
  done = invocation['Status'] not in ['Pending', 'InProgress']
  time.sleep(5)

```

No duplication here, but the flag variable is extra clutter, and is not really that much more readable than the `break` version, because it's not obvious from the `while` statement itself what condition will cause the loop to terminate.  Also, even if the loop completes on the first iteration, you still have to `sleep` before exiting the loop -- unless you add a `break`, in which case the flag is useless.

Compared to the other options, the original version with the `while True / break` feels like the least bad, even if that conclusion is unintuitive.
Beta testers needed: New feature in elm-live
Tags: elm, feedback, elmlive, opensource
Published: 2018-11-06 19:49:08

---
title: Beta testers needed: New feature in elm-live
published: true
description: You can now add multiple args to --before-build and --after-build flags
tags: elm, feedback, elm-live, oss 
---

I just released a beta for elm-live that adds the ability to pass multiple arguments to the `--before-build` and `--after-build` flags. Would love some people to test it out and let me know what they think!

Install: `npm install elm-live@beta [--save-dev]`

This opens up the ability to chain multiple scripts into a script file that takes arguments, or make an npm script that chains different commands.

```sh
elm-live src/Main.elm --before-build="npm run things" --after-build="customstuff.sh --flag"
```
The Gender Pronoun Highlighter
Tags: showdev, react, node, javascript
Published: 2018-11-06 18:33:02

---
title: The Gender Pronoun Highlighter
published: true
description: Who is the default audience in an article or email? Take any text and highlight the gendered pronouns in it.
tags: showdev, react, node, javascript
---

When the default audience is always you, it is hard to realize when there are others who are not included in that default, even when it can be so obvious. As a male, I come across articles written all the time assuming I am the reader: "*He does...*", "*He listened...*", "*He showed...*", etc. It is almost always a "he". The assumed reader is almost always a man. 

Without going into all the ways that might adversely impact people who are not men, when they never see themselves reflected in the world around them, I thought it might be interesting to create a simple application to highlight exactly this problem.

I built out a Node.js application utilizing Next.js and React to dynamically highlight gendered pronouns in any given text as it is being typed into the text box. 

**It is live and can be accessed [here](https://gender-pronoun-highlighter.herokuapp.com/).**

![Screenshot of Gendered Pronoun Highlighter](https://thepracticaldev.s3.amazonaws.com/i/2fuylhnnajofrh4ccggt.png)
<figcaption>Screenshot of Gendered Pronoun Highlighter</figcaption>

The application consists of a single page, `index.js`, that has a few components that breakout the functionality into smaller parts. As the user is typing into the `textarea` the text is being saved in local state. That state is being passed to an `EvalText` component that presents it with some CSS styling in between `<span></span>` tags. 

Within the `EvalText` component each word of the input is being evaluated against three separate arrays: male, female and gender neutral pronouns. A specific CSS styling is applied to the word if it is found in either the male or female pronouns array. Right now, nothing is being done with the gender neutral pronouns, but there is room there to do some other styling as well. 

I have put up the code in a public Github repository and would love contributions.

{% github benhayehudi/pronoun_highlighter %} 

There are a few open issues already of items I identified, specifically:

1. Making the gender pronoun lists more comprehensive
2. Responsive styling
3. Adding counters to the page to increment/decrement # of each type of pronoun dynamically

Additionally, I welcome new features or other improvements. I wrote this during my lunch break so I am sure it could benefit from some love and attention! 

Last week, I blogged about [getting started with Next.js in 5 minutes](https://dev.to/benhayehudi/getting-started-with-nextjs-in-5-minutes-19ah) and it was a great experience to build out an idea that I have had for a long time using the framework. In a world where I am just about always the default audience, it is meaningful to do something, albeit a small thing, but something all the same, to help bring attention to that issue.
#AdventOfCode: What language  are you using?
Tags: discuss, adventofcode
Published: 2018-11-06 19:22:18

[Advent of Code](https://adventofcode.com/) is a December code challenge, with code puzzles running from the first through Christmas, put together by [Eric Wastl](https://twitter.com/ericwastl). I completed it last year, and I know a lot of folks here have done it in the past!

I did Python last year, but I was considering choosing something I'm less familiar with this year (something in the set of Go, Haskell, Rust, Elixir, maybe). As we're coming up on AoC 2018, does anyone else planning to participate have their language picked out for this year?
How do you view bugs?
Tags: discuss, testing
Published: 2018-11-06 19:17:30

---
title: How do you view bugs?
published: true
description: What is a bug to you? A problem or an opportunity?
tags: discuss, testing
---

What is your take on software bugs? Do they ruin your day? Do you view them as opportunities to learn about your systems? If someone wrote a clearer specification or wrote another unit test we wouldn't have them? What do you think?
Generate QR Code in Python to transfer files from laptop to mobile
Tags: python, program, hack
Published: 2018-11-06 18:24:16

---
title: Generate QR Code in Python to transfer files from laptop to mobile
published: true
description: Python program to transfer files from laptop to mobile
tags: python, program, hack
---
In my [previous article](https://dev.to/sahilrajput/transfer-files-from-laptop-to-mobile-using-python-2a89) I showed how you can transfer files from laptop to mobile with just a single command.

Inspired from the below comment. I decided to create a Python program which will generate a QR code and using that QR code you can access your laptop files in your mobile.
{% devcomment 6jdb %}

```sh
#Import libraries
import socket 
import http.server
import socketserver 
import cv2  
import pyqrcode
from pyqrcode import QRCode
from PIL import Image
```
Get IP address
```sh
hostname = socket.gethostname()    
IP = socket.gethostbyname(hostname)      
print("Your Computer IP Address is:" + IP)
```
`url1` is a variable which will concatenate the IP ADDRESS and PORT number to form a string which will converted into a QR code and after that the `http.server` will start running.
```sh
url1 = IP + ":" + "8000"

#Generate QR Code
url = pyqrcode.create(url1)
url.png("myqr.png",scale=8)
img = cv2.imread("myqr.png")
#print(type(img))
cv2.imwrite('myqr.png',img)
im = Image.open('myqr.png')
im.show()

#Start http server
Handler = http.server.SimpleHTTPRequestHandler
with socketserver.TCPServer(("", 8000), Handler) as httpd:
	print("Running your port")
	httpd.serve_forever()
```
Now, save that file with name `test.py` and run.
```sh
python test.py
```
<img width="568" alt="screenshot 2018-11-06 at 11 34 52 pm" src="https://user-images.githubusercontent.com/20112458/48084390-95cd7880-e21d-11e8-9362-6c6f8a0127e8.png">
After running,the QR code will pop up to your screen and the server starts running. 
<img width="548" alt="screenshot 2018-11-06 at 11 34 59 pm" src="https://user-images.githubusercontent.com/20112458/48084394-97973c00-e21d-11e8-9d96-ac778647e88a.png">
To access your files, scan the QR code and paste that link in your mobile browser.
<img width="654" alt="screenshot 2018-11-06 at 11 36 25 pm" src="https://user-images.githubusercontent.com/20112458/48084397-98c86900-e21d-11e8-9589-97542b3e9c54.png">

`NOTE: Your laptop and your mobile should be to same network`

Code: [GitHub](https://github.com/sahil-rajput/FileTransfer/blob/master/test.py)