teleren/devto huggingface dataset:
Using SVG as a Border with CSS
Tags: css, svg, responsive
Published: 2018-08-07 20:08:42

---
title: Using SVG as a Border with CSS
published: true
description: Learn how to use SVG images as the border of any sized container.
tags: css, svg, responsive
cover_image: https://harnerdesigns.com/wp-content/uploads/2018/08/back-to-school-chalkboard.png
---
Have you ever wanted a cooler border than what you can get from stacking `border` elements? Well fear not, today I'm going to walk you through the `border-image` CSS property.

Here's the image we are going to chop up into a border:

![Heres Our Fancy Border](https://harnerdesigns.com/wp-content/uploads/2018/08/border.svg)

Download it [Here](https://harnerdesigns.com/wp-content/uploads/2018/08/border.svg) if you're following along.

This works with raster images as well, but due to scaling issues it's best to use SVG.

## Border-Image
Bare minimum you need to set the `border` which sets the width of the border image (and acts as a fallback, although browser support is [Pretty Good](https://caniuse.com/#search=border-image)) and the `border-image` property.

```
.border{
    border:20px solid;
    border-image:url(border.svg);
}
```
{% codepen https://codepen.io/jackharner/pen/QBZdGZ %}

Obviously, while interesting, this isn't the intended result, so we have a few more steps.

## Border-Image-Slice
The [border-image-slice](https://www.w3schools.com/cssref/css3_pr_border-image-slice.asp) property tells the browser where to cut the image to create the different edges. It accepts up to 4 either unitless numbers, or percentages. 

The values measure from the top, right, bottom, and left edges of the image (in that order). If one of the units is missing it will mirror the other side. 

```
// These are all the same.
border-image-slice: 0 40;
border-image-slice: 0 40 0 40;
border-image-slice: 0 40 0;
```

![Slicing the image](https://harnerdesigns.com/wp-content/uploads/2018/08/Border-Image-Slice.png)

So, back to our example, since the image we're using is symetrical it makes it easy to slice:

```
.border{
    ...
    border-image-slice:170;
}
```
{% codepen https://codepen.io/jackharner/pen/oMaBpZ %}

Ta Da!! You have a custom image border. There are a couple other `border-image` properties that can affect how the border reacts to scaling and other things. Check out this [article from CSS-Tricks](https://css-tricks.com/almanac/properties/b/border-image/) which goes into a little more detail about all of this. 

## Use Case 

Nobody wants a squiggly line on their borders but this is what I was working on when I learned about border images.

![Back To School Chalkboard](https://harnerdesigns.com/wp-content/uploads/2018/08/back-to-school-chalkboard.png)

The frame and the chalk are part of the SVG image making up the border. This allows the container to retain the look of a chalkboard, regardless of what layout or size the content inside is. 

### Do you see yourself using this ever? Why or why not?
Help designing web application UI
Tags: help, material, angular
Published: 2018-08-07 18:57:16

---
title: Help designing web application UI
published: true
description: 
tags: help,material,angular
cover_image: https://dkru86weszx9t.cloudfront.net/blog/wp-content/uploads/2018/05/how-to-ask-for-help-760x400.jpg
---
We're a small team of backend developers building our first web application (a really small one) and we don't really have a dedicated UI person to help us out.

We're using Angular together with Angular Material and try to strictly follow it. Would there be someone who'd be able to chat and give some basic guidance?
Italian Hacker Camp 2018 – I was there
Tags: mozilla, opensource, hacking, event
Published: 2018-08-29 10:34:11

---
title: Italian Hacker Camp 2018 – I was there
published: true
tags: Mozilla,Open Source, hacking, event
canonical_url: https://daniele.tech/2018/08/italian-hacker-camp-2018-i-was-there/
---

A hacking camp with friends, what more do you want to do in the summer? 
Well also do a little presentations and a few hours of car of course!

The post [Italian Hacker Camp 2018 – I was there](https://daniele.tech/2018/08/italian-hacker-camp-2018-i-was-there/) appeared first on [Daniele Mte90 Scasciafratte](https://daniele.tech/eng).
Introduction to TMUX
Tags: terminal, vim, tmux, beginners
Published: 2018-08-07 17:47:34

---
title: Introduction to TMUX
published: true
description: This is an article on introduction to TMUX which might come in handy if you are just beginning with it.
tags: #terminal #vim #tmux #beginners
---

I recently came across TMUX and have been using it for a couple of weeks now. 
I wrote an article on the same, providing an introduction in a simplified manner, so that other developers can benefit from it. 
 

Here's a link to the article:
https://medium.com/@yashwate07/basic-introduction-to-tmux-5c1d943ddeec
A different syntax for enforcing business requirements
Published: 2018-08-07 15:53:12

Have you ever had to implement some tricky business requirement that involved on a multitude of conditions? Sometimes, the requirement might actually be easy to express in human language, but when it comes to code, you'd have a hard time expressing it in a way that's easy for other _humans_ to understand.

For instance, say you have a fictional school portal where students can apply for financial aid. You're given a requirment:

> Students who have a GPA less than 2.0 should not be permitted to apply, except they are in their final year or have a medical condition.

Here's one way you could write this:

```php
if ($student->hasGpaLessThan(2.0)) {
    if (!$student->isInFinalYear() || !$student->hasMedicalCondition()) {
        throw new BadRequestException("We can't provide you with aid right now.")
    }
}
```

Here's another way:

```php
if ($student->hasGpaLessThan(2.0) 
    && (!$student->isInFinalYear() || !$student->hasMedicalCondition())
) {
    throw new BadRequestException("We can't provide you with aid right now.");
}
```

What if you could write it like this instead?

```php
when($student->hasGpaLessThan(2.0))
    ->ensure($student->isInFinalYear() || $student->hasMedicalCondition())
    ->orElseDeny("We can't provide you with aid right now.")
```

I think you'll agree with me that the third version is easiest to mentally parse and closer to the wording of the requirement. It's also less bug\-prone than the first two.

One more example. Say we have a second requirement:

> Students may apply for aid only if they are studying one of the aid\-eligible courses or they have a letter from the President.

_\(Ignore our crazy rules; it's a fictional school🤭\)_

This would work:

```php
if (!$student->isStudyingEligibleCourse() && !$student->hasPresidentsLetter()) {
    throw new BadRequestException("Sorry, no aid for you.");
}
```

Using our `ensure` syntax, this would be:

```php
ensure($student->isStudyingEligibleCourse() || $student->hasPresidentsLetter())
    ->orElseDeny("Sorry, no aid for you.");
```

Both syntaxes are pretty similar, but to my mind, the second is easier to understand at first read.

For what it's worth, I don't intend to reinvent or eliminate `if`s. I just believe that using `when...ensure...orElseDeny` can be more expressive in certain scenarios. I'd like to hear your thoughts, too.

If you like this syntax, I made it into [a package](https://github.com/shalvah/ensure), so you can use it in your project by running `composer require shalvah/ensure`. Please star and share if you find it useful\!
Share your biggest challenges as junior developers
Tags: discuss
Published: 2018-08-07 15:52:50

---
title: Share your biggest challenges as junior developers
published: true
description: 
tags: #discuss
---

I have few friends and colleagues that have recently started working as developers and testers, and I've tried to mentor them a bit. We've talked about what they were struggling with and I've noticed that most of them were under the impression that they were the only ones experiencing a particular problem. From my experience I know this is very unlikely so
I would like to write a post (or few) about the most common problems junior developers are experiencing and for that I need your help and input.

What were the biggest challenges you faced during the first years working as a developer/tester?
Were these mostly technical (e.g. unknown tech stack, in-house framework), social (difficult colleagues, bosses, etc) or was it something else?

If you would like to help, leave a comment below and I hope that will show others that they 're not alone in their struggles.
Flutter — Getting started with VSCode setup for Mac
Tags: programming, editor, plugins, vscode
Published: 2023-01-06 17:41:41

---
title: Flutter — Getting started with VSCode setup for Mac
published: true
date: 2018-08-07 15:43:23 UTC
tags: programming,editor,plugins,vscode
canonical_url: 
---

I know VS code has become popular amongst developers. Is that because it is colorful? Nope! I don’t think so, but something lite for the hassle free development, Isn’t ?. Alright, lets see how to play with VSCode for Flutter development in few steps

STEP 1: Visit the official setup page for flutter [https://flutter.io/setup-macos/](https://flutter.io/setup-macos/)

STEP 2: Download the **flutter\_macos\_v0.5.1-beta.zip** file

![](https://cdn-images-1.medium.com/max/1024/1*lVd-mLHnU_xLlveJX0UAbw.png)

STEP 3: Copy the path of a file where downloaded contents exists ( In my case ,it is default downloads folder) i.e ~/Downloads/

STEP 4: Now unzip the file using below command in your root folder and take a break.

```
unzip ~/Downloads/flutter_macos_v0.5.1-beta.zip
```

Pefect ! Now flutter should have been configured on your home location.

STEP 5: Add the below **export PATH** statement in **~/.zshrc (Zsh users)** or **$HOME/.bash\_profile**

```
export PATH=$HOME/flutter/bin:$PATH
```

Tip : I use **Zsh** with **iTerm2** and my file looks like below

```
export ANDROID_HOME=$HOME/Library/Android/sdk

export PATH=$PATH:$ANDROID_HOME/bin

export PATH=$PATH:$HOME/Library/Android/sdk/platform-tools

export PATH=$PATH:$HOME/Library/Android/sdk/tools

export PATH=$HOME/flutter/bin:$PATH
```

STEP 7: Save the changes and close the terminal once (It’s very important)

STEP 6: Now, run **flutter run** command to ensure flutter is configured successfully ( If your installation is complete, then you shouldn’t get **command flutter not found** exception )

STEP 7: Go to **Extensions** , type **Flutter**  , **Install** and  **Reload**.

![](https://cdn-images-1.medium.com/max/1024/1*HDTBDF3WTnP87IK1O17yTQ.png)

STEP 8: Now that all **Flutter** commands should have linked on your Command palette.

![](https://cdn-images-1.medium.com/max/1024/1*27DcDyA-Y0KxOq2Vl7TJrQ.png)

Happy Coding! Welcome to the world of fluttering :-)

* * *
Marcar y desmarcar checkbox de manera simultánea con jQuery
Tags: javascript
Published: 2018-09-03 20:22:00

---
title: Marcar y desmarcar checkbox de manera simultánea con jQuery
published: true
tags: JavaScript
canonical_url: http://galatar.com/marcar-y-desmarcar-checkbox-de-manera-simultanea-con-jquery/
---

Hace unos días tuve que hacer un formulario para enviar un correo a una lista cerrada de personas, pero me pedían la posibilidad de enviar el correo a todos o a una parte de la lista cerrada.

Algo parecido a lo que se muestra en la siguiente imagen

![Formulario con checks multiples](http://galatar.com/wp-content/uploads/2018/08/captura_formulario_correo_con_checks_multiples-1024x512.png)

Tenía hecho algo similar en un proyecto más antiguo y me decidí por la técnica del corta/pega pero para mi sorpresa el script funcionaba la primera vez y luego se negaba a repetir la hazaña.

Os pongo el fragmento de HTML de ejemplo y el script inicial para comentaros el problema.

```html
<table border="1">
  <tr>
    <th><input type="checkbox" id="selectall"></th>
    <th>Participantes</th>
  </tr>
  <tr>
    <td><input type="checkbox" class="case" name="case[]" value="1"></td>
    <td>Fulano de Tal y Cual</td>
  </tr>
  <tr>
    <td><input type="checkbox" class="case" name="case[]" value="2"></td>
    <td>Irene Sal de la Cueva</td>
  </tr>
  <tr>
    <td><input type="checkbox" class="case" name="case[]" value="3"></td>
    <td>Zutano Ruiz Ruiz</td>
  </tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
  $("#selectall").on("click", function() {
    $(".case").attr("checked", this.checked);
  });
</script>
```

Como ves he definido un primer checkbox con el identificador "selectall" para seleccionar o deseleccionar al resto que he marcado con la clase "case" para poder referirme a ellos en conjunto.

Cuando se hace "click" en el checkbox superior todos los demás cambian su estado. El fallo de este código, que yo juraría que funcionaba en versiones antiguas de jQuery, es que la función "attr" sólo modifica el atributo original del elemento, cuando la página se carga, pero no una vez que se ha modificado. Para que funcione en cualquier circunstancia hay que usar la función "prop".

```javascript
$("#selectall").on("click", function() {  
  $(".case").prop("checked", this.checked);  
});
```

Puestos a mejorar un poco más el script he agregado otro evento para que cuando se desmarquen uno o más elementos se desmarque también el checkbox superior. Y si todos están marcados pues que se marque el superior también.

```javascript
$("#selectall").on("click", function() {  
  $(".case").prop("checked", this.checked);  
});  
  
// if all checkbox are selected, check the selectall checkbox and viceversa  
$(".case").on("click", function() {  
  if ($(".case").length == $(".case:checked").length) {  
    $("#selectall").prop("checked", true);  
  } else {  
    $("#selectall").prop("checked", false);  
  }  
});
```

Espero que os sea de utilidad en algún momento. En cualquier caso os dejo el [código en codepen](https://codepen.io/juananruiz/pen/rrKEqw) para que podáis jugar con él.
Facebook Style Drop Down Menu Design Using CSS
Tags: javascript, html, css, opensource
Published: 2018-08-07 15:31:36

---
title: Facebook Style Drop Down Menu Design Using CSS
published: true
description: Facebook Style Drop Down Menu Design Using CSS
tags: #javascript #html #css #opensource 
---

Now a days drop down menus are becoming more and more popular. so today, we are going to discuss how to create Facebook style drop down menu design using CSS. Here we haven't used jQuery script to Hide or display the drop down list, all the things are designed with the help of HTML and CSS only.
When user hover over setting icons, then it will display the drop down menu list.
 
<a href="https://www.skptricks.com/2018/02/facebook-style-drop-down-menu-design-using-css.html" style="background-color: #4CAF50;"> Download Source Code </a> 

<img src="https://3.bp.blogspot.com/-tzXfNI3OOJs/WpTdVVmYaCI/AAAAAAAABV4/w-hwfACTyTA0LBCnPsiQU-EHIFQqahULgCLcBGAs/s400/drop.gif" title="Create a Facebook like drop down menu, Facebook Style Drop Down Menu Design Using CSS" />


<a href="https://www.skptricks.com/2018/02/facebook-style-drop-down-menu-design-using-css.html"> Facebook Style Drop Down Menu Design Using CSS </a>
Lets see the complete example for Drop down menu design using css. Here we have combined the HTML and CSS source code in one HTML file, hope you would not face any difficulties. Apart from this we have provided the proper comments for the drop down menu design, it helps you during the identification of source code.

{% youtube dsDcW7Tu1Qc %}
Moving from GitHub to Bitbucket
Tags: github, bitbucket, python, git
Published: 2018-08-02 19:42:08

---
title: Moving from GitHub to Bitbucket
published: true
description: 
tags: github,bitbucket,python,git
---
## W̶h̶y̶ ̶a̶n̶d̶ how

> **Disclaimer:** This post is not related in any way to [Microsoft’s recent acquisition of GitHub](https://news.microsoft.com/2018/06/04/microsoft-to-acquire-github-for-7-5-billion/) (I don’t really have a very strong opinion about it; although I hope that won’t affect us at all).

![](https://raw.githubusercontent.com/hrules6872/Writings/master/4-from-github-to-bitbucket/art/1.jpeg)

Next month, my [GitHub](https://github.com/hrules6872) annual subscription will end and I don’t want to renew it in order to reduce the high number of online services I currently pay for.<br> **tl;dr: I’ll continue to use GitHub but not for private repositories.**

There are many alternatives out there, but I’ve decided to migrate my private repositories to [Bitbucket](https://bitbucket.org/hrules6872/)¹ (mainly because I’m used to using it at [work](https://lolamarket.com/)²). The biggest obstacle is that they don’t provide any tool to import all the repos at once (we have to do the chore one by one…) so **I’ve created a** [script](https://gist.github.com/hrules6872/af8655427e6ec7741a82516713d99ebf)**³** to fill that gap. **You’re welcome, Bitbucket** `:wink:`

#### Moving checklist

* [Python 2.7](http://lmgtfy.com/?q=install+python+2.7)
* [FromGithubToBitbucket.py](https://gist.github.com/hrules6872/af8655427e6ec7741a82516713d99ebf) script (don’t forget to make it executable using `chmod +x`)
* [GitHub personal acces token](https://github.com/settings/tokens) (scopes needed: *repo*)
* [Bitbucket app password](https://bitbucket.org/account) ➡️ Bitbucket settings ➡️ App passwords (permissions needed: *Repositories write*)
* [Bitbucket OAuth consumer](https://bitbucket.org/account) ➡️ Bitbucket settings ➡️ OAuth ➡️ OAuth consumers (permissions needed: *Repositories write&admin*)

> As you can see, we won’t expose any of our account passwords, so we can delete those temporary credentials afterwards.

#### Moving day

* [Fill in the credentials](https://gist.github.com/hrules6872/af8655427e6ec7741a82516713d99ebf#file-fromgithubtobitbucket-py-L4)
* [Setup what kind of repo do we want to import](https://gist.github.com/hrules6872/af8655427e6ec7741a82516713d99ebf#file-fromgithubtobitbucket-py-L15)
* **Run the script **and follow the instructions
* [Dance](https://giphy.com/explore/victory-dance)!

This article was originally published on [Medium](https://medium.com/@hector6872/moving-from-github-to-bitbucket-30c12dd8aea5)

*****

[1] Even though [some people](https://twitter.com/Syknapse) think it’s the ugliest one `:wink:`<br> [2] Also, I tried [Gitlab](https://gitlab.com/) long time ago and IMO their website was running slow and sluggish. Perhaps they have solved this by now, IDK `:shrug:`<br> [3] It has been tested under Linux/MacOS. What about Windows users? Well, can you tell me why you’re still using Windows? `:trollface:`

*****

[External links 👀](https://gist.github.com/hrules6872/fb65d6ca42c719221dfa8989e6cfef98)
Create color tints/shades
Tags: tints, shades, palette, colors
Published: 2018-08-07 15:07:04

---
title: Create color tints/shades
published: true
description: How create color tints/shades
tags: tints, shades, palette, colors
---
Web tool colorswall allows you to create tints/shades for colors in one click

1. Visit [generate colors tool](https://colorswall.com/palette/generate)
2. Choose primary color for example #5a53cb
![Primary color for tints/shades](https://colorswall.com/images/colorswall_screenshot_1.png)
2. Open "Customize palette" panel
![Customize palette](https://colorswall.com/images/colorswall_screenshot_2.png)
3. Play around with step input value.
4. Press Tints/Shades button to create colors palette.

[Video Tutorial](https://www.youtube.com/watch?v=FDzbieV9mU4)

Results: 

![Blue tints plaette](https://colorswall.com/images/colorswall_screenshot_3.png)

![Blue shades palette](https://colorswall.com/images/colorswall_screenshot_4.png)

Video version
{% youtube FDzbieV9mU4 %}
GitHub & Docker Hub a reasonable marriage
Tags: docker, github, productivity, devops
Published: 2018-08-07 15:01:10

---
title: GitHub & Docker Hub a reasonable marriage
published: true
description: First experience with Docker Hub's automated build functionality
tags: #docker #github #productivity #devops
cover_image: https://raw.githubusercontent.com/rafalpienkowski/resources/master/github-docker-hub-marriage/background.png
---

Some time ago I posted an article about configuring CI/CD with [Wercker](https://wercker.com/). 

{% link https://dev.to/rafalpienkowski/cicd-with-wercker--51k %}

Now I decided to try out a Docker Hub's automated build functionality. I need to say that I'm positively surprised. It's easy and can be useful in some scenarios. 

The option for an "Automated Build" is a bit hidden after "Create" button, but the whole process of creation of a new Docker Hub automated build is easy and can see in the picture below:

![Automated build creation](https://raw.githubusercontent.com/rafalpienkowski/resources/master/github-docker-hub-marriage/creation.gif)

_Notice:_ As you can see there is an option to take a Bitbucket repository too.

The process ends with an automated build instead of a repository. Compared to a repository automated build contains more options:
- Dockerfile
We can see what docker file has been used
- Build Details
We have the history of our builds. We can also look into details of every build. Additionally, we have a link to the GitHub repository with source code.
- Build Settings
We can change the image's tag depending on source code branch, trigger build manually or set up a build trigger depending on a tag in the source code.

![Automated build tabs](https://raw.githubusercontent.com/rafalpienkowski/resources/master/github-docker-hub-marriage/dashboard.png)

By default, the build will be triggered after every commit to the master branch on the GitHub. It takes some time to start a build and publish an image into our repository. The whole setup of an automated build ends with proper Dockerfile creation. Dockerfile can be tested on our local machine before we make a commit into the GitHub repository.

In my opinion, copying README.md file from GitHub and pasting it into Full Description in the Repo info tab is the killer feature. I love it.

### Does it cover all requirements? 

The simple answer is no. Sorry, but in my opinion, the functionality doesn't meet all expectations for a production-ready solution. For instance, we couldn't set up a CI workflow with steps containing build, unit and integration tests and deploy to a repository which is crucial nowadays.

### For whom the functionality is dedicated?

I think that for any Proof of Concept (PoC) project, a side project which can be developed separately or in case we need to prepare some dedicated docker images for our use.

### Last words

That is my subjective opinion. Feel free to disagree with me. I'm also interested in your opinion especially if you took advantage of that functionality. If you have any other ideas for usage of this functionality, give your suggestion in the comments.

Cheers.
The quest for the ultimate mobile app
Tags: coding
Published: 2018-08-07 13:26:51

---
title: The quest for the ultimate mobile app
published: true
description: The quest for better coding that never ends
tags: coding
---

There are a LOT of *mostly* free mobile apps out there, aimed at teaching you how to code (better).

![Random pic for the win](https://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.ssl.cf1.rackcdn.com/unsplash_522cb8dbbe680_1.jpg)

I already went through some of them : 
- [Sololearn](https://www.sololearn.com/) : it is great for beginners, with courses on HTML, CSS, JS and a lot of programming languages. But also on algorithms, regular expressions, data structures, design patterns and such. Add sandboxes and challenges to the mix and you get a great app.
- [Enki](https://enki.en.aptoide.com) : your daily routine to get better at coding (on a many topics). 
- [Codemurai](https://play.google.com/store/apps/details?id=com.zenva.codemurai&hl=en_US) : really great for beginners (JS and such) as soon as you get used to their economic model.
- [Grasshopper](https://grasshopper.com/mobile-app/) : thanks google for teaching us JS from scratch. 

There are probably tons of others but if you could recommend a few free android ones, that would be awesome. Not only for beginners but also to get better at coding (like Enki) and maybe explore new coding topics.
Thanks!