teleren/devto huggingface dataset:
A Simple Trick for Creating 3D-Style Buttons with CSS
Tags: css
Published: 2020-11-28 21:58:48

This week, I wanted to revisit CSS and focus a little more on styling than I usually would. During this time, I focused on button styles, and I worked on a few ideas I've had for a while now; there's one in particular which I think turned out really nice.

{% codepen https://codepen.io/brandonmweaver/pen/gOwbWyZ %}

I used a couple of box shadows to create the illusion of a three-dimensional button, and I think that the result is great. The only downside is that the inset shadow needs to be manually set, rather than transparent/translucent to match the background of the container.
Type Literal Tabs Anywhere
Tags: linux, tooling
Published: 2020-11-28 21:44:11

I often work with tab-indented code, but there's one place that can be a royal pain: the web browser. You can't just press <TAB> a field on GitHub and get a literal tab character. You move to the next field. That leaves you with two options: either indent with spaces or copy/paste your tab character manually. Blah.

I decided those were both annoying to me, so I decided to leverage the Compose key feature offered by Linux.

My guide will only work for Linux. Check out [macos-compose](https://github.com/Granitosaurus/macos-compose) to get compose key behavior on macOS, and [wincompose](https://github.com/SamHocevar/wincompose) for Windows. I've tested neither, but I can imagine you could pull off something similar to my approach there.

## Step 1: Enable Compose Key

The Compose key is an awesome feature that allows you to type many common characters with a few keystrokes. You configure a Compose key on your computer — I usually use the right `Alt` key. Then, you tap the Compose key (don't hold it down), and tap the correct combination of keys for the desired character, one by one.

For example:

* `Compose n ~`: ñ
* `Compose C O`: ©
* `Compose t m`: ™
* `Compose e '`: é

To enable this snazzy feature on Gnome (the default for Ubuntu, Pop!_OS, and Fedora), go to Settings -> Keyboard -> Type Special Characters -> Compose Key, and select a key.

If you're using another desktop environment, it's pretty easy to find the instructions. Just search "enable compose key xcfe", "enable compose key mate", or whatever your desktop environment is.

## Step 2: Add TAB to Compose combinations.

In your home directory, create a new file called `.XCompose`. (If it already exists, you can just add to it instead.) Here's mine:

```
include "%L"

<Multi_key> <backslash> <t>     : "	"   # TAB
<Multi_key> <backslash> <T>     : "	"   # TAB
```

The `include` line just brings in all the default compose combinations from the operating system. Don't forget this, or else you'll override the tens of thousands of defaults!

The next two lines add the new combination: `Compose \ t` or `Compose \ T` will insert a literal tab character, which is what's in the double-quotes. (Everything after the `#` is just a comment.)

Save, close, and restart your computer.

To test this out, open up anything you can type in. Test that compose is still working by tapping your Compose key, followed by `n` and `~`. You should get `ñ`.

Now test out the new combination: Compose, `\`, `t` should produce a literal tab: (`	`).
Weekly Update #003
Tags: opensource, php
Published: 2020-11-28 21:30:02

---
description: My first PR and PHP
---
Been a quiet week, so wasn't expecting to have much to write on here, however a few things happened worth talking about.

### My First PR

A comment was made to me to do something with the postcodes that are in the system I am developing. Find out what projects have postcodes near each other, and that way work can be grouped together and reduce potential mileage costs of staff that need to visit these projects.

A quick google search found https://postcodes.io/ which has an API that returns nearby postcodes. It also has a C# wrapper https://github.com/markembling/MarkEmbling.PostcodesIO

A comparison of what was being returned from the wrapper and what the API said should be returned revealed that the distance between postcodes wasn't being returned.

As the code was on GitHub I could easily see how easy or difficult it might be to add the missing bit of information. It was easy! So, I forked the repo and made the change. I published the change to a private NuGet repo in my Azure Dev Ops account. That way I could try my revised package to check it did what I wanted. 

I left a message on the GitHub project letting the owner know I had a potential fix for an issue. The project hadn't been updated in over a year, so the owner may not be interested, or the project may have been abandoned. 

I was in luck just 17 hours after I left a message the project owner said to create a Pull Request, which I did and shortly afterwards my code had been merged in and an updated version of the package existed in the public NuGet feed. 

I have been thinking about contributing to open source for a while. However, I had not seen a project I wanted to contribute to, or a problem that I knew how to fix until now that is.

### PHP

This week I had a call asking me if I knew PHP? 

I did, over ten years ago, before I got my first IT job, I spent time learning PHP and MySQL. I created a blog, and I also created a website for my Dad's camera club. The code I created back then was awful. No shared code, all the code was associated with the page, or sorts of bugs occurred and as time went by it became increasingly hard to update. The site was well liked but I eventually lost interest and moved on to learn other things.

This call led to me talking with the head of IT, and later a couple of the developers who have since granted me access to the codebase of a project.

I haven't had time to spend a lot of time looking at the code so far, however this is nothing like the PHP I had built before.

The project makes use of the [laravel](https://laravel.com/) framework and the first file I opened had methods and classes, so apart from the syntax you could think you were looking at C#. 

Another thing that interested me was the project used docker containers, it has automated builds as well. Lots of modern programming ideas that I had some ideas about. I am looking forward to learning more about this project and how I might contribute to it.
Convert span to input and vice versa, using javascript
Tags: tutorial, javascript, html, webdev
Published: 2020-11-28 21:27:50

[[Clique aqui para ler em português]]()

let’s convert a span to an input using javascript and an input to a span.

## Code

First we will create the interface, we will do something simple, using only HTML.

```html
<div id="element">
  <span onclick="spanSwitch(this)"> John </span>
</div>
```

We have a div with id element to assist in the search with javascript, we have a span that calls a function when clicking.

```javascript
function spanSwitch(e) {
  let txt = e.innerText;
  let element = document.getElementById('element');

  element.innerHTML = `<input onblur='spanReset(this)' value='${txt}' />`;
  document.getElementsByTagName('input')[0].focus();
}

function spanReset(e) {
  let txt = e.value;
  let element = document.getElementById('element');

  element.innerHTML = `<span onclick='spanSwitch(this)'> ${txt} </span>`;
}
```

We have two functions:

* **spanSwitch* = Here the span is replaced by the input, using the span text as the input value;
* **spanReset* = Here the input is replaced by the span, using the input value as the span text;

ready as simple as that.

## Demo

See the complete project working below.

{% codepen https://codepen.io/WalterNascimento/pen/rNLQxba %}

## Youtube

If you prefer to watch, I see the development on youtube (video in PT-BR).

{% youtube ZZMAPUZIutg %}

***

## Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you! 😊😊
Kubernetes for crypto
Published: 2020-11-28 21:12:57

# OpenDAX on Kubernetes

## Our Experience at Openware

This article explain why we use kubernetes for deploying our [cryptocurrency exchange software](https://www.openware.com)

[Kubernetes is the Ultimate Cloud Platform ?](https://medium.com/openware/kubernetes-the-ultimate-cloud-platform-37bf3c3dce38)

Please read and comment!
P5.JS: Interactive Clock
Tags: javascript, showdev, webdev, programming
Published: 2020-11-28 21:08:24

Hi there 👋! In this post I want to share an old project of mine that I have archived on GitHub and decided to re-do it again: Fleeing Points Clock!

An interactive clock made of little squares that are actually _steering vehicles_, that is, entities that experiment a certain _desire_ to go to a certain place, and as a consequence to that desire the vehicle experiments a force that drags it towards its target. It's a very interesting concept that I learned while watching Daniel Shiffman's Coding Challenge: [Steering Behaviors](https://www.youtube.com/watch?v=4hA7G3gup-4).

This is how the clock looks like, it was built using **P5.js**:

![Gif_1](https://dev-to-uploads.s3.amazonaws.com/i/hatvr4ougi3y1wkxp63j.gif)

As you can see, passing your mouse over the numbers produces an opposite force that repels the vehicles but, as soon as the cursor leaves, the squares rearrange themselves.

You can also change the colors of the squares by pressing "ENTER":

![Gif_2](https://dev-to-uploads.s3.amazonaws.com/i/nd8l19ae3e6n2ywkfaeg.gif)

If you want to try it yourself, you can visit the page [here](https://devtony101.github.io/fleeing-points-clock/).

Thanks for reading! And if you are curious about the code, please check out the repo (and leave a star if you wish):

{% github https://github.com/DevTony101/fleeing-points-clock no-readme %}
⏰ Display 3D models on the web in 1 minute
Tags: javascript, html, webdev
Published: 2020-11-28 21:00:39

In this article, I will write a short summary of an impressive web component for model viewing, [model-viewer](https://modelviewer.dev/)

The **model-viewer** library makes it easy to display and interact with a 3D model file as easily as writing HTML tags.

## **As easy as writing HTML**

**Code:**

```html
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>

<model-viewer 
  src="https://modelviewer.dev/shared-assets/models/Astronaut.glb"
  alt="A 3D model of an astronaut"
  auto-rotate
  camera-controls>
</model-viewer>
```

**Result:**

![3d model](https://s8.gifyu.com/images/model.gif)

We can drag around and zoom in, as we would in any 3D model viewer, and all it took was an HTML tag and 2 scripts.

## **Models**

**You can find list of `.glb` models [here](https://github.com/google/model-viewer/tree/master/packages/shared-assets/models)**

## **That's it!**

If you were wondering how to display your model, no need to read further, but if you wish to, I will write a bit more about the library.

## **About the library**

**model-viewer** web component is being developed by Google, and it has been introduced in early 2019. Right now they're announcing version `1.1`.

The idea of **model-viewer** is to provide developers with the ability to incorporate 3D and AR technologies for their users without extensive knowledge about related technologies, and with the "as easy as writing HTML" quote, they're more than just on the right path on doing that!

## **Augumented reality**

And yes, you read that right, you can also use this as an augmented reality module. You can read more about that (and find a coded example) [here](https://modelviewer.dev/examples/augmentedreality/index.html)

## **APIs**

Other than just displaying the model, **model-viewer** offers great APIs like **loading**, **AR**, **Staging & Cameras**, **Annotations**, **Animation**, and **Scene Graph**

## **Model Editor**

They've also introduced a **model editor**, which you can check out [here](https://modelviewer.dev/editor/)

## **Conclusion**

Web technologies are rapidly improving, with limits being pushed every single day. Yesterday's impossible ideas are now a reality, and we can all be thankful that open-source folks are doing us a great favor by providing these technologies free for everyone's use.
Mimic photoshop quick selection tool in JavaScript
Published: 2020-11-28 20:39:21

I want to select a dynamic boundary from an uploaded image and save that image selected area as separate image. How can I do that in Javascript. Is there any library available. I have found a tool called `magic wand` (link below). It allows to select the area with the magic wand but I want to select the boundaries of the new image from the mouse. Help is appreciated

https://github.com/Tamersoul/magic-wand-js
OSD600 - Release0.3 New PR since the last disaster.
Tags: github, bash, opensource
Published: 2020-11-28 20:39:11

OSD600 is an Open Source development class where we learn how to contribute to open source and manage our own projects.  My previous PR for [Release0.3](https://github.com/Seneca-CDOT/topics-in-open-source-2020/wiki/release-0.3) proved to be more difficult then anticipated.  I needed to find something else.  I wrote about this in my previous [blog](https://dev.to/strawberries73/osd600-release-0-3-tenacious-2fmn).  I've discovered that CSS has varying levels of difficulty depending on what you are trying to accomplish.

I searched on [telescope](), where I found another ["Issue"](https://github.com/Seneca-CDOT/telescope/issues/1409) in front end to work on.  In this PR I needed to remove files from the project. After careful searching I found the files.  I removed the files in the command line and saved.  It was now time to run telescope and ensure everything worked fine and the removal of the files didn't effect the project.  Everything seemed to be fine so I created the [Pull Request](https://github.com/Seneca-CDOT/telescope/pull/1451).  Still feeling defeated by my last PR, I crossed my fingers and hoped for the best. 
Exhale... Voila! My PR was [merged](https://github.com/Seneca-CDOT/telescope/commit/4453cfe04a2f8153a028ae9b964dda5bbbc4e7ff).

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

I conclude that school often creates anxiety for most.  The pressure of learning new things and completing the work assigned within the time allotted.  Learning new things is one of my favorite things to do but much easier when done at your own pace. Now I'm really looking forward to leaning more after my semester is complete!
Increment(++) Weirdness in JavaScript
Tags: javascript, codenewbie, beginners, webdev
Published: 2020-11-28 20:20:27

The increment(++) and decrement(--) operators are very useful in JavaScript but can be misleading depending on whether they are used as a *prefix* operator (as in *++x*) or a *postfix* operator(as in *x++*).

Increment as a **postfix** operator:
```
let a = 3;
a++;

console.log(a); // a is 4
```


Ok, everything seems normal here. The increment operation **(a++)** executes and the new value of **a is 4**.
Super useful right? We also use the postfix increment in for loops constantly:
```
for(let = 0; i < whatever; i++) {
// loop-de-loop
}
```
So, we 
* initialize **i** at zero.
* Then, if **i** is less than "**whatever**", 
* **i** equals **i + 1** i.e we add 1 to **i**

The increment in this case is adding another go-round of the loop, until it reaches "whatever". 
Awesome, so far, so good.

Check out the next example for incoming weirdness.
```
let x = 3;
//POSTFIX 
let y = x++;

console.log(x); // x is 4
console.log(y); // y is 3 because assignment of y to value of 
// x happens BEFORE increment
```
So why does this happen?

* Under the hood, JavaScript executes the assignment of y to the  value of x, 
* *THEN continues and evaluates x++*.



When using increment (or decrement) as a **prefix** operator, the behavior is what you would expect:
```
let alpha = 3;
//PREFIX
let beta = ++alpha;

console.log(alpha); // x is 4
console.log(beta); // y is 4 because assignment happens AFTER increment
```
* JavaScript engine sees y is assigned to something about to be incremented because of the ++ operator,
* *so JS evaluates increment*
* *THEN finally assigns value to y.*

I decided to write this after being sloppy with using the postfix operator and seeing weird results, so I wanted to understand what was going on. Now you will too, happy coding!
Project Underway...
Published: 2020-11-28 20:19:51

This week was a very busy one with Thanksgiving right in the middle of it. I reached out to a few people on Linkedin who were former Flatiron Grads abut building a PWA. A PWA stands for Progressive Web App, which is an application that functions on multiple platforms like a computer, tablet and phone. I had learned a little bit about PWAs in Flatiron School from one of my instructors. He told me about React Native. React Native is a framework for Javascript that allows webpages to refactor themselves based on the platform they are on so they look and function as intended. I thought it would be best for me to expand my knowledge of React by using this relatively new technology for my Goals app. My other alternative would be to learn Android or Ios programming languages in order to make my app work. That would be a lot of work and I figured that know React Native on top of everything else I know would only benefit me on interviews or in the job search process. I look forward to working on my app more.
S2E10 Learn JMeter Series - XPath2 Extractor
Tags: performance, webperf, tutorial, testing
Published: 2020-11-28 20:01:19

Welcome to Learn JMeter Series!

In this Season Two, Episode Ten, you will learn following:

🔹 CSS Selector Extractor in JMeter

{% youtube DWu_kVLZbac %}

☑ Buy me a tea 🍵 : https://www.buymeacoffee.com/qainsights
☑ [My Blog](https://qainsights.com)
☑ [My Udemy Course](https://www.udemy.com/course/performance-testing-using-truweb)
DA09 Performance in EA
Tags: learning, design, architecture
Published: 2020-11-15 02:08:39

# 本篇主要讲企业级应用(Enterprise Applications, EAs)中与**性能**有关的问题。

# Performance Engineering

When do we need to care about Performance ?

- **Requirement**: Indentify what is "fast-enough";
- **Design**: The archetecture and design of an application will have a considerable impact on performance;
- **After debugging**: Engineers should measure where the program is spending its time, and try to speed up any parts that consume nontrivial amounts of time.

During **implementation**, we do NOT need to care about Performance, because it is hard to indentify performance **bottlenecks** in the code before a program is working completely.

# Design Principles:

## Bell's Principle:

The cheapest, fastest, and most reliable components are those that aren't there.

Simple designs often show better performance than more complicated designs.

最便宜，最快和最可靠的组件是不存在的。简单的设计往往会比复杂的设计更好。

## Pipelines

Pipelining turns a problem whose performance is limited by **latency** into a problem whose performance is limited by **throughput**.

利用 吞吐量 来解决 延迟 带来的性能不足。

类似于使用**异步**来代替**同步**。

Pipelines的缺点或局限在于我们要保证每一个request是独立的，后续的request不能依赖与前面request的response。同时，Pipelines实现起来也比较复杂。

## Cache

缓存，类似于CPU里面的高速缓存。
100,000 post views on dev.to
Tags: javascript, beginners, webdev, codenewbie
Published: 2020-11-28 19:52:45

Opened my Dev.to dashboard after a long time and my posts on dev.to have been read over 100,000 times on dev.to 🤯🤯.

## This is AWESOME!!

To celebrate this, I and the good folks below have decided to giveaway a course to a budding new beginner developer, someone who deserves this. 

Just tell us in the comments below, what you are doing and how a course would help you get better at what you are trying to build, you can even showcase us your work. 

1. [Jordan](https://twitter.com/jordnfk), the owner of [Appydev](https://appydev.co?ref=devtogiveaway)
2. [Lucian](https://twitter.com/Inovatik), from [Inovatik](https://inovatik.com/)
3. [Mohd Danish](https://twitter.com/mddanishyusuf) from [NoCodeApi](https://nocodeapi.com/)
4. [Musharof Chowdhury](https://twitter.com/MusharofChy) from [Gray Grids](https://graygrids.com/), [UI Deck](https://uideck.com/), [LineIcons](https://lineicons.com/) 

We will choose the right person who is need of this and buy you a course of your choice within $75.

Here are some great course choices, to take your web development game to the next level.

1. [Mastering Nuxt](https://masteringnuxt.com/)
2. [ES6 for everyone from Wes Bos](https://es6.io/)
3. [All the courses from Flavio](https://flaviocopes.com/blackfriday/)
4. Or anything else you recommend us.

**UPDATE** : We will announce the winner when have a decent amount of entries, sorry for not posting this before.
How to write better code
Published: 2020-11-28 19:40:30

#1- Write comments but only when necessary:
Comments are important but when something is clear there is no need to describe it in a comment.
⭐️ be fast, clear and meaningful.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1606588463341/p3c3dCctS.png)

#2- Unformatted Code:
When your code is very compact it won't be clear and readable even with syntax highlighting , use white spaces to have a better spacing and make your code easier to understand.
⭐️ in python you can use pep8 as guidelines and best practices to write better code.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1606589618869/Ql_ccWyC_.png)

#3- Use meaningful name:
When naming variables, functions classes or objects using names like a, b c or variable1 is a bad habit because you won't be able to understand why do you have that variable or what is the role of that function and your code will become a big mess and debugging will become impossible.
⭐️ use easy, memorable, meaningful and clear names and you won't be like him 🤦‍♂️👇

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1606588266713/i0G238H_d.png)


#4- KISS (Keep It Simple Stupit):
The KISS principle intends to write code as simple as possible. Avoid complexity and try to make a code that everyone can understand. 👍

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1606591153018/bC1IPaS74.png)

#5- DRY (Don't Repeat Yourself):
these days google and stackoverflow are good places to find solutions for our problems but copy-pasting is a bad habit, sometimes solutions you can find aren't for everyone. First understand your problem then understand given solutions and only get the necessary part for you, if you just use it as it's posted on internet, you will make your code longer, slower and harder to understand and maintain and you will become like him 🤦‍♂️👇

![image.png](https://i.pinimg.com/originals/70/bc/3b/70bc3b48a9f41e5101ac373a42e64ca8.gif)