teleren/devto huggingface dataset:
How to tackle versioning APIs gone bad
Tags: webdev, software
Published: 2020-08-07 12:26:24

When you are building an API or web API you should be considerate of future versions or uses. As Mike Amundsen answers Casey Rosenthal's questions:

"I think the biggest thing that people need to keep in mind is if your API is popular, if your API is effective, you're gonna have people using it who you've never met, they're gonna be using it in ways you've never thought of to solve problems that you can imagine. And any small change anywhere could just throw all of that out the window. "

[![Versioning Gone Bad](http://img.youtube.com/vi/D_7g9lOzBN4/0.jpg)](https://youtu.be/D_7g9lOzBN4)
AND in grep
Tags: shell, grep, awk, shortposts
Published: 2020-08-07 12:25:23

---
title: AND in grep
published: true
description: 
tags: shell, grep, awk, shortposts
//cover_image: https://www.pexels.com/photo/two-brown-pencils-on-white-surface-965117/
---

While working on a shell or drafting scripts, two things I love the most is `grep` and `awk`. Let's start with some definitions,

The `grep` utility shall search the input files, selecting lines matching one or more patterns; the types of patterns are controlled by the options specified. *Source: [Opengroup pubs](https://pubs.opengroup.org/onlinepubs/009695399/utilities/grep.html)*

and 

The `awk` utility executes programs written in the awk programming language, which is specialised for textual data manipulation. An awk program is a sequence of patterns and corresponding actions. When an input is read that matches a pattern, the action associated with that pattern will be carried out. *Source: [Opengroup pubs](https://pubs.opengroup.org/onlinepubs/7908799/xcu/awk.html)*

### So, what is with AND in grep?
This week, I was exploring the IBM Cloud CLI infrastructure-service plugin to manage the VPC resources. In once of the shell scripts, I wanted to pull the **available** Ubuntu-18.04 image for the Virtual Server Instance(VSI). So, I ran the below command to see a list of available and deprecated images

```
ibmcloud is images
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yn7bwkhuuyr3i6snaznt.png)

> This is just a subset of images.

All I wanted is an Ubuntu 18.04 image what is currently **available** with `amd64` architecture. So, I wrote a shell command using `grep` and `awk` 

```
ibmcloud is images | grep -E 'available.*ubuntu-18.*amd64' | awk '{print $2}'
```
> `-E` matches using extended regular expressions.

The output is 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8bu37o7hrvbwjsgv2qtd.png)

This is using `Grep AND using -E ‘pattern1.*pattern2’` format. You can also use multiple greps. 

For more information on using AND, OR and NOT with grep, refer to this interesting [article](https://www.thegeekstuff.com/2011/10/grep-or-and-not-operators/)
zshLoadOrder
Tags: zsh, commandline, configuration, cli
Published: 2020-08-07 12:22:08

# ZSH shell startup/shutdown files. 

This is really just for my own reference, as ZSH loads its config in its own order and I can never seem to remember it. The global files (which shouldn't really be tampered with by users) will be mentioned and put into larger font than the user files. However, I won't be expounding upon them, as that is outside the purpose of this writing.

# `/etc/zshenv` above all else. The alpha, the omega, the genesis. 

### .zshenv (req to be in `$HOME`) 
Here there be environmental variables. 
Place here anything I'm going to `export` so that it can be referenced later. 
Good candidates include `XDG_*` and changes to program defaults. 
Set up your $PATH & $PAGER & etc etc etc.  
Quality of life: `export ZDOTDIR="$XDG_CONFIG_HOME/zsh"` 

# `/etc/zprofile` *ONLY* if the shell is a login shell. 

### .zprofile (`$ZDOTDIR/.zprofile`) *ONLY* if shell is login. 
Any commands you want happening on every login. 
Start daemons, set a new MOTD, start a SSH tunnel. 
The possibilities are endless. 

# `/etc/zshrc` *ONLY*  if the shell is interactive. 

## .zshrc (`$ZDOTDIR/.zshrc`) *ONLY* if the shell is interactive.  
Used for shell options and various commands. 
There should be a loooong list of `setopt` and `unsetopt` going on here. 
Shell modules and the ZSH prompt go here, as well as history config.  
Source your scripts and set your aliases. 

# `/etc/zlogin` *ONLY* if shell is login. 

## .zlogin (`$ZDOTDIR/.zlogin`) *ONLY*  if shell is login. 
Almost same purpose as `.zprofile` but you know, not really different. Use only one or the other if you're flying by the book. 

## .zlogout (`$ZDOTDIR/.zlogout`)  *ONLY* if shell is login. 
Can be used to execute commands when a shell exits. 
Good time to clean up caches or tmp files/folders. 
Logout of sessions, set the environment back to how you like it when you login.  
Send an email to yourself of temp logs and an email to your mom telling her you love her. 

#### References, sources & points of interest.

1. [http://zsh.sourceforge.net/Doc/Release/Files.html#Files](http://zsh.sourceforge.net/Doc/Release/Files.html#Files) 
2. [https://unix.stackexchange.com/questions/71253/what-should-shouldnt-go-in-zshenv-zshrc-zlogin-zprofile-zlogout#71258](https://unix.stackexchange.com/questions/71253/what-should-shouldnt-go-in-zshenv-zshrc-zlogin-zprofile-zlogout#71258) 
3. [https://thevaluable.dev/zsh-install-configure/](https://thevaluable.dev/zsh-install-configure/)
How to render to different DOM structures in Rails based on view port
Tags: help, rails, webdev
Published: 2020-08-07 12:19:15

---
title: How to render to different DOM structures in Rails based on view port
published: true
description: 
tags: #help #rails #webdev
//cover_image: https://direct_url_to_image.jpg
---
Hi,

I have a webpage that I want to render two different designs on based on if you are on a mobile device or laptop. I can easily use CSS to display or hide the classes but my main problem is that I have some datatables I am adding to the DOM but I need to target by ID. Here is what i have in my `application.html.slim` file

```ruby
 body
    .ui.tab_desktop
      #left-column
        = render partial: 'layouts/sidebar'
      #right-column
        = render partial: 'layouts/header'
        = render 'layouts/flash'
        div id="context-#{controller_name}"
          = yield
        = render partial: 'layouts/footer'
    .ui.mobile
      = render partial: 'layouts/mobile_header'
      = render partial: 'layouts/mobile_sidebar'
      = render 'layouts/flash'
      div id="context-#{controller_name}"
        = yield
      = render partial: 'layouts/mobile_footer'
```

Since we know that ID is supposed to be unique, the tables will only show on the desktop. Is there are better way to only render this part below once for both the mobile and desktop view?

```ruby
div id="context-#{controller_name}"
        = yield
```
Make unused public methods private in services
Tags: gulp, performance, webdev, angular
Published: 2020-08-07 12:04:49

We have finally reached the end of the line (maybe 😋).

# Building upon the shoulders of our past code
We have already invested a lot of time and afford into streamlining our code bundle.

In this final puzzle piece we will look at all our services and see if we find any methods and members that we only use privately.

# Gather all the used services methods

This is pretty similar to searching for used methods in templates from the last article. Instead of looking at hmlt files we will search in all of our js files.

Also the regex (at least in my case) changed a bit.
I now search for all strings that start with a big letter followed with at least one small letter. The whole thing needs to be prefixed with " " (inside none class syntax files), "_" (normal class service injection), or "!" (negated none class syntax).
```javascript
const matches = string.match(/[ |_|!][A-Z]+[a-z]+[a-zA-Z]*\.[a-zA-Z0-9_-]+/gm);
```

Replacing that and adapting it to use a different Set as before, we end up with:
```javascript
const stringsFromJs = new Set();
const tGatherFromJs = () => {
    return gulp.src(packagePath + '/**/*.js', {base: './'})
        .pipe(through.obj((file, _, cb) => {
            const string = file.contents.toString();
            const matches = string.match(/[ |_|!][A-Z]+[a-z]+[a-zA-Z]*\.[a-zA-Z0-9_-]+/gm);
            if (matches) matches.forEach((match) => stringsFromJs.add(match.substring(1)));
            cb();
        }));
};
```

# Oh wait, we can reuse or existing function

As we already loop over all our js files (tFindUnusedPublic) we can just add our service check.
```javascript
const tFindUnusedPublic = () => {
    const stringToSearchT = [...stringsFromTemplate].join(' ');
    const stringToSearchJs = [...stringsFromJs].join(' ');

    // get public from js files
    return gulp
        .src(packagePath + '/**/*.js', {base: './'})
        .pipe(through.obj((file, _, cb) => {
           // ... some stuff we already do
                // components and directices
                let baseName = string.match(/controllerAs: '(.*)'/);
                if (baseName) { /*...*/ }

                // services
                let serviceName = string.match(/\.service\('(.*)'/);
                if (serviceName) {
                    serviceName = serviceName[1];
                    const uniquePublic = getPublic(string);
                    string = searchInString(uniquePublic, serviceName, stringToSearchJs, string, false);
                }
            // ... more some stuff we already do
        }))
        .pipe(gulp.dest('./'));
};
```
So with this little addition we now also check our services for unused methods and members.

Ideally our compiled code base should be smaller now (I saved about 100kB) and our users should be a bit more happy.

I hope that you where also able to squeeze a little more performance out of your angularjs project.

All the best and enjoy frontending 😉
#happy coding🎉
Daily Developer Jokes - Friday, Aug 7, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-08-07 12:00:01

---
title: "Daily Developer Jokes - Friday, Aug 7, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Friday%2C%20Aug%207%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258bb6df5f.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ What did the spider do on the computer?

___A:___ Made a website!
 -->
Meet DevComrade, yet another Windows Clipboard productivity tool
Tags: windows, desktop, productivity, devcomrade
Published: 2020-08-07 11:58:48

**Updated on 2021/07/21**. A new #DevComrade feature! I often struggled with formatting while pasting things like code snippets into Microsoft Teams chats (yes, I know about the <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>V</kbd> feature of Chromium — still often not good enough). So I've implemented something to address this experience. 

<kbd>Win</kbd>+<kbd>Ctrl</kbd>+<kbd>Ins</kbd> now converts the Clipboard text into `<pre>clipboard text</pre>` HTML, in place. Then just paste it into Teams with <kbd>Ctrl</kbd>+<kbd>V</kbd>:

{% twitter 1417631225481596928 %}
 
<hr>

Copy-pasting from online docs, StackOverflow or numerous blogs can be a tedious and sometimes even a dangerous task. Does the following sound familiar: you paste some text from a web page into a Terminal command line, and it gets executed immediately, before you even had a chance to edit it? Only because there was a CR/LF character at the end of the clipboard text.

Or, have you ever been annoyed with broken formatting, indentation, inconsistent tabs/spaces when you paste a piece of code into VS Code, a blog post or an email message? A typical workaround for that is to use the good old `Notepad.exe` as a buffer.

If the answer is yes, you may want to try out a little productivity improvement tool called [`DevComrade`](https://github.com/postprintum/devcomrade), a side project of mine which I've just [open-sourced](https://github.com/postprintum/devcomrade).

I now have two decicated hotkeys for pasting, **<kbd>Win</kbd>+<kbd>Ins</kbd> (paste as single unformatted line, for CLI-based tools) and <kbd>Win</kbd>+<kbd>Shift</kbd>+<kbd>Ins</kbd> (multiple lines)**, which work uniformly across all apps, shells, and browsers and remove the trailing empty lines and the last CR/LF ending. There are some other useful tricks [`DevComrade`](https://github.com/postprintum/devcomrade) is capable of.

As I've been lately working more and more with [WSL2](https://devblogs.microsoft.com/commandline/wsl2-will-be-generally-available-in-windows-10-version-2004/), [Windows Terminal](https://github.com/microsoft/terminal) and various command line tools, I've become pretty much dependent on `DevComrade`. [Give it a try](https://github.com/postprintum/devcomrade), hope you'll find it useful, too.
What have I been doing this week? 8/3-7
Published: 2020-08-07 11:55:52

Last week I was away visiting family, so I was not coding too much.  I did finish up the section on Basic Data Structures for freeCodeCamp's JavaScript course, which was a review of arrays and objects and some basic methods to work through data.  I found it to be a review of things previously covered, but it was fun to review!  The more I review these topics, the easier they become.

I've developed a habit of getting up early, grabbing some coffee, and getting online to practice code by 7am (and reading programming news usually between 6:30-7am).  As a morning person, I'm the sharpest as the sun is coming up.  I took this idea from a friend at work, who I greatly look up to.  He gets up and works on his side business from 6-9am before work, and while I do not do three full hours each morning of coding, I do try to make sure I'm putting in at least an hour each morning.

This week, I split time between three things: 1. continuing on freeCodeCamp's JavaScript course (Algorithms), solving a few easy problems on CodeWars, and starting the prep course for Hack Reactor.  The prep course is merely for fun right now, however it's neat to see what they require of applicants.  What was encouraging is that I was able to solve all 18 "basic" test questions in about 35 minutes.  It was an affirmation that I *actually have* learned a few things in the past few months.

The freeCodeCamp's basic algorithm section is a challenge.  Each exercise is a basic question which asks you to do something to a piece of code (an object or an array for example) and return a result.  It's very similar to some of the problems on CodeWars.  There are 16 total problems and I have completed three so far.  These are probably best for a weekend of work instead of early morning coding during the week.  I don't know how to do some of them, however Google and Stack Overflow have been helpful.

Although I haven't done much with it yet, I am working to update the code behind my Dice Roller application.  Thanks to some church friends and friends online, I have received some great feedback on my code and how I can clean it up.  Plus I'd like to make the page itself look nicer.
Explained: Creating a bubble pattern with just CSS
Tags: css, patterns, explained
Published: 2020-08-07 11:52:43

Using CSS to create a [zigzag pattern](https://www.1thingaweek.com/week/142/css-zigzag-patterns-explained) was a lot harder to do than bubbles but there are a couple of ways you can approach this problem and there's a bit of fun you can have too.

Starting with the basics, a repeatable bubble pattern can be created using a circular gradient and letting it repeat:

![Basic repeating bubble pattern in CSS](https://dev-to-uploads.s3.amazonaws.com/i/u3jxgi0rp5wblua09gm5.png)

    background-image: radial-gradient(transparent 25px, black 25px, black 26px, transparent 26px);
    background-size: 100px 100px;

It doesn't get much simpler than that, set the size of the pattern and create the appropriate circle using a radial-gradient that goes from transparent to the colour you want for the border.

The nice thing about this solution, it will take on the background colour for the element you've applied it to. Here's the same pattern on top of a teal background:

![Teal bubble pattern with just CSS](https://dev-to-uploads.s3.amazonaws.com/i/y0dr6ur89z50u71gkqon.png)

    background-colour: teal;

The other way to achieve this is to replace transparent with the colour of your choice. So here's the same pattern but with turquoise to fill. It's actually on top of the same teal background, you just can't see it.

![Turquoise bubble pattern with just CSS](https://dev-to-uploads.s3.amazonaws.com/i/2roil811u4wiayg2llgc.png)

    background-color: teal;
    background-image: radial-gradient(turquoise 25px, black 25px, black 26px, turquoise 26px);

Now, for a bit of fun. Using the multiple radial-gradients, background-positions and background-sizes you can build up something a bit more complicated:

![CSS bubble pattern that kind of looks like bubbles floating](https://dev-to-uploads.s3.amazonaws.com/i/7j207h1fn71qv1dhnop8.png)

By no means is this a realistic representation of what bubbles look like, but it just shows that you have a bit of freedom to create repeating patterns without having to load in additional assets.

    {
        background-image: radial-gradient(rgba(0,0,255,0.05), rgba(0,0,0,0.025) 25px, rgba(0,0,0,0.2) 26px, transparent 26px),
        radial-gradient(transparent 25px, rgba(176,196,222,0.4) 25px, rgba(176,196,222,0.4) 26px, transparent 26px),
        radial-gradient(transparent 50px, rgba(176,196,222,0.25) 50px, rgba(176,196,222,0.25) 51px, transparent 51px),
        radial-gradient(rgba(176,196,222,0.5), rgba(176,196,222,0) 50px),
        radial-gradient(transparent 25px, rgba(135,206,250,0.35) 25px, rgba(135,206,250,0.35) 26px, transparent 26px);
        background-size: 200px 200px;
        background-position: -75px -45px, 0 0, 20px 50px, 25px 55px, 50px 125px;
    }

For this example, you need to specify multiple radial-gradients while also adding a specific background-position for each corresponding gradient. You could also add a specific background-size if you wanted to have a parts of the pattern that might not repeat as often.
HTML Templates made with Bulma & Tailwind CSS
Tags: css, html, design, functional
Published: 2020-08-07 11:49:51

## HTML Templates ready to customize.

Today we have uploaded some **free** HTML Templates ready to use for your personal blog, landing page or documentary page.


Just check and download them! 👇👇
[https://www.wickedtemplates.com/](WickedTemplates) is a side project that we (@Michael_Andreuzza & me) are working on.

These templates are done using Bulma and Tailwind css frameworks.
We are working on more **free** templates and Premiun ones.

I would suggest you to also have a look at  👉[https://www.colorsandfonts.com/](C&F) for a nice Colours Pallete and Gradients to customize your template.

Would be really appreciated if you like to help us to review our work.

Thanks for reading!
Simple Git workflow for beginners
Tags: git, github, beginners
Published: 2020-08-07 11:44:07

---
title: Simple Git workflow for beginners
published: true
description: My current git workflow
tags: git, github, beginners
cover_image: https://images.unsplash.com/photo-1556075798-4825dfaaf498?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3910&q=80
---

This post is to share the git workflow I use for my projects. I am mainly writing this post so I can use it as a cheat sheet from time to time. However, I think it will serve as a good reference for any developer that wants to go beyond the `git add` `git commit` `git push` workflow.

This posts assumes that you are familiar with the basics of git. If you are not then I recommend the video below, by [Traversy Media](https://twitter.com/traversymedia) for a quick overview:

{% youtube SWYqp7iY_Tc %}

## **Step 1: Create a branch for the feature you want to add and navigate to it**

```
git checkout -b <branch-name>
```

## **Step 2: Make changes to your code**

Use the following command to see changes:

```
git status
```

## **Step 3: Add changes to staging area**

```
git add <files-changed>
```

## **Step 4: Commit changes and add a short description**

```
git commit -m "<commit message>"
```

For commit messages I use the article by Chris Beams as reference: 

[How to Write a Git Commit Message
](https://chris.beams.io/posts/git-commit/)

## **Step 5: Navigate to main branch**

```
git checkout master
```

## **Step 6: Push changes from branch to create a pull request**

```
git push origin <branch-name>
```

Pull request can be found on github or gitlab (whatever you are using). There you can review and add more comments to it.

That is all!

Got questions? Feel free to reach out via the comments or my [twitter](https://twitter.com/maheralkendi)

Ok! Now back to learning 👨🏿‍💻
Which wireframing tools do you use?
Tags: help, ux
Published: 2020-08-07 11:44:04

Hello guys, I'm looking for a good wireframing tool with the following criteria:

- Preferably a stand-alone desktop application (non-cloud app)
- Preferably open-source, or free, or one-time cost with a perpetual license (no subscription)
- Has lots of stencils (predefined UI components)
- Easy to add new types of stencils (UI components) that I can reuse for different projects

Which tools would you recommend?

Thanks!
Understanding Rust Closures
Tags: rust, womenintech, closures, wecoded
Published: 2020-08-07 11:40:49

Closures are very interesting programming concepts. It helps save a lot of expensive calculations while writing programs.
Closure syntax of Rust is very similar to that of Ruby and SmallTalk.

Rust’s closures are anonymous functions you can save in a variable or pass as arguments to other functions. You can create the closure in one place and then call the closure to evaluate it in a different context. Unlike functions, closures can capture values from the scope in which they’re defined. 

Closures are usually short and relevant only within a narrow context rather than in any arbitrary scenario. Within these limited contexts, the compiler is reliably able to infer the types of the parameters and the return type, similar to how it’s able to infer the types of most variables.

Closures don’t require you to annotate the types of the parameters or the return value like fn functions do. Type annotations are required on functions because they’re part of an explicit interface exposed to your users. Defining this interface rigidly is important for ensuring that everyone agrees on what types of values a function uses and returns. But closures aren’t used in an exposed interface like this: they’re stored in variables and used without naming them and exposing them to users of our library.


Let us dive into when to use closures. As mentioned in the definition, they are used at places when you need to call functions several times or repeat a value from a function call. 

Consider the following snippet. This piece helps to explain how closures work and most importantly how and where to apply closures.

<pre>
``` rust
 fn main() {
    let fact = |x| -> usize { (2..=x).product() };
    
    let five_fact = fact(5);
    
    println!("{}", five_fact);
    
    println!("{}", fact(8));

}

```
</pre>
One of the first functions we write in any programming language is that of a factorial calculator. The code above is pretty much self-explanatory. Instead of defining the function, we have used anonymous functions, i.e, closures.