teleren/devto huggingface dataset:
Theme switcher based on rofi and pywal
Tags: pywal, rofi, theming
Published: 2020-10-31 14:52:44

---
title: Theme switcher based on rofi and pywal
published: true
series: rofi as multitool
tags: pywal, rofi, theming
---

I like to have a consistent color scheme across my wallpaper, terminal and other applications. Luckily my most frequent Programs are kitty, qutebrowser, rofi and i3wm. All of theme are able to be themed via configuration file.  

- [kitty](https://sw.kovidgoyal.net/kitty/) is my terminal emulator
- [rofi](https://github.com/davatorium/rofi) is a window switcher, Application launcher  and dmenu replacement 
- [qutebrowser](https://qutebrowser.org/) is my main browser fully keyboard centric
- and [i3wm](https://i3wm.org/) is my tilling window manager

If I'm in the mood to change my wallpaper (again) I'm using [pywal](https://github.com/dylanaraps/pywal). The [installation](https://github.com/dylanaraps/pywal/wiki/Installation) is quite easy. Pywal is a tool that generates a color palette from the dominant colors from an image. It then applies the colors system-wide and on-the-fly in all of your favourite programs. 

But the standard look of rofi which is generated by pywal is not satisfying me, so i have to generate my own rofi configuration. For this, i wrote this small script: 
```bash

#!/bin/bash

# grab the purest color definition file
input="/home/maren/.cache/wal/colors"
i=0
content=""
while IFS= read -r line
do

    # generate the color list for my style config
    if [ $i -eq 0 ]; then 
        content="${content}  background:${line}00;"
        content="${content}  color$i:${line};"
    else 
        content="${content}  color$i:${line};"
    fi

    ((i++))

done < "$input"

# copied a template config to the actual config location
cp /home/maren/dotfiles/rofi/colors-rofi-template.rasi /home/maren/dotfiles/i3/rofi.rasi

# write in the 10th line my color list
sed -i "10i$content" /home/maren/dotfiles/i3/rofi.rasi

```
For qutebrowser i am using [qutewal](https://gitlab.com/jjzmajic/qutewal)

To switch between my wallpapers I have the following script. 
```bash 
#!/usr/bin/env bash

# feed rofi with the content of my wallpaper directory
wallpaper=`ls -1 /home/maren/Downloads/wallpapers | rofi -dmenu -theme ~/dotfiles/i3/rofi.rasi ` 

while getopts ld option
do
  case "${option}"
    in

    l) 
      # apply light theme
      wal -l -i /home/maren/Downloads/wallpapers/$wallpaper
    ;;
    d)
      # apply dark theme
      wal -i /home/maren/Downloads/wallpapers/$wallpaper
    ;;
esac
done

# change the rofi color theme 
/home/maren/dotfiles/scripts/rofiThemeGenerator.sh

```
i3wm is highly configurable in case of keybindings and whit a 
 fast shortkey I can define my new theme with in seconds.

```
bindsym $mod+d exec "sh /home/maren/dotfiles/i3/script/themeswitcher.sh -d" 
bindsym $mod+l exec "sh /home/maren/dotfiles/i3/script/themeswitcher.sh -l" 
```

![Theme switcher](https://dev-to-uploads.s3.amazonaws.com/i/zd0u24gfvei6hnrkt9j5.png)
PYTHON METHOD VS FUNCTION
Published: 2020-10-31 15:44:52

<a href="https://www.pythonslearning.com/2020/07/method-vs-function-python.html">python method vs function</a>
Function is block of code that is also called by its name. (independent)
The function can have different parameters or may not have any at all. If any data (parameters) are passed, they are passed explicitly.
It may or may not return any data.
Function does not deal with Class and its instance concept.
Python Method

Method is called by its name, but it is associated to an object (dependent).
A method is implicitly passed the object on which it is invoked.
It may or may not return any data.
A method can operate on the data (instance variables) that is contained by the corresponding class
Time-Saving Macros and Snippets I Use (almost) Every Day
Tags: productivity, snippets, macros
Published: 2020-10-31 15:38:14

I’ve never liked repeating myself, especially when I don’t have to.

Here are a few ways that I save time by using macros and snippets.

For some of these, I use a programmable keyboard, and for others, I use a snippet expander. For global snippets, I use [Alfred](https://www.alfredapp.com), though there are many other ways to accomplish similar results. I also make use of VS Code custom snippets.

## Function Arrow (Keyboard Macro)

Since I mostly code in TypeScript/JavaScript, I write a _lot_ of arrow functions. I have a key combo dedicated to `=>`. It arguably only saves me one character per use, but the physical movement of typing `=` followed by `>` makes a dedicated macro key totally worth it.

## JS Inline Variables (Keyboard Macro)

The other keyboard macro I use frequently inputs `${}` followed by a `left arrow`, which puts my cursor between the braces so I'm ready to type the variable.

## Contact Info (Alfred Snippet)

For this, I use snippets with Alfred. I have it set where whenever I type `$$` followed by certain triggers, it expands to something else. For example, when I type `$$li`, it expands to my LinkedIn URL. This saves a TON of time on job applications or when I'm DMing someone and want to quickly share my info.

My other triggers are  `em` for email, `po` for portfolio, `bl` for blog (here on dev.to), `tw` for Twitter, `ph` for my phone number, `gh` for GitHub, and `ij` for `imjoshellis`, which is the username I use on every site.

## React Hooks (VS Code Snippet)

If you haven't created your own snippets in VS Code yet, you should. To create your own snippets, you can open the command palette (`CMD+SHIFT+P`) and select "Preferences: Configure User Snippets".

Here's an example of one I use for React `useState()`:

```json
"useState": {
  "prefix": "rus",
  "body": [
   "const [$1] = useState<$3>($2)",
  ],
  "description": "React useState"
 }
  ```

The way it works is when I type `rus` in a React file, VS Code gives me the option to `TAB` to expand the snippet. When I do, it will put my cursor in the `$1` position, so I can write my variable names. Then, I can `TAB` to get to the `$2` position and set the initial value.

Finally, since I use TypeScript, I usually want to set the types, which is what the `$3` position is for. If you use regular JavaScript and want to use this snippet, you can remove the `<$3>`.

## What Clever Macros or Snippets Do You Use?

I'd love to hear what your favorite macro or snippet is!

Let's chat in the comments
Git & GitHub made simple - Resolving merge conflicts
Tags: github, git, beginners
Published: 2020-10-31 15:09:54


You know how to create branches on Git and how to complete the related **PR** ([do you](https://dev.to/didof/git-github-made-simple-branching-and-pr-37l9)?)However, you ran into something you weren't ready for - **Merge conflicts**.

Let's set up a simple situation to grasp the concept more easily: in the master branch you have this `index.html`.
######index.html(master branch)
```html
<div>
   <p>I like:</p>
   <ul>
      <li>dogs</li>
      <li>sea</li>
      <li>summer</li>
   </ul>
</div>
```
In another branch named `overriding-branch` the same `index.html` present:
######index.html(overriding-branch branch)
```html
<div>
   <p>I like:</p>
   <ul>
      <li>cat</li>
      <li>mountain</li>
      <li>winter</li>
   </ul>
</div>
```

> On both branches, both files are committed to their origin -  if you make a change to the file **without** committing, the moment you change branch and this last already has something in that line you will get this error
![git_error](https://dev-to-uploads.s3.amazonaws.com/i/oll13v7amdr2apjb6rk6.PNG)

So, being in the master branch, enter the command `git diff overriding-branch`.
![git_conflict](https://dev-to-uploads.s3.amazonaws.com/i/cxzhjnjpd1tqoqv7xu6d.PNG)
And immediately you realize that the two files are not overlapping. In fact, by running `git merge master`.
![git_merge_conflict](https://dev-to-uploads.s3.amazonaws.com/i/mx67van1rz55vpkpqgjq.PNG)

And it is no coincidence that the file in your IDE has changed like so:
![git_conflict_VS](https://dev-to-uploads.s3.amazonaws.com/i/qrb4ymks5wzla7z5aq11.PNG)

Then you can resolve the conflict using the links above:
* Accept Current Change - keep the version of the branch you were on at the time of merging
* Accept Incoming Change - use the version of the branch with which the merge is required
* Accept Both Changes

Otherwise, you can manually intervene directly in the IDE:
![git_manually_resolved_conflict](https://dev-to-uploads.s3.amazonaws.com/i/19ex69x8yffh47k619do.PNG)

Of course, you now need to commit and push the updated file:
![git_merge_conflict_pushed](https://dev-to-uploads.s3.amazonaws.com/i/iofcocgfavkcluz88dsz.PNG)

***

You got carried away and made a commit you shouldn't have done? Don't despair, going back is ... within console reach. That's how it is done [VERY_VERY_SOON].
Otherwise, take a look at the concept of the fork [VERY_VERY_SOON].

***

🐤 twitter: https://twitter.com/did0f
What is an AWS Community Builder?
Tags: aws
Published: 2020-10-31 15:14:26

On July 30, 2020 [AWS announced a new AWS Community Builders Program](https://aws.amazon.com/blogs/aws/announcing-the-new-aws-community-builders-program/).  I applied and in October 2020 I was [accepted into the program](https://twitter.com/martzcodes/status/1317567726412615681)!

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

It's a pretty neat opportunity to work more closely with AWS experts, gain early access to new features and beta test some cloud-related content... all while developing my own professional skillset and technical writing (so you'll be seeing a lot more blog posts from me over the next year).

AWS Community Builders are organized around "topic" areas. I was invited to focus on the devtools topic... which is perfect because I ♥️ CDK.  I'll also be keeping close tabs on the Serverless and Machine Learning topics.

Sign-ups are closed for the moment, but you can sign up for notifications when you can apply here:  https://aws.amazon.com/developer/community/community-builders/

If you have any topics you'd be interested in a blog post about (particularly around CDK/Devtools, Serverless or Machine Learning) OR have any questions about the program...  Let me know in the comments below!
Hacktoberfest !!!
Tags: hacktoberfest
Published: 2020-10-31 15:05:21

Well, this was my first open-source contribution and was really excited about it.


I am Isha, currently pursuing Btech from UIET KUK 

Actually, i am just a beginner so i have done my contributions in small python projects.

It was a very good experience for me to learn.
[Tutorial Linux] Terminal: Contando palavras em um arquivo
Tags: linux, terminal, wc, womakerscode
Published: 2020-10-31 14:59:05

```
$ wc <nome_do_arquivo>
```

- **$** indica que você deve usar o **usuário comum** para fazer essa operação.

- **wc** do inglês, word count, é o comando usado para contar palavras, bytes, linhas e caracteres.

- digite o nome do arquivo sem os sinais **< >**.

Exemplo: Usando o comando **wc** em dois arquivos.

![usando wc em dois arquivos](https://dev-to-uploads.s3.amazonaws.com/i/fq46kdb2x1zh2v0m2jtz.png)

A **primeira coluna** conta as **linhas**, 

![linhas](https://dev-to-uploads.s3.amazonaws.com/i/us83q9pc7qlzi2lx1b5f.png)

A **segunda coluna** conta as **palavras**,

![palavras](https://dev-to-uploads.s3.amazonaws.com/i/0q3d64fhi7fy0k1t8c6v.png)

E a **terceira coluna** os **caracteres**.

![caracteres](https://dev-to-uploads.s3.amazonaws.com/i/du1lia5f12v7pdb0i3z4.png)

## Contando as linhas

```
$ wc -l <nome_do_arquivo>
```

- **-l** mostra o número de linhas.

![linhas](https://dev-to-uploads.s3.amazonaws.com/i/1yc3j0klby6vt4msbvqq.png)

## Contando os bytes

```
$ wc -c <nome_do_arquivo>
```

- **-c** mostra o número de bytes.

![bytes](https://dev-to-uploads.s3.amazonaws.com/i/wsqd5yr9mrwj29jqwst0.png)

## Contando os caracteres

```
$ wc -m <nome_de_arquivo>
```

- **-m** mostra o número de caracteres.

![caracteres](https://dev-to-uploads.s3.amazonaws.com/i/0q73do20ga8f3kt0xb6q.png)

As versões antigas do **wc** não fazem diferença entre bytes e caracteres.

## Maior linha

```
$ wc -L <nome_do_arquivo>
```

- **-L** mostra o tamanho da maior linha.

![maior linha](https://dev-to-uploads.s3.amazonaws.com/i/tzmc0hvw17k5or7lx4wp.png)

## Contando as palavras

```
$ wc -w <nome_do_arquivo>
```

- **-w** mostra o número de palavras.

![palavras](https://dev-to-uploads.s3.amazonaws.com/i/6f6dlget87p45knt7vyu.png)
Redis CLI: Configurations, databases, and pubsub commands
Tags: pubsub, redis, database
Published: 2020-10-31 14:48:21

In the video below, you will learn the following skills:
- important configs for redis to secure and gain control over your redis server.
- redis databases and how to switch between them.
- redis as a messaging broker and how to use it for pubsub. 
- Finally, We will see how you can explore redis cli further on your own.

>*[YT Video: Redis cli config, databases, & pubsub]*
[![Redis CLI - Installation & Data manipulation](https://i9.ytimg.com/vi/jVJPQ33-1eI/maxresdefault.jpg?time=1603994400000&sqp=CKCG7PwF&rs=AOn4CLDmHCgnOLQubmOR6lwerzjs0A_8ng)](https://youtu.be/jTmqOrfXrzI "Redis cli config, databases, & pubsub")

You can also check pervious part: https://youtu.be/jVJPQ33-1eI
Use Vanilla JS to read MYSQL databases
Tags: javascript
Published: 2020-10-31 14:33:44

I have recently built a project that allows you to read mysql databases on your server.

Example of how to read table 'blog_posts' and output the first 100 posts into a table:
```js
const config = {
  "table" : "blog_posts",
  "limit" : "100",
  "offset" : "0"
};
_POST_REQUEST("link-to-server/database.php", 'config=' + JSON.stringify(config), (response) => {
  document.querySelector('#myTableContainer').innerHTML = _json2table(JSON.parse(response));
});
```
**See Github: https://github.com/JackChilds/jsmysqldb**
HTML-CSS-JS Starter Repo
Tags: beginners, html, css, javascript
Published: 2020-10-31 14:33:16

**TLDR:** [Starter Repo](https://github.com/manavm1990/front-end-starter)

## Motivation Behind This

It's really quite simple, actually. Having a 'batteries 🔋 included' 'starter repo' like this one, especially as a beginner, can go along way to helping you develop those 'good' coding 👩🏽‍💻 habits 'automagically 🦄.'

**Detailed directions on how to use this are included in the repo's README.**
Hacktoberfest Challenge Completed :) !!
Tags: hacktoberfest
Published: 2020-10-31 14:29:17

<!-- ✨This template is only meant to get your ideas going, so please feel free to write your own title, structure, and words! ✨ -->


### [Intro Heading]
<!-- If you are new to the DEV community, introduce yourself and share a bit about why you joined DEV and decided to participate in Hacktoberfest this year.  --> 
### Background

<!-- Are you brand new to open source? What about coding in general? Tell us about how you got here →

### Progress

<!-- Share a bit about where you’re at in your Hacktoberfest journey. What stage are you at? How has the process been?  -->

### Contributions

<!-- This is where you can list the contributions you made and explain why you chose the projects you did. Don’t forget to add links!  -->


### Reflections
<!-- Overall, how has your Hacktoberfest 2020 experience been? If you’re a first-timer, will you participate again? What have you learned? Have you made any interesting connections? What is your next step in open source?  -->
Classes | C# vs Java
Tags: java, csharp, codenewbie
Published: 2020-10-31 14:29:09

The biggest difference is that in c# default is private and in java it is public.

Other than that, both support generics, however c# also supports operator overloading.
Java says that they do not want to support it to avoid c++ << bit shift left that is used to print out stuff, cout << "hi";

C# also has glorified getters and setters called properties, but they are just getters and setters.

Overall no much differences.
How to Hack Wifi? Numerous Methods
Published: 2020-10-31 14:28:53

There is a bundle of strategies that one may thread towards the main target , but these articles are meant to guide you to the safest and sure-shot ways, exclusively.

 
Some people are okay with rooting their phones, but some, on the other hold, don't like better to root their phones. This guide are going to be all about the way to hack wifi passwords using both rooted and non-rooted phones. But, of course, it might be easier to hack wifi passwords employing a rooted device. Without wasting any longer time, allow us to muster along.

You can easily hack wifi passwords with an android device with just a couple of apps, just follow us through this full guide and luxuriate in your free internet.

It is easier to hack wifi passwords of these networks protected by a WPS ( WiFi Protected Setup ) pin. Here may be a list of some apps you'll use to simply hack WiFi passwords with a rooted device. you'll even be ready to find out how to hack wifi password without an app. Follow along. 

Also read, <a href="https://blogofgadgets.com">gadgets that can hack in seconds</a>
WPS WPA Tester Premium (Best Method to Hack Wifi Password On Android)
 the primary app we are suggesting for hacking WiFi password is “WPS WPA Tester Premium.” this is often a well-liked app because it does what it says. Moreover, it's easy to download and install this app because it is out there within the google play store for minimal money. This app requires root access or permissions. Let’s see the way to use this app and hack nearby WiFi networks.

First of all, download and install WPA WPA Tester Premium on your rooted android phone ( root required ).
After the app Installs, launch the appliance then click on agree ( basic terms and conditions ).

Apart from these, there are N numbers of methods to hack wifi with you android phone-- you can read the other methods here -- <a href="https://blogofgadgets.com/hack-wifi-password-on-android/">How to Hack Wifi Password on Android? (Non-Rooted + Rooted Methods)</a>
Free everyday tools for a software engineer
Tags: tooling, productivity
Published: 2020-10-31 14:21:26

As software engineers we want to be sure we use our time in a productive way. Our software industry changes on weekly bases, and it is good to step back every now and then and check if we use the best possible tools available. 

Of course, we can use many project/technology dependent tools, but here I will share a few tools I use on daily bases, no matter what kind of work I do as an engineer at that moment. 

* **[Visual Studio Code](https://code.visualstudio.com/)** Some would say it is an IDE mainly intended for web development, but I use it as a default text editor.

* **[SourceTree](https://www.sourcetreeapp.com/)** Still the best Git client imho.

* **[Trello](https://trello.com/)** I use this free "tasks list" tool for my personal tasks on the work, and also for shared team tasks on the projects if no demand for advanced tools like Jira.

* **[Awesome screenshot](https://www.awesomescreenshot.com)** Chrome extension tool that helps me easily share my screenshots with custom marks in case of bug reports or similar.

* **[Postman](https://www.postman.com)** Handy tool to save and execute HTTP requests. If endpoints require dynamic/custom authorization, I configure them with "Pre-request Script".

* **[DevPal](https://devpal.co/base64-decode/)** Handy tool for quick conversions & similar operations such as Base64 & URL encoding/decoding, hashing, random UUID.

* **[Docker](https://www.docker.com/)** Many reasons to use docker. For instance having the same setup as in production environment, not polluting your OS with new installations you plan to use, etc.

* **[Diagrams](https://www.diagrams.net)** Whenever working on a complex thing, multi-disciplinary task, or on processes, I like to visually depict it with this tool and share it with my team to be in sync.
HACKTOBERFEST!! 
Tags: hacktoberfest
Published: 2020-10-31 13:50:23

<!-- ✨This template is only meant to get your ideas going, so please feel free to write your own title, structure, and words! ✨ -->


### [Intro Heading]
<!-- If you are new to the DEV community, introduce yourself and share a bit about why you joined DEV and decided to participate in Hacktoberfest this year.  --> 
### Background

<!-- Are you brand new to open source? What about coding in general? Tell us about how you got here →

### Progress

<!-- Share a bit about where you’re at in your Hacktoberfest journey. What stage are you at? How has the process been?  -->

### Contributions

<!-- This is where you can list the contributions you made and explain why you chose the projects you did. Don’t forget to add links!  -->


### Reflections
<!-- Overall, how has your Hacktoberfest 2020 experience been? If you’re a first-timer, will you participate again? What have you learned? Have you made any interesting connections? What is your next step in open source?  -->
Figma for VS Code: Now get styles listing and copying CSS & listing layer tree and a preview of top-level layers
Tags: design, codenewbie, productivity, vscode
Published: 2020-10-31 14:21:05

# Introduction 💌
Many people use Figma for designing and need to copy the styles to VS Code from there or just see the styles in VS Code to code their websites like the way they designed it. Hence, it's a great pain to work with both on a single monitor. But VS Code being the most powerful code editors, it can handle it all.

# Solution 😉
There's an extension in VS Code: [Figma by Kasper Mikiewicz](https://marketplace.visualstudio.com/items?itemName=idered.figma). This is the goto solution for this. I have been using it for the past few days and it is damn amazing.

# Installation ✔
First of all, there are some requirements, let's fulfill them. By the way, the same you will find on the extension page in VS Code, but these are more elaborate.
## Requirements
1. Figma Personal Access Token
2. Team ID

### If you don't know how to get them here's how:
1. Go to Account Settings in Figma.
2. Click on **Create a new personal access token**.
3. Name your token and copy it.
5. In VS Code open the commands by using **Ctrl + Shift + P** menu and execute **Figma: Connect**.
6. Paste your Figma token and press enter.

### Team
You must be a part of any team to be able to browse and select files or you can create your own team. To get your team id:
1. Go to Figma and click on any team in the sidebar
2. Copy id from URL: https://www.figma.com/files/team/ID/example. But for this, you will have to open it in the browser.
3. In VS Code open the commands menu by using **Ctrl + Shift + P** and execute **Figma: Add Team** command
4. Type in your team name
5. Paste team id and press enter
6. You're now able to select any team file using Figma: Select File from the command palette.

# Limitations 😢
Browsing files works only for teams. You can't browse your drafts. But they say that in the future there will be support for adding single files by id.
Also, it is in the preview version. With the release version of 0.1.0 at the time of writing this article.

# Conclusion
This extension has helped me save my time and will definitely help you integrate your Figma designs into code with great ease and saving a lot of time.
Summon The JSON artwork
Tags: design, ux
Published: 2020-10-31 13:57:52

{% youtube armM84bTTjs %}

"One year ago I had to make a lot of decisions. The most important one was the quality. There was no other way to proceed with the project than to apply highest quality from day one: from artwork to manufacturing. Only that way it was worth the effort. It was the right call" - Tom Smykowski, inventor of Summon The JSON

Music: www.bensound.com
Singapore Tech Community Stance on Harassment (Cross-Post)
Tags: harassment, community, discuss, beginners
Published: 2020-10-31 13:55:54

I'm giving my support to {% user miccheng %} by cross-posting this article. I believe it is an important topic for anyone from Singapore or plans to be part of the tech community in Singapore. 

Please do click on the link below on our stance on such cases for harassment or to seek help if you had encountered this if you are in Singapore. 

{% link https://dev.to/miccheng/singapore-tech-community-stance-on-harassment-9ed %}