teleren/devto huggingface dataset:
Callback Functions in JavaScript : Beginners
Tags: javascript, programming, productivity, codenewbie
Published: 2020-11-23 06:25:34

In this latest post, we'll understand **Callback function** in JavaScript. 

<h3>Callback function</h3>
=> It is a function that is passed as an argument to another function with the intention of calling it at a later time. 

In javascript, every function is a first-class object, which means that every function is an object and can be used like any other object(String, Number etc).
This allows the use of a function as an argument in another function which is the fundamental idea of a callback function. 

> Note that when passing a callback function as a parameter to another function we are only passing the callback function definition. 
<br>
<h3> Using anonymous functions as callbacks </h3>

```javascript
setTimeout(function() {
       console.log("Logged after 1 second"); 
  }, 1000); 

    // Logged after 1 second
```
An anonymous function is a function without a name. 

<h3>Using named functions as callbacks</h3>

```javascript
const isOdd = (num) => {
   if ( num % 2 !== 0 ) {
       return num; 
      }
}; 
   const nums = [2, 3, 44, 33, 55, 66, 3, 4, 959, 25]; 

   // isOdd as an argument in filter function
const oddNums = nums.filter(isOdd); 

console.log(oddNums); 
  // [ 3, 33, 55, 3, 959, 25 ]
```
`filter()` is an array method which returns a new array including elements that pass a given condition in a callback function. 

