teleren/devto huggingface dataset:
Sorting an Array in JavaScript
Tags: javascript
Published: 2020-04-26 20:54:13

In JavaScript it is possible to sort the items of an array with the sort() method.

What the sort() method does is that sorts the values as <b>strings</b>. The sort can be either alphabetic or numeric and ascending or descending.



```javascript
var animals = ["Horse", "Rabbit", "Dog", "Cat"];

animals.sort();

//["Cat", "Dog", "Horse", "Rabbit"]
```

⚠️ Keep in mind that this method changes the original array.

When sorting numbers, the method will have a different behavior, because if numbers are sorted as strings, "35" is bigger than "100", because "3" is bigger than "1".

In order to fix this, we can provide a compare function.

<h2>Syntax</h2>
<h4><i>array.sort(compareFunction)</i></h4>
<p>According to MDN, The compare function specifies a function that defines the sort order. If omitted, the array elements are converted to strings, then sorted according to each character's Unicode code point value.</p>
This function can also provide an alternative sort order. The function should return a negative, zero, or positive value, depending on the arguments.

```javascript
function compare(a, b) {
  if (a is less than b by some ordering criterion) {
    return -1;
  }
  if (a is greater than b by the ordering criterion) {
    return 1;
  }
  // a must be equal to b
  return 0;
}
```

<p>To compare numbers instead of strings, the compare function can simply subtract b from a.</p>

```javascript
function compareNumbers(a, b) {
  return a - b;
}
```

<h3>Sort numbers in an array in ascending order:</h3>

```javascript
var numbers = [100, 54, 12, 42, 30, 23, 1];

numbers.sort(function(a, b){return a-b});

//  [1, 12, 23, 30, 42, 54, 100]
```
<h3>Sort numbers in an array in descending order:</h3>
```javascript
var numbers = [100, 54, 12, 42, 30, 23, 1];

numbers.sort(function(a, b){return b-a});

//  [100, 54, 42, 30, 23, 12, 1]
```
Note that now we are subtracting b-a instead of a-b.

<h3>And what about, sorting strings in an array in descending order?</h3>
<p>We can do that by applying the reverse() method after the sort() method</p>

```javascript
var animals = ["Horse", "Rabbit", "Dog", "Cat"];

animals.sort();
animals.reverse();

// ["Rabbit", "Horse", "Dog", "Cat"]
```
<p>or we can do it by changing the logic of the compare function and pass it to the sort( ) method</p>

```javascript
var animals = ["Horse", "Rabbit", "Dog", "Cat"];

animals.sort(function (a, b) {
    if (a > b) {
        return -1;
    }
    if (b > a) {
        return 1;
    }
    return 0;
});

// ["Rabbit", "Horse", "Dog", "Cat"]
```

<p>To more cases, check the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort">MDN documentation</a></p>

Banner photo: <a href="https://unsplash.com/@traxing">Soraya Irving
</a>
Design Tactics for Devs(On-going Series)
Tags: design, tips, techniques, ideas
Published: 2020-04-26 20:40:30

###This is an on-going series of simple tips and tricks for developers who want their work to look beautiful and professional.

In the first part, I’ll start with the very basic technique that you can apply to your UIs to make them look clean and modern.

##The design Mindset
Everyone can be a designer. Design is to solve a problem and developers, architects, and engineers are problem solvers. Everyone can design, they just need a design mindset.
When developers wear a designer’s hat, they need to think of the users and their experiences. It’s all about finding intuitive ways of solving the problem at hand. Forget about the performance, architecture & frameworks just for a while and think about the users who will be interacting with what you are developing.
In this series, I will be focusing more on visuals and aesthetics that play an important role in bringing clarity to a product.
Let’s get started.

##Part 1 — Background and Foreground
The easiest and fastest way to clean up a UI is to adjust the background and foreground colors.
Foreground: use lighter colors
Background: User darker colors
Some colors that look good for Background:
`F4F8F9
EDF2F6
DDEEFC`
Foreground color to use with above:
`FFFFFF`

