teleren/devto huggingface dataset:
portconfig
Tags: ports, freebsd, tui, sysadmin
Published: 2021-11-20 23:07:32

The [FreeBSD](https://www.freebsd.org) Operating Systems provides the *Ports Collection* to allow a simple way for users and administrators to install applications, to know more <https://www.freebsd.org/ports/>.

It is possible to configure a port before the building and installation, [ports-mgmt/dialog4ports](https://www.freshports.org/ports-mgmt/dialog4ports/) is a well known TUI utility for the port options, unfortunately *dialog4ports* depends on non-permissive open source software. [portconfig](https://gitlab.com/alfix/portconfig) is a new utility to provide the same features of *dialog4ports*, it and its dependecies ([bsddialog](https://gitlab.com/alfix/bsddialog) and [ncurses](https://invisible-island.net/ncurses/)) are  completely permissive.

Getting Started:

```default
$ git clone https://gitlab.com/alfix/portconfig.git
$ cd portconfig
$ make
```

Now edit /usr/ports/Mk/bsd.commands.mk, comment *DIALOG4PORTS* and add the absolute path to *portconfig*:

```tcsh
...
#DIALOG4PORTS?= ${LOCALBASE}/bin/dialog4ports
DIALOG4PORTS?= /absolute/path/to/portconfig
...
```

Now *make config* uses *portconfig* instead of dialog4ports*, for example:

```default
# cd /usr/ports/editor/vim
# make config
```

[![](https://gitlab.com/alfix/portconfig/-/raw/main/images/screenshot1.png)][urllink1]

[urllink1]: https://gitlab.com/alfix/portconfig/-/raw/main/images/screenshot1.png


It is possible to customize *portconfig* via environment variables, for example to set the *dialog4ports* theme (properly *dialog*) with tcsh:

```default
# env PORTCONFIGTHEME="dialog" make config
```

[![](https://gitlab.com/alfix/portconfig/-/raw/main/images/screenshot2.png)][urllink2]

[urllink2]: https://gitlab.com/alfix/portconfig/-/raw/main/images/screenshot2.png

Other variables:

 - *D4PHEIGHT*: hight (otherwise autosize)
 - *D4PWIDTH*: width (otherwise autosize)
 - *D4PFULLSCREEN*: fullscreen mode
 - *D4PALIGNCENTER*: align menu text to centre (default left)
 - *D4PASCIILINES*: draw borders with *+ - |* charachters

 
**Please NOTE**: *portconfig* is under development and distributed without any warranty.

Project repository <https://gitlab.com/alfix/portconfig>,
*Happy Hacking!*
CSS property vertical-align doesn’t work
Tags: css, bug, beginners, programming
Published: 2021-11-20 23:04:44

I was trying to apply the CSS property **vertical-align: middle** on an element but no luck, it was not working as expected.

Here is an example of non-functioning code :
```
.container {
  background-color: red;
  height: 50px;
  width: 100px;
}

.text {
  vertical-align: middle;
}
```

The first option would be to set a **line-height** on the element you want to center vertically :
```
.container {
  background-color: red;
  height: 50px;
  width: 100px;
}

.text {
  vertical-align: middle;
  line-height: 50px;
}
```

The second option would be to use **display table** on the parent .container, and display **table-cell** on the element you want to center vertically :
```
.container {
  background-color: pink;
  height: 50px;
  width: 100px;
  display: table;
}

.text {
  vertical-align: middle;
  display: table-cell;
}
```
Custom checkbox not working
Published: 2021-11-20 22:58:29

Customizing checkboxes is a little tricky, it requires a lot of additional CSS to make it look nice. One important thing to remember while doing that is to make sure the **id** you use on the **input** is the same as the **for** on the **label**.

Example :

```
<p>Choose your favorite fruit:</p>

<div>
  <input type="checkbox" id="apple" name="apple"
         checked>
  <label for="apple">Apple</label>
</div>

<div>
  <input type="checkbox" id="orange" name="orange">
  <label for="orange">Orange</label>
</div>
```
CSS property z-index not working
Tags: css, bug, zindex, beginners
Published: 2021-11-20 22:52:43

It is never easy for me to use z-index especially when you are adding code to an existing project, and you don’t know the whole structure. I was stuck with that for a while, adding z-index on every level of div, but nothing was working.

Thanks to **StackOverflow**, I was able to understand the problem:
The z-index property only works on elements with a position value other than static (e.g. position: absolute;, position: relative;, or position: fixed;). There is also position: sticky; that is supported in Firefox, is prefixed in Safari, worked for a time in older versions of Chrome under a custom flag, and is under consideration by Microsoft to add to their Edge browser.
Source [Stackoverflow](https://stackoverflow.com/questions/9191803/why-does-z-index-not-work)

However, there is something else you need to know: when an element has an opacity value less than 1, even with a z-index of a million it won’t work. So if your z-index is not working, check the opacity of your element. You can read a detailed article about that following this [link](https://philipwalton.com/articles/what-no-one-told-you-about-z-index/).
Simple Setup for Application Wide State in React
Tags: react, redux, recoil, state
Published: 2021-11-20 22:46:31

- [For a lot of useful State Related Hooks, Checkout my Library merced-react-hooks](https://www.npmjs.com/package/merced-react-hooks)

To quick setup application wide state in your app just make a file called src/GlobalState.js in your react app.

GlobalState.js

```js
import { useState, createContext, useContext } from "react"

// The initial state, you can setup any properties initilal values here.
const initialState = {
    count: 0
}

// create the context object for delivering your state across your app.
const GlobalContext = createContext(null)

// custom component to provide the state to your app
export const GlobalState = props => {
  // declare the GlobalState
  const [globalState, setGlobalState] = useState({})

  // create a function that'll make it easy to update one state property at a time
  const updateGlobalState = (key, newValue) => {
    setGlobalState(oldState => {
      if (oldState[key] !== newValue) {
        const newState = { ...oldState }
        newState[key] = newValue
        return newState
      } else {
        return oldState
      }
    })
  }

  return (
    <GlobalContext.Provider value={[globalState, updateGlobalState]}>{props.children}</GlobalContext.Provider>
  )
}

// custom hook for retrieving the provided state
export const useGlobalState = () => useContext(GlobalContext)
```

then you just have wrap your application with the GlobalState component in index.js

```js
<GlobalState>
    <App/>
</GlobalState>
```

then in any component you can use the state. Below is an example of a counter component using the GlobalState.

```js
import {useGlobalState} from "../GlobalState.js"

function Counter(props){

    const [globalState, updateGlobalState] = useGlobalState()

    return <div>
    <h1>{globalState.count}</h1>
    <button onClick={() => updateGlobalState("count", globalState.count + 1)}>Add One</button>
    <button onClick={() => updateGlobalState("count", globalState.count - 1)}>Subtract One</button>
    </div>

}
```

There you go, now you can share state across your app in an easy that you can customize to your needs.
Character not returning on keydown event
Tags: javascript, bug, beginners, keyevent
Published: 2021-11-20 22:40:11

To develop a feature in JavaScript, I started by looking into the events related to the keyboard. I found three events : **keypress, keydown, keyup**.

**keypress** was only happening when the user pressed a char key, and I also needed to get the event when the user uses the supr button. So I thought I would use keydown instead.

The event was fired when I pressed any key, however, the problem I faced is that when I pressed down on char key I needed to get that char and save it in a variable. I noticed that the first char was only saved at the second time the event was fired, the second char at the third event and so on. I couldn’t understand this gap.

After some debugging and talking about that with a colleague, I understood that the event **keydown** was happening too early, it was fired before the char get saved in my variable. So instead of using **keydown** I used **keyup**, and it worked perfectly fine.

## Summary
**- keypress** : The keypress event is fired when a key that produces a character value is pressed down **(Deprecated)**
**- keydown** : The keydown event is fired when any key is pressed down, the event occur very soon.
**- keyup** : The keyup event is fired when any key is pressed up, the event occur after keydown.
mandelbrot with turtles and Python
Tags: python, turtle
Published: 2021-11-20 22:34:59

---
title: mandelbrot with turtles and Python
published: true
description: draw the madelbrot set with Python and turtles
tags: python, turtle
//cover_image: https://direct_url_to_image.jpg
---

I used Python turtles to draw an image of the madelbrot set.

Here is the code I found on the internet that does the math part.
https://www.codingame.com/playgrounds/2358/how-to-plot-the-mandelbrot-set/mandelbrot-set

But I wanted to draw this with a turtle.

All of my code is here in this gist
https://gist.github.com/tonetheman/806a4fe0924af085d614557c0ccb85e3

It is fairly slow to run and the UI locks up... but it will make a nice picture.

Crazy that you do this in turtle (though not too quickly).

And here is the image that the code will output
![picture of mandelbrot set fractal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2urztjd299asz55v8gdg.png)
Add git blame on Visual Studio Code
Tags: git, visualstudiocode, tutorial, vscode
Published: 2021-11-20 22:21:31

When you are working on a project, it is very useful to know the history of the modifications using git. If you are coding on Visual Studio Code like me, you should activate git blame by following these steps :
**- Open Visual Studio Code**
**- Press Ctrl+Shift+X (windows) or ⇧⌘X (Mac)**
**- Type blame**
**- Click install on Git Blame**

Now, you can see at the bottom of the vs code window who is responsible for the line of code you have your cursor on, as you can see on the image below: line 37 Sara Ounissi (that would be me), pushed this code 1 day ago.

![screen shot vs code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sanoaph9vo9028xm612q.png)

However, the aim of this option is not just to see who wrote the code, but why and when. You can click on the name of the person, this will open a pop-in, the button View will then redirect you to the git repository where you will see the whole modification, the name of the commit, etc… Hopefully, that will help you get more context.

![git blame vs code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s641ajyx4z648k4taojv.png)
How to embed runnable code samples using Runno
Tags: news, webassembly, webdev, javascript
Published: 2021-11-20 21:19:31

A year or so ago I was playing around with building an online Introduction to Python course, but I got distracted by this problem that seemed like it should be solved: how can I embed runnable snippets on the web?

There’s a bunch of closed-source solutions that rely on other services. I was hoping for a way to just install a package, and then run code. Especially small snippets like `print`, `input` and `if` statements. 

So I started building [Runno](https://runno.dev). It lets you embed snippets of code from a few different languages (Python, JavaScript, C, C++ and SQL currently) within your website and runs it all client side using Web Assembly. You can use it without any packages using an iframe, or install the npm package and use it as a set of Web Components.

If you're looking to embed a runnable snippet of code it's pretty straightforward with Runno. Let's say I'm writing a blog post explaining how `if` statements work in Python, and I have this snippet of code:

```
name = input("What's your name? ")
if "i" in name.lower():
  print("You've got an I in your name, how selfish.")
else:
  print("There's no I in your name.")
```

To use Runno all I have to do is visit the [runno.dev](https://runno.dev) website and paste in my code snippet:

![Paste code snippets into the "Your code" textbox](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9pf3t7l2ujlm2irq02dh.png)
 
Then copy the HTML for the iframe out of Runno, and into your blog. Here the iframe code is:

```
<iframe src="https://runno.run/?editor=1&runtime=python&code=bmFtZSA9IGlucHV0KCJXaGF0J3MgeW91ciBuYW1lPyAiKQppZiAiaSIgaW4gbmFtZS5sb3dlcigpOgogIHByaW50KCJZb3UndmUgZ290IGFuIEkgaW4geW91ciBuYW1lLCBob3cgc2VsZmlzaC4iKQplbHNlOgogIHByaW50KCJUaGVyZSdzIG5vIEkgaW4geW91ciBuYW1lLiIp" crossorigin allow="cross-origin-isolated" width="640" height="320" frameBorder="0"></iframe>
```

You'll notice that it has a fixed `width` and `height`. This is to make it easy to paste in, but you can change those values!

On Dev you can't put an iframe in, but you can use a Codepen. Here I've made a codepen that just has the iframe inside of it, then styled the iframe to fit the full space of the codepen.

{% codepen https://codepen.io/taybenlor/pen/MWvRYyd %}

And now you can run the example code snippet!

If you're interested in learning more ways to use Runno there's some documentation on the website: https://runno.dev/#examples

Or if you're interested in contributing - it's Open Source:

{% github taybenlor/runno no-readme %}
How to add a placeholder on a select
Tags: tutorial, html, beginners, frontend
Published: 2021-11-20 22:10:03

It is quite easy to add a placeholder on a select in HTML, you just need to add an option with the text you need as a placeholder. The only thing to look for is to empty the value, add the two properties selected and disabled.

```
<select> 
    <option value="" disabled selected>Select your option</option>
    <option value="test">Test</option>
</select>
```
Neo-retro computing
Tags: minimicro, gamedev, scratch, learnprogramming
Published: 2021-11-20 21:37:57

---
title: Neo-retro computing 
published: true
description: A very short introduction to Mini Micro
tags: minimicro, gamedevelopment, scratch, learnprogramming
//cover_image: https://direct_url_to_image.jpg
---

Today I just wanted to share with you a very cool programming environment I recently discovered: the Mini Micro.

![Mini Micro logo](https://miniscript.org/w/images/7/74/MiniMicro256.png)

What is the Mini Micro?

From its [wiki](https://miniscript.org/wiki/Main_Page):

> Mini Micro is a desktop application for Windows, macOS, and Linux. 

> It simulates a **retro-style home computer**, built atop the MiniScript language. 

> It is intended as both an **educational environment** for beginning programmers, and a **game/simulation development environment** for more experienced coders. 

<small>(emphasis and formatting mine)</small>

It's very easy to get started with. And one can program very cool and interesting stuff in it:

![Sokoban in Mini Micro](https://github.com/sebnozzi/minimicro-sokoban/raw/master/screenshot.png)

It features a very simple and easy-to-learn programming language called [MiniScript](https://miniscript.org/), which as approachable as BASIC and as powerful as JavaScript.

If you are looking for an environment to have fun programming whether you are a beginner or a seasoned pro you might want to give Mini Micro a try.
Google Trends with Python 📊
Tags: python, gratitude, tutorial, opensource
Published: 2021-11-20 21:26:31

Thinking these days how we probably started to value more building blocks of our existence. As it started to feel more integrated into our existence as follows - health, water, food and often mentioned Covid that limited our ability to travel for some regions. To have overall knowledge of how does it goes worldwide there is well known [Google Trends](https://trends.google.com/trends) online tool to work with. But there is something special for those who are in love with Python. Beautiful graphing library [Plotly](https://plotly.com/python/) licensed under the MIT license. 


##Scripts to Download
Here is a simple installation prepared to work with on my GitHub repository with a <code>requirements.txt</code> file and a short script to plot data into a nice histogram data form. [Simply download these two files](https://github.com/stanislav-kukucka/google-trends-analysis/tree/main/google-trends-analysis) as follows so save these to your desktop into some working directory <code>google-trends-analysis.py</code> and <code>requirements.txt</code> Create a directory named <code>google-trends-analysis</code> and save these files into.


##Activate Virtualenv
I do assume you already have <code>virtualenv</code> installed, but if not just execute <code>sudo pip3 install virtualenv</code>. Enter into <code>google-trends-analysis</code> directory with <code>cd google-trends-analysis</code>. 

```
cd google-trends-analysis
```
To make all stuff properly done activate <code>virtualenv</code> with the creation of working virtual environment directory called <code>venv</code>.

```
virtualenv venv 
```
Your <code>google-trends-analysis</code> directory looks like now like on picture hereunder.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vghnq1nlpsvvo7ljrujr.png)

Now activate this working environment.

```
source venv/bin/activate
```

##Pytrends and Plotly Libraries to Install 
All libraries needed to run Google Trends and Plotly correctly are saved in <code>requirements.txt</code> file. Now execute installation in a virtual environment we already activated.

```
pip3 install -r requirements.txt
```
This will take a while to pass all installations. You'll see in your terminal how all libraries are installed to properly run the script.

After installation to run <code>google-trends-analysis.py</code> script hereunder just type this command and enjoy response in your browser IP 127.0.0.1 on a random port.

```
python3 google-trends-analysis.py
```
This is how it will look like, a nicely plotted graph in the final result. (Graph images by author)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nka8n9npv2vtuv07rnxa.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mnc6r4namln60syh7aok.png)

Thanks to [Edward Howell](https://unsplash.com/@edwardhowellphotography?utm_source=unsplash&utm_medium=referral&utm_content=CreditCopyTextGratitude) for the cover image from Unsplash.
The ephemeral miniconf - Once Upon Perl Acronyms
Tags: perl
Published: 2021-11-20 19:53:17

(This was a talk at [The ephemeral miniconf](https://thibaultduponchelle.github.io/the-ephemeral-miniconf/), here are [the slides](https://thibaultduponchelle.github.io/talk-once-upon-perl-acronyms/))
 
```
Once upon a time, 
a guy named Larry Wall 
created a language called Perl.

He became the BDFL 
of this PL 
which values are TIMTOWTDI, 
DWIM, 
POLA 
and as all UNIXes: 
KISS 
and DOTADIW.

Perl enhances some key concepts 
of AWK, 
SED 
or GREP 
and even provides ACK 
and leads industry standard REGEX 
(PCRE).

PPL started to ❤️ Perl, 
meeting in PM groups 
and calling themself JAPH.

Eventually, big-sized meetings appeared 
like YAPC, 
TPC 
and TPRCIC 
(or chartreuse-sized ones like PTS).

There were also associations 
like TPF 
or EPO 
and individuals 
like YOU 
and ME.

FYI in 2021, 
I decided to organize TEM 
because hey, YOLO!

Technically speaking, 
you can say Perl 
or perl 
but not PERL 
nor the horrific PEARL... 😱

And if you don't know, 
go on IRC 
and ask PURL! 🤖 

People say 
"Only perl can parse Perl" 
but there is PPI, 
PPR 
and PLS.

Interfacing w/ native extensions is easy 
with FFI, 
XS, 
SWIG 
or WASM 
(and even easier with NCI in Raku).

Perl lovers contribute 
to the CPAN w/ ❤️  
via PAUSE 
so Perl users can use CPANP, 
CPANM 
or CPM 
to DRY.

You can browse MetaCPAN 
for DBI, 
EUMM, 
MB, 
LWP 
or PDL 
or even some idiot ACME.

Each DIST 
contains a whole lot of DOC 
in a format named POD 
and even a dedicated RT Q.

If you're in trouble, 
have a look at HOP 
or PBP.

IMHO 
it is a good PPT, 
but maybe a bit WTF... 
IDK 🤷
THX for attending 
and FWIW 
here is a well deserved GIF.

TY
```

![Camel GIF](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8t7k4nk8h4ybkz7zd8p7.gif)

EDIT: I feel like it's a good idea to share *my notes* :grinning:

![Notes 1](https://raw.githubusercontent.com/thibaultduponchelle/talk-once-upon-perl-acronyms/master/img/OUPA1.jpg)

![Notes 2](https://raw.githubusercontent.com/thibaultduponchelle/talk-once-upon-perl-acronyms/master/img/OUPA2.jpg)
Internal PR for Release 0.3
Tags: ui, react, css
Published: 2021-11-20 19:51:33

Using React style methods and css properties, I was working on (and still in progress) for the telescope project to have the GitHub information for the mobile view. The reason I picked this [issue](https://github.com/Seneca-CDOT/telescope/issues/2373) was because I wanted to work on something that I would like to work on in the future. Since I am interested in the front end development, and I have barely no experience and knowledge on that, I wanted to gain more experience by working on this issue. 

I first had to understand the structure and how it is getting the GitHub info from the parsed links.
You will be able to see all the progress in this [PR](https://github.com/Seneca-CDOT/telescope/pull/2491).

I used some cool library of React, Material-UI and its features that could be used in UI side of the development. 
Using a component called Accordion, I was able to make the title container area click and expandable, and made those expanded area contain all of the Github information.

There are some future improvements that I could, or someone else could make is to create some cool animation when toggle a github icon or other button to make the Github information to be shown in action.
Why do I procrastinate my personal site more than any other side project?
Tags: discuss, webdev, sideprojects, portfolio
Published: 2021-11-20 19:51:15

Does this happen to you too? I've redesign my site like 3 times without publishing and now I'm almost done coding it (90%) I just need to write my projects' descriptions. But it has been months since I started! This doesn't happen with other side projects I've worked on, well not as much.
Creating a Website from starch
Published: 2021-11-20 19:46:56

we will go through the process of designing and building a website from scratch.

First, we need to get a domain name. I would recommend getting one from GoDaddy because they don't charge you any initial costs. Once you have a domain name, then you can build your wordpress template on top of that domain. To do that, you'll need to download your favorite wordpress theme and upload it onto the web hosting account.

Next, you'll need to create the pages. So when someone goes to your website, they will be able to see the different pages that you have created. You'll need to create the page titles, the body text, and also where it should redirect when someone clicks on a page title.

Once everything is setup within wordpress, then you can start working on creating original content for your website!

Site: https://www.sipotek.net/
Unexpected tags retrieved from the dev.to api
Tags: discuss, api, tags, devto
Published: 2021-11-20 19:02:59

I played a bit with the [dev.to api](https://developers.forem.com/api) and retrieved a list of tags.

The API docs says that the endpoint response "will return tags ordered by popularity", so I wanted to find out what are the top 100 most popular tags (`https://dev.to/api/tags?page=1&per_page=100`).

I was surprised to find 3 unexpected tags (at least for me): `latestnigerianewslat`, `southafricanews`, `bánnhàmặttiền`

Tried to see if they appear in the app's tags suggestions dropdown, but they don't show up. (not event if searching by them)

I'm curious what's up with them. Is this an API issue or am I ignorant?