> Learn in detail about  [filter() method](https://blog.rahulism.co/filter-method-explained-js) 

### Using named functions as callbacks

Using names functions as callbacks has two advantages over using anonymous functions for callbacks:
- It makes your code easier to read 
- Named functions are multipurpose and can be used on their own or as callbacks. 

### Callback functions can be asynchronous or synchronous 

A synchronous callback function is invoked before functions returns. 

The example earlier, where callback is passed in the **filter ** function is an example of a synchronous callback. 

**An asynchronous or deferred callback is invoked after function returns, or at least on another thread's stack.**

The example earlier, where callback is passed **setTimeout()** function is an example of a asynchronous callback. 

### Why you should use callback functions

- Write more clean and readable code
- Do not repeat yourself
- Have better maintainability
- Understand the use if many javascript libraries that are using callbacks. 
<hr>
Thanks For Reading. Comment if something is going on your mind.
How to remove local branches that have been closed on master
Tags: git
Published: 2020-11-23 06:20:36

In Git Bash/ Git CLI run the commands as follow (from whichever branch you are currently on):
```terminal
git remote prune origin
```
Then:
* checkout master
* update it

and run in Git Bash/ Git CLI:
```
$ git branch --merged | grep -v "\*" | xargs -n 1 git branch -
```
And that's it!

To delete all local branches except master:
```
$ git branch | grep -v "master" | xargs git branch -D
```
Some commands to a further clean up: [Git clean](http://everydayrails.com/2014/02/27/git-reset-clean.html)
[utility script] functionally replace Devtools 'Copy JS path' with 'Copy jQuery path'

Tags: jquery, stringmanipulation, devtools, copypaste
Published: 2020-11-23 06:20:02

When working with jQuery on webpages, I regularly use the Devtools context menu option 'Copy JS path', this produces something like:

`document.querySelector('element1 > element2')`

then I always need to replace `'document.querySelector'` with a `'$'` for jQuery to work... so tedious!

I wrote a small Autohotkey utility script which detects `'document.querySelector'` when in the clipboard and automatically replaces it with a `'$'` - it's very simple and effective.

install Authotkey, save as 'clippie.ahk' (for example):

`#Persistent`
`OnClipboardChange("ClipChanged")`
`return`

`ClipChanged(Type) {`
    `StringReplace, clipboard, clipboard, document.querySelector,` `$, All`
`}`

(minor note: if you ever need to copy/paste '*`document.querySelector`*', just copy/paste '*`document.querySelecto`*' and then manually add '*`r`*' at the end)

Or, if you're brave, I compiled the script into an .exe you can download:
[clippie - Copy jQuery path](http://www.mediafire.com/file/c4ncvvhrurvzwig/clippie.exe/file)
A short note on TypeScript Mixins
Tags: typescript, javascript
Published: 2020-11-23 06:00:10

---
layout: post
title: "A short note on TypeScript Mixins"
date: 2020-11-23 06:00:10 UTC
tags: typescript, javascript
canonical_url: https://climbingdev.com/posts/ts-mixins
cover_image: https://climbingdev.com/assets/images/2020-11-23-ts-mixins.png
published: true
---
Hi there, so what are the TS Mixins?

In short, mixins are another way to extend your objects with common behaviours. 

Let's assume that in a calendar app you can display list of users and list of meetings.
Regardless of the list type you can select an element of the list.

Let's look at the code to see how we could model this problem with mixins.
```typescript
// We need a base type that can be extnended by any other type 
type Constructor<T = {}> = new (...args: any[]) => T;

// Here we create our mixin function. It can take any base type
// and extend it with one private propery and 3 methods.
function mixinSelectable<TBase extends Constructor>(Base: TBase) {
  return class extends Base {
    private _selected = false;

    select() {
      this._selected = true;
    }

    unselect() {
      this._selected = false;
    }

    get selected(): boolean {
      return this._selected;
    }
  };
}

class User {
  constructor(public firstName: string, public lastName: string) {}
}

class Meeting {
  constructor(public subject: string) {}
}

// This is how we create a new extended types 
const SelectableUser = mixinSelectable(User);
const SelectableMeeting = mixinSelectable(Meeting);

// Usage of new classes
const user = new SelectableUser('John', 'Locke');
user.select();
user.unselect();
user.selected;

const meeting = new SelectableMeeting('Learn Mixins');
meeting.select();
meeting.unselect();
meeting.selected;
```

Mixins seem like a nice addition to OO features of TypeScript. They can help with managing a utility logic and nicely separate it from the business logic in our apps. 

Hope you've learned something new today!<br/>
Happy coding! 😀
Erro ao acessar pasta compartilhada no VirtualBox
Tags: linux, virtualbox, ubuntu, braziliandevs
Published: 2021-01-11 17:48:23

---
title: Erro ao acessar pasta compartilhada no VirtualBox
published: true
date: 2020-11-23 06:00:00 UTC
tags: Linux,VirtualBox,Ubuntu,braziliandevs
canonical_url: https://franciscochaves.com.br/blog/erro-ao-acessar-pasta-compartilhada-no-virtualbox
---

![Logo](https://franciscochaves.com.br/assets/img/blog/2020/nov/logo-problema-pasta-compartilhada.png)

Olá pessoal, hoje após instalar os adicionais de convidados para o VirtualBox, tentei acessar a pasta compartilhada que tinha configurado e foi apresentado um problema, e descobrir que o VirtualBox quando a VM (máquina virtual) utiliza Linux ou Oracle Solaris, precisa realizar alguns procedimentos. Neste Tutorial mostrarei como resolver o problema de acesso à pasta compartilhada utilizando uma VM com o sistema operacional Xubuntu 18.04.

As configurações utilizada na pasta compartilhada:

![Configurações da pasta compartilhada](https://franciscochaves.com.br/assets/img/blog/2020/nov/configurando-pasta-compartilhada.png)

Acesse a VM e observe um dispositivo com o prefixo **sf\_** seguido do nome atribuído à pasta compartilhada.

![Pasta compartilhada montada no sistema](https://franciscochaves.com.br/assets/img/blog/2020/nov/dispositivo-compartilhado-sf.png)

Clique no dispositivo e observe a mensagem de erro **Error opening directory ‘/media/sf\_Shared’: Permissão negada.** :

![Pasta compartilhada acesso não permitido](https://franciscochaves.com.br/assets/img/blog/2020/nov/dispositivo-compartilhado-sf-nao-permitido-acesso.png)

Para resolver o problema de acesso a pasta, precisamos utilizar o usuário **root** ou ser membro do grupo `vboxsf`. Então vamos adicionar o usuário ao grupo `vboxsf`, abra o terminal com as teclas `CTRL + ALT + T` e execute o comando a seguir:

```bash
sudo adduser $USER vboxsf
```

Reinicie a VM e acesse a pasta novamente.

![Pasta compartilhada acesso permitido](https://franciscochaves.com.br/assets/img/blog/2020/nov/dispositivo-compartilhado-sf-acesso-ok.png)

Tudo Ok, valeu pessoal 😃✌.

## Referências

Error opening directory “/media/” Permission denied… virtualbox. **ASK UBUNTU**. Disponível em: https://askubuntu.com/questions/1231997/error-opening-directory-media-permission-denied-virtualbox. Acesso em: 23 nov. 2020.

Shared Folders. **ORACLE**. Disponível em: https://docs.oracle.com/en/virtualization/virtualbox/6.0/user/sharedfolders.html. Acesso em: 23 nov. 2020.
Ask me anything: Daytime CPO, Best-time Maker
Tags: ama
Published: 2020-11-23 05:46:08

---
title: Ask me anything: Daytime CPO, Best-time Maker
published: true
description: Ask me anything
tags: ama
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/kwu75o75lj517mzmv89x.jpg
---

I worked in different Roles since I started to work professionally with Software Development (without any degree) over 25 years ago. From "Web-Master" to CTO/CEO, as an owner, employee, and freelancer, from Switzerland, Brazil, Serbia... 

Well, AMA, if you believe me, that today I don't work with Cobol and Pascal ;-)

Cheers
Stefan
[Full-Stack Dev & Maker](https://www.altafino.com)
OSD600 - Release0.3 Telescope CSS
Published: 2020-11-23 05:45:04

In Open Source Development course we were assigned [Release 0.3](https://github.com/Seneca-CDOT/topics-in-open-source-2020/wiki/release-0.3) where we get to contribute to [Seneca-CDOT/telescope](https://github.com/Seneca-CDOT/telescope). Telescope is an open source web server and client application for displaying a timeline of Seneca's Student blogs about open source. This project seemed so large.  I was as nervous as the first time I had to sing a solo on stage knowing the local Toronto news station would be filming it! I needed to find my first issue.  So I crossed my fingers and hoped to find something.

The task proved to me to be more difficult then I anticipated.  A huge reminder of how green I am! After reading through what felt like 50 issues, I requested some guidance and I was assigned my first [Issue-1344](https://github.com/Seneca-CDOT/telescope/issues/1344) on telescope. I took some time to acquaint myself with telescope. I know the best way to become more comfortable is to do things multiple times.  So I kept going back to it and running it.  I started playing with the CSS part.  I had almost no experience in CSS, so I also took quite a bit of time reading up on [W3 Schools](https://www.w3schools.com/css/css_grid.asp) and [styled-jsx](https://www.npmjs.com/package/styled-jsx).  Thankfully I love reading!

Both anxious and excited, I dove in.  Changing some numbers, just to what happens.  I needed to figure out where to add a margin and found myself getting a little flustered.  Eventually I figured out where to add the code and started my [PR](https://github.com/Seneca-CDOT/telescope/pull/1367).  

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

Not sure if it would be accepted, I nervously waited.  I had to be reminded about how to contribute properly giving details of what I did and what Issue I fixed.  Of course I learned that before but I was so focused on the project's PR, I'd forgotten.  Once everything was up to standard my PR was [merged](https://github.com/strawberries73/telescope/commit/5412163f). Whew! Next!

Thankful for the experience but wow, what an eye opener of how I need to do more reading.  I want to be better at CSS.  I know from personal experience that the only way to get better at something is to get more practice!
Learn AWS with me :: Episode 1 : Introduction
Tags: aws, learning, skills
Published: 2020-11-23 05:27:14

---
title: Learn AWS with me :: Episode 1 : Introduction
published: true
description: Introducing my initiative for learning AWS in public
tags: AWS, Learning, Skills
//cover_image: https://direct_url_to_image.jpg
---
I've recently became aware of a movement which aims to replace violent/inappropriate sayings with alternatives that serve the same purpose, but without the negative associations. Here's a great one I came across yesterday: **Feeding 2 birds with one scone**. This precisely describes what I'm trying to do on most days: In a word, I'm always looking for a twofer

And I found the perfect one today. Here the two goals I am currently pursuing:

* I would love to build my own AWS skills, possibly even work through their entire certification hierarchy, And
* I have a new business venture (DevSkillDojo.com) which requires careful curation of learning resources for technical skills

Instead of treating them as two independent goals, I realized, that if I "Learn in Public", then I'd be able to achieve both goals by expending a single amount of effort.

I can truly have my cake AND eat it.

Woohoo.

So I will be using the coming weeks (or months) to systematically explore the AWS ecosystem, one topic at a time. 

* Each topic will last exactly 1 week
* During the week I will research the topic/service, publishing any lessons learnt on Twitter
* I'll curate the best learning resources for that topic and share them on Twitter
* I'll document the important learning concepts and prerequisite skills in the DevSkillDojo.com KnowledgeBase
* At the end of the week, I'll write a summary article on the topic, linking to the various resources collected during the week.

The order of topics to be addressed will probably be a bit fluid, but I suspect we'll start of with:

- CloudFront
- S3
- IAM 
- EC2
- SQS
- etc.

If you want to join along, follow @DevSkillDojo on Twitter. Of course, the weekly articles will be here on Dev
"Failed to install the following Android SDK packages..." When Building Android App on Android Studio
Tags: android
Published: 2020-11-23 05:25:39

```
Failed to install the following Android SDK packages as some licences have not been accepted.
     platforms;android-26 Android SDK Platform 26
     build-tools;28.0.3 Android SDK Build-Tools 28.0.3
  To build this project, accept the SDK license agreements and install the missing components using the Android Studio SDK Manager.
```

### If it prompts like this above, try:

```bash
# macOS:
export JAVA_HOME=/Applications/Android\ Studio.app/Contents/jre/jdk/Contents/Home
yes | ~/Library/Android/sdk/tools/bin/sdkmanager --licenses
```

For GNU/Linux Distributions, Windows, refer to [Felix Too's answer on Stack overflow](https://stackoverflow.com/a/55641042)
Using the amazon s3 object storage api for local storage on ceph
Tags: linux, java, devops
Published: 2020-11-23 05:17:26

---
title: Using the amazon s3 object storage api for local storage on ceph
published: true
description: We look into how to use the amazon s3 object storage API. After that, we changed it over to use our Ceph cluster and store objects in that storage engine. The s3 API is straightforward to use, and many storage engines support it out of the box.
tags: linux, java, devops
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/7sx01bsj9uwxtdrfyy8e.jpg
---

{% youtube XtfjYp8ikaU %}

We look into how to use the amazon s3 object storage API. After that, we changed it over to use our Ceph cluster and store objects in that storage engine. The s3 API is straightforward to use, and many storage engines support it out of the box.
How to factorize layer code in Android development
Tags: android, codequality, todayilearned, xml
Published: 2020-11-30 07:22:51

---
title: How to factorize layer code in Android development
published: true
date: 2020-11-23 05:00:00 UTC
tags: Android,Quality,TodayIlearned,xml
canonical_url: https://10xlearner.com/2020/11/23/how-to-factorize-layer-code-in-android-development/
---

Hello ! I’m Xavier Jouvenot and in this small post, we are going to see how to factorize layer code in Android development.

_Self promotion_: You can find other articles on my [website](www.10xlearner.com) 😉

## Problematic

When developing an application, you may have some Activities, looking a lot alike, and this can, and will lead to a lot of duplicated layout description, or at least with layouts that are very similar from one Activity to the other.

Wouldn’t be great if we had a way to factorize such layout to make it easily reusable, like we factorize code into functions ?

Well, this blog post would not be here if there was none, so let’s take a look at the solution 😉

## Solution

In Android layout, there is a handy tag named [include](https://developer.android.com/training/improving-layouts/reusing-layouts), which does exactly what we want to. It allows us to create a "generic" layout and to reuse it in another layout like that:

```
<LinearLayout>

  <include layout="@layout/layout_name"/>

</LinearLayout>
```

In this simple example, we are including the layout named `layout_name` inside another layout. Every modification in the file describing `layout_name` will modify the elements everywhere it’s included, like in the `LinearLayout` of our example. That way, we can code our layout once and reuse it everywhere 🙂

* * *

Thank you all for reading this article, And until my next article, have a splendid day 😉

## Interesting links

- [Include tag documentation](https://developer.android.com/training/improving-layouts/reusing-layouts)
Iterating to create dynamic web elements.
Published: 2020-11-22 23:06:31

I have a confession to make: I hate writing these blog posts. It's not as though I'm going to have some greate contribution to make to the understanding of software development at this point. I've been doing it all of two months, and although I think I'm doing well, I'm certainly no expert. Nothing I do here is going to be truly novel or innovative; clever, maybe, at best.

So anyway, let me walk you through some of the hopefully clever workflows I developed in this project.

By using the attributes of ruby objects that mimic database rows and iterating over collections of those objects, we can dynamically create elements on our webpage that contain the data of our database in visually pleasing ways. If we want to display all books, for example this:

![an ERB file that iterates over books and generates <a> tags with information displayed in card-format](https://dev-to-uploads.s3.amazonaws.com/i/px40gpxxja81s9tap86n.png)
(please forgive the improper class name formatting)
and this:

![css rules to style the a tags as flex-elements](https://dev-to-uploads.s3.amazonaws.com/i/pj6bymj9v3urg3o9xo8d.png)

becomes this:

![a bunch of flex clickable flex objects that contain information about a book](https://dev-to-uploads.s3.amazonaws.com/i/trnpxy9m7p6upsj8masp.png)

The thing I'm most proud of achieving in this view is probably that each of those book card elements is actually an a-tag that's modified to be a flex-box object, meaning I have modern feeling "clicky-divs" without using any javascript, and because each of these cards is generated from database data, what cards you'll get is determined by what books are represented on the database. If a user adds a book, it just shows up, and if a user removes a book, it just won't be there next time you load the page.

It's not an earth-shattering idea, I'm sure someone else has done this before. But hey, I think it's clever, and there's a lot of places on this app that I got to create a solution to a problem like "how should I display all the books?" and when I had the solution working and styled I thought to myself "hey, that looks good, and the way it happens is pretty clever".

I guess what I'm saying is that when talking about the adventure of learning to code, maybe the real treasure is all the "heh, I'm clever" moments we had along the way.
CSS :placeholder-shown class
Tags: css
Published: 2020-11-23 04:40:12

Hey everyone, let's talk about placeholders. The wonderful addition to form elements.

Today we won't be talking about them as accessibility issues and hazards, but just on how to style the inputs that have them.

In CSS we can style the actual placeholder text by using the `::placeholder` pseudo-element.

But did you know there is also a pseudo-class called `:placeholder-shown`? This will select the actual input field and style that, therefore we can all of a sudden add borders and stuff!

Our end result will be an input field that is styled based on the fact that the placeholder is shown. Once we type this styling should be removed.

![CSS placeholder-shown](https://cdn.hashnode.com/res/hashnode/image/upload/v1605677501390/gfG0zuBTl.gif)

## HTML Structure

Let's first start by creating a basic HTML to render two input fields in, once will have a placeholder and one will have a value.

```html
<div class="container">
   <input type="text" value="I have a value" />
  <input type="text" placeholder="I have a placeholder" />
</div>
```

## CSS :placeholder-shown class

Oke let's first add some basic styling to our page:

```css
body {
  min-height: 100vh;
  background: #efe9e7;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container {
  background: #dae0f2;
  padding: 2rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.container input {
  font-size: 1.5rem;
  padding: 0.5rem;
  margin: 0.5rem 0;
  border-radius: 0.5rem;
}
```

By running this, we will get a basic form that will look like the image below.

![CSS Basic form](https://cdn.hashnode.com/res/hashnode/image/upload/v1605677040414/DvgCDvkYx.png)

Now how can we make the one where the placeholder is active render differently?

```css
.container input:placeholder-shown {
  border: 5px dashed teal;
}
```

Now we should see a dashed teal border, and once we put a value in it, that border should disappear!

## ::placeholder vs :placeholder-shown difference

To recap we can use a ::placeholder pseudo-element to change the actual placeholder text styling:

```css
input::placeholder {
	color: teal;
}
```

And we can use the :placeholder-shown pseudo-class to style the actual input styling.

```css
input:placeholder-shown {
	border: 5px dashed teal;
}
```

You can find a full demo to play with on this Codepen.

{% codepen https://codepen.io/rebelchris/pen/LYZvzaG %}

## Browser Support

The main browser support this fully, of course, IE has to be a pain in the ass, I would suggest using this as a nice addition, but don't fully rely on it.

![CSS :placeholder-shown support](https://caniuse.bitsofco.de/image/css-placeholder-shown.png)

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)