>On a grey background, use a white foreground card or container for a clean and minimal effect. Use border radius of 4–6px and slight box-shadow or light grey border for an enhanced effect

**Here is an example**
![Example](https://dev-to-uploads.s3.amazonaws.com/i/n2bfa2bba2ejmmhw20hw.png)

![background and foreground changed](https://dev-to-uploads.s3.amazonaws.com/i/3vrelta9zdx3h6dqnvv3.png)

**Let’s try this on medium.**

Body:
```
background: #F4F8F9;
```
Content:
```
background: #FFF;
box-shadow: 0 0 13px 0 rgba(82,63,105,.05);
border-radius: 6px;
```
![Implemented on Medium](https://dev-to-uploads.s3.amazonaws.com/i/cpw4sigvb4n9zu73ll02.png)

This is a part of minimal styling where we achieve the following:
- Adding white content area on a slightly darker background gives a clean and minimal look
- Increase the readability of the content

**Part 2: Buttons**
Overriding Reach UI Styles using TailwindCSS in Parcel
Tags: css, tailwindcss, react, a11y
Published: 2020-04-26 20:34:34

---
title: Overriding Reach UI Styles using TailwindCSS in Parcel
published: true
description: A quick tutorial to override the styles of Reach UI elements using TailwindCSS and PostCSS @apply rule.
tags: css, tailwindcss, react, a11y
---

In my React app I'm using:
- [tailwindcss](https://tailwindcss.com/)
- [Reach UI](https://reacttraining.com/reach-ui/)
- [Parcel](https://parceljs.org/)

In order to use tailwindcss with Parcel I'm using PostCSS. Configuration requires 3 steps:
1. Create `tailwind.config.js` and `postcss.config.js` files
	```js
	// postcss.config.js
	module.exports = {
		plugins: [
			require('tailwindcss')('./tailwind.config.js')
		]
	}

	// tailwind.config.js
	// This is only necessary if you want to modify tailwindcss
	module.exports = {}
	```
2. Create an `app.pcss` file
	```css
	@tailwind base;
	@tailwind components;
	@tailwind utilities;
	```
3. Link the PostCSS file to the `index.html` file
	```html
	<head>
		<link rel="stylesheet" href="app.pcss">
	</head>
	```

In the app itself I'm using the Reach UI Tooltip element:
```jsx
// import the component and its default styles
import Tooltip from '@reach/tooltip'
import "@reach/tooltip/styles.css"

return (
	<Tooltip
		label='Edit'
	>
		<button className='py-1 px-3 rounded bg-transparent border border-blue-500'>
			<span aria-hidden>✏️</span>
		</button>
	</Tooltip>
)
```

By default the tooltip looks like this:
![Default Edit Tooltip](https://dev-to-uploads.s3.amazonaws.com/i/seyq0xcvtov1czk99w58.png)

To override the default styles of the tooltip element, I add a new block to the `app.pcss` file targetting the `[data-reach-tooltip]` selector and using the `!important` rule at the end of the `@apply` line.
```css
[data-reach-tooltip] {
	@apply bg-gray-800 text-white py-2 px-4 border-none !important;
}
```

Now the tooltip looks like this:
![Newly styled Edit Tooltip](https://dev-to-uploads.s3.amazonaws.com/i/v36xg7zbv9x8ewton2px.png)

And thats it! Thank you for reading. I'll do my best to answer any questions you may have.
Why did I decide to study Software Engineering?
Published: 2020-04-26 17:36:27

“What is programming?” I can still hear the question clearly in my mind. On the first day of my Intro to Programming in C++ class our professor asked this question. In spite of reading everything I could about programming, I was 22 and had only interacted with computers a handful of times in my life, so answering that question seemed impossible.

Leading up to this class, I decided to take on computer science for my undergraduate degree because I was looking for a challenge. I grew up in Nairobi, Kenya, where technologies like computers were a privilege, one that I was not exposed to until I was an adult. I was not intrigued by computers because I did not grow up seeing one. So, when I finally came in to contact with one, which was inevitable, I was crippled with anxiety since I was not tech savvy at all. 

I knew choosing computer science would be an uphill battle, but I also knew that it was a fight worth having. All through my undergraduate studies I struggled with impostor syndrome and it greatly affected my outlook while learning the concepts and fundamentals of computer science. As a result, despite completing my degree, I  managed to convince myself programming was not for me and this unfortunately impacted the depths of my understanding of the  basic concepts, as well as prevented me from building a complete and strong foundation in this work. Until very recently I felt like a noob in the world of computer science and programming in general. I had this nagging feeling of regret that never ever left my mind. Why didn't I capitalize on the opportunity and build a strong foundation in programming skills?

That's why in this year of 2020, I decided to face this question head on. I started reteaching myself the foundations and concepts of programming that I was taught 8 years ago by learning python programming language and it felt incredible. I decided that  I wanted to become a full-time software engineer. Which has led me to Flatiron School. 

Today, more mature and patient, I won’t let impostor syndrome or my fear of failure stop me. The curriculum at Flatiron is exciting and exactly the next step I need to take to pursue my dreams. Combine that with the supportive community of like-minded individuals and I believe I am on the way to becoming a creator of positive tech and not just a consumer!
About Ruby Hash#dig
Tags: ruby, hash, documentation
Published: 2020-04-26 20:08:53

---
title: About Ruby Hash#dig
published: true
description: 
tags: ruby, hash, documentation
---

Get more information and more examples at my AboutRuby project:
* [AboutRuby project](https://github.com/BurdetteLamar/AboutRuby/blob/master/core/Hash/api/markdown.md#dig)

Here's the write-up over at the Ruby project:
* [Ruby project](https://ruby-doc.org/core-2.7.0/Hash.html#method-i-dig)
Dev.to/Twilio Hackathon: Rocket Launch bot (RELEASE!)
Tags: twiliohackathon, java, bot
Published: 2020-04-26 19:45:10

---
title: Dev.to/Twilio Hackathon: Rocket Launch bot (RELEASE!) 
published: true
description: My submission to the Twilio x DEV Hackathon!
tags: #twiliohackathon #java #bot
---

Special thanks to Dev.to and Twilio for my first hackathon! This was a fun experience and a great excuse to be productive in these trying times!
I'm looking forward for more!

## What I built
I built a rocket launch bot that you can contact via SMS! The scope of the project was to find an implementation for the Java wrapper I built a while ago.

With Twilio's Autopilot this was not super difficult to implement!
So much for my first entry onto a Dev.to hackathon (apart from Hacktoberfest).

#### Category Submission: 
Well, my project would fall into the *Interesting Integrations* category.
This project was an excuse to implement my wrapper onto something!

## Demo Link
Messaging **+1 863 869 3995** should trigger the collect task to demo the project, unless my credits run out this should work!

## Link to Code
- [Project](https://github.com/NahuLD/launch-twilio-bot)

## How I built it (what's the stack? did I run into issues or discover something new along the way?)
I used Twilio's Java SDK. SparkJava for the web-hooks and my Java wrapper for LaunchLibrary.net (thanks a lot!).

At the beginning I was thinking about directly parsing the data myself by triggering the web-hook as soon as a message was received (using a Messaging Service that would directly link to my endpoint). But after looking into Twilio's resources I found Autopilot, a great feature that uses a sort of ChatBot to parse the messages and detect intent!

This made my project 10 times easier! Big thanks to Twilio!

## Additional Resources/Info 
- [Launch Library Wrapper](https://github.com/NahuLD/java-launch-library)
- [Twilio's Autopilot](https://www.twilio.com/autopilot)
Docker + Flask + Vue + Nginx + MongoDB- deployment and development in one package (3) 
Tags: docker, mongodb, flask
Published: 2020-04-26 19:40:36

# Chapter 7: Initialize MongoDB

* Now that we have a running backend and frontend, the next step is to get the database running so we can handle data better.

* In our `docker-compose.yml` add following:
```
    mongodb:
        image: mongo:4.2.5-bionic
        container_name:  mongodb
        restart: always
        environment:
            - MONGO_INITDB_ROOT_USERNAME=root
            - MONGO_INITDB_ROOT_PASSWORD=example
        volumes:
            - './database:/data/db'
        ports:
            - "27017:27017"
            - "27018:27018"
            - "27019:27019"
        expose:
            - 27017
            - 27018
            - 27019

    mongo-express:
        image: mongo-express
        restart: always
        environment:
            # mongodb authentication
            - ME_CONFIG_MONGODB_ADMINUSERNAME=root
            - ME_CONFIG_MONGODB_ADMINPASSWORD=example
            # mongodb URI
            - ME_CONFIG_MONGODB_SERVER=mongodb
            - ME_CONFIG_MONGODB_PORT=27017
            # web login username and password
            - ME_CONFIG_BASICAUTH_USERNAME=mongo
            - ME_CONFIG_BASICAUTH_PASSWORD=express
        ports:
            - 8081:8081
```

* This setup allows us to have mongodb and a nice web UI mongo-express running. For additional security, we have set password for our db, and we have also set a web login `BASICAUTH` for our mongo-express service. 

* Spin this up with `docker-compose up --build` 

* In the browser, we can access to our database with `localhost:8081` via mongo-express.
Final Update ⚠️: WhatsApp Covid-19 auto-response helper bot 
Tags: twiliohackathon
Published: 2020-04-26 19:36:48

[Comment]: # (All of this is placeholder text. Use this format or any other format of your choosing to best describe your project.)

[Reminder]: # (Make sure you've submitted the Twilio CodeExchange agreement: https://ahoy.twilio.com/code-exchange-community)

[Important]: # (By making a submission, you agree to the competition's terms: https://www.twilio.com/legal/twilio-dev-hackathon-terms)


## What I built

This project is finally complete. I have successfully managed to build a WhatsApp auto response bot that gives updates on covid-19, provides news articles and also answers questions like what the symptoms are, how to prevent the disease and some helpful contacts to get help on times of need. 

The project runs in the WhatsApp messenger app using the twilio WhatsApp api.
The project runs on the laravel php framework and deployed on Heroku.

I am very grateful to the twilio team for the great job of making this hackathon happen, I have enjoyed it and am proud of my work. I have learned a tonne of things and got to appreciate how wonderful twilio apis are. Hoping to continue using it even after the hackathon☺️


Here are some of the screenshots of responses.

![WhatSapp screenshot](https://dev-to-uploads.s3.amazonaws.com/i/e7ugfte6a5n9e1v22tg7.png)

![WhatSapp screenshot](https://dev-to-uploads.s3.amazonaws.com/i/5fmsumjzz46azd3tsjfl.png)

![WhatSapp screenshot](https://dev-to-uploads.s3.amazonaws.com/i/rs9qdcfxrsk01ciuooz0.png)

![WhatSapp screenshot](https://dev-to-uploads.s3.amazonaws.com/i/f8ynxzvuu7is7t042r16.png)

![WhatSapp screenshot](https://dev-to-uploads.s3.amazonaws.com/i/xp1ottwjpq7jp1e2swwo.png)

#### Category Submission: 
The project is categorized in Covid-19 applications as it gives aid in line with the pandemic.

## Demo Link
 
You’ll require to have WhatsApp messenger app installed the click this [link]( https://wa.me/14155238886/?text=join%20chicken%2Dmix) and send the pre-filled message to join my sand box.
Send a hi to get a helper menu.

## Link to Code

This is the link to the github repo, all contributions are welcome.
https://github.com/SaidiAli/covid-19-autoresponse-whatsapp-bot

## How I built it (what's the stack? did I run into issues or discover something new along the way?)

The project was built on laravel framework and plain html and css for the frontend. The whole project was majorly centralized on the twilio WhatsApp api as it’s the only way I could use the WhatsApp api without a verified business account.

One major issue I faced was how to get new users who joined my sandbox, there is no way am notified about it so I constantly keep checking if anyone joined and add them to the application so they get updates as well.

## Additional Resources/Info

For coronavirus data - https://corona.lmao.ninja/docs/#/Default
News api - https://newsapi.org/
Saving all your multimedia data from social media
Tags: php, python
Published: 2020-04-26 19:19:46

Every social media supports adding photos in our profile or company's page. Everyone has uploaded tons of images on these platforms since their introduction. Facebook is the company them which allows us to take a backup of all photos and data that we had uploaded throughout our social media journey.

If you are looking to take a backup of your images from social media platforms, then let you I tell, you have got no option for doing. 

Taking backup of everything that you have got on social media is very important. As all that stuff is about your life long memories. This tool will download all the data that you had uploaded all over your time on social media. It is an advice to everyone to store your backups on a cloud server rather than local storage of computer or mobile.

Many online tools can be used for this purpose. One of the best tools that we recommend is [Downloadgram](https://downloadgram.cc). This is used remotely on any desktop around the world. You just need a Gmail or twitter account to signup. As they only accept these social accounts to avoid the spam into the system. Now insert the username of your profile and save all your photos on the computer.
Argh! Ubuntu VS Code Keyboard Shortcut Ctrl+Shift+E
Tags: vscode, ubuntu, keyboardshortcutslinux
Published: 2020-04-26 19:16:08

---
title: Argh! Ubuntu VS Code Keyboard Shortcut Ctrl+Shift+E
published: true
description: "Ctrl+Shift+E Show Explorer / Toggle focus" not working Ubuntu 
tags: vscode,ubuntu,keyboard-shortcuts-linux
---
Set env variable GTK_IM_MODULE=xim

## Launch from Desktop file
  add it to Code's .desktop
  e.g. for vscode installed via snap; add it to EXEC sections (two places): /var/lib/snapd/desktop/applications/code_code.desktop 

## Launch from shell
  add alias to your .bashrc / .zshrc
<pre>alias code="GTK_IM_MODULE=xim code"</pre>

Ref.
https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf
https://github.com/microsoft/vscode/issues/48480#issuecomment-413793736
Front-end Weekly News Week - 18
Tags: Ubuntu, Android, React, Angular
Published: 2020-04-26 19:05:04

1. Ubuntu 20.10 codenamed Groovy Gorilla, the final version is expected to be released on October 22
2. Android is exposed to new bugs, causing many devices to become unresponsive
3. Ant-design 4.1.5 released
4. React Suite 4.4.0 released
5. Angular 10.0.0-next.2 released
6. Next dark mode 2.2.1 released
7. Pico 1.0.1 released

https://annacoding.com/news/2p6ZgvOSvEzDODSIIRLiAF/Front-end-Weekly-News-Week-18?time=2020-04-26
Front-end Reading in Depth Week - 18
Tags: Angular9, Firebase, TypeScript
Published: 2020-04-26 19:02:29


1. How to implement drag and drop with Angular 9
2. Getting started with react-redux-firebase
3. Publishing Node modules with TypeScript and ES modules

https://annacoding.com/news/6vLsyx0SaYVVoKqtMjYDjf/Front-end-Reading-in-Depth-Week-18?time=2020-04-26
Implement Hover in Vue
Tags: vue
Published: 2020-04-26 18:52:06

---
title: Implement Hover in Vue
published: true
description: Know how to show text in vue js
tags: vuejs, vue 
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/37xdvbgvf32uufad6dvf.png
---

We used to implement showing something on hover using JQuery or pure CSS but if you are starting using Vue Js and you wanna do the same you will face the problem, there no  functionality built in or pre-defined so we will try to make this simple implementation for that.

Let us first make a reminder of this functionality in JQuery and css.

Here is a Jquery example using mouseenter() and mouseleave():
{% jsfiddle https://jsfiddle.net/Mohcinbn/sdy5gz21/ %}

Here is a Jquery example using pure css:
{% jsfiddle https://jsfiddle.net/Mohcinbn/abnqm895/ %}

After this simple reminder about this common functionalities I will do the same using Vue Js.
Ok!, to do that in vue we will use [Vue events](https://vuejs.org/v2/guide/events.html) to listen to DOM events when the mouse enters and leaves, and update our state based on that.
We will use v-on directive to listen to the mouse moves. we can just write @event to define v-on:event.

```html
<div id="app">
  
  <p>
    Hover on me to show text
  </p>
   <p>
   This the text who shown after hover
  </p>
  
</div>
```
```javascript
new Vue({
  el: '#app',
  data: {
    toShowOnHover: false,
  }
)}
```
Now any element with property "toShowOnHover" will be shown on hover after we setup the methods

We will use v-show to show the element who have the vue property on hover.
So our code will transform to something bellow:


```html
<div id="app">
  
  <p @mouseover="mouseEnter" @mouseleave="mouseLeave">
    Hover on me to show text
  </p>
   <p v-show="toShowOnHover">
   This the text who shown after hover
  </p>
  
</div>
```
```javascript
new Vue({
  el: '#app',
  data: {
    toShowOnHover: false,
  },
  methods: {
        mouseEnter: function(){
            this.toShowOnHover = !this.toShowOnHover;   
        },
        mouseLeave: function(){
            this.toShowOnHover = false;   
        }
  }
})
```
- The mouseEnter() function let us show the element p who had already the property "toShowOnHover"
- The mouseLeave() function let us hide the element p to return to the base state

##DEMO IN ACTION
{% jsfiddle https://jsfiddle.net/Mohcinbn/s6m2tvby/ %}

##Conclusion
Now you have the start up keys to achieve any thing you wanna show when users hover an element in your next vue app. 

Go ahead and happy coding
Day One Pt2 - Twilio Hackathon
Tags: twiliohackathon
Published: 2020-04-26 18:29:12

[Comment]: # I've just began my project! 

#### What I built:
I'm going to create a video app that encourages spontaneous conversation between people within your friend group and second-degree friends

#### Category Submission: 
COVID-19 Communications

#### Demo Link:
It's coming (eventually)

#### Link to Code:
See last post (the repo is still empty)


#### How I built it (what's the stack? did I run into issues or discover something new along the way?)
I'm currently cramming react into my brain so I can make an elegant looking UI! Besides that, it'll be a react frontend with a python backend using Twilio Video for P2P conversations
Feature request: [state,,updateState] = useState(...)
Tags: react, feature
Published: 2020-04-26 18:27:35

Simple update state pattern:

```
const [state, setState] = useState({
  isBusy = false,
  error = null,
  data = null
})

const updateState = (newState) => setState(
  (prevState) => ({
    ...prevState,
    ...newState,
  })
)
```

How about making updateState a default third value in useState response? 

E.g.:

```
const [state,, updateState] = useState({
  isBusy = false,
  error = null,
  data = null
})

const init = () => {
  if (!state.isBusy) {
    updateState({ isBusy: true, error: null })
    setImmediate(
      async () => {
        try {
          const data = await fetch(...)
          updateState({ isBusy: false, data })
        } catch (e) {
          updateState({ isBusy: false, error: e })
        }
      }
    )
  }
}
```