teleren/devto huggingface dataset:
Bubble Sorting for Beginners in JS
Tags: javascript, algorithms, sort
Published: 2019-01-15 19:54:54

---
title: Bubble Sorting for Beginners in JS
published: true
description: A breakdown of bubble sort in JS
tags: js, algorithms, sort
cover_image: https://thepracticaldev.s3.amazonaws.com/i/j9822d8mmjttzmxzsel9.jpg
---
As someone who uses Javascript all day, every day for work I realized I took a lot of basic algorithm tasks for granted so I have decided to dive into the basics in blog posts for the next few weeks, starting today with BUBBLE SORT.

## What is Bubble Sort?

Bubble Sort is a method for sorting arrays by comparing each array element to the element behind it. So, if you had an array with `[3,5,4, 2]` the bubble sort function would compare "3" to "5" then compare "5" to "4" and so on until the array is sorted.

## Best Way to Bubble Sort

The best way I have found/built to bubble sort looks like the below:

```javascript
const bubbleSort = arr => {
  let swapped;
  do {
    swapped = false;
    for (let i = 0; i < arr.length; i++) {
      if (arr[i] > arr[i + 1]) {
        let tmp = arr[i];
        arr[i] = arr[i + 1];
        arr[i + 1] = tmp;
        swapped = true;
      }
    }
  } while (swapped);
  return arr;
};
```

## Code Breakdown

Now let's break this code down snippet by snippet.

```javascript
const bubbleSort = arr => {
  let swapped;
  do {} while (swapped);
  return arr;
}
```

Here we initialize a `swapped` variable and set up a do/while loop to run while `swapped` is equal to true, then return the array.

NEXT:

```javascript
const bubbleSort = arr => {
  let swapped;
  do {
    swapped = false;
    for (let i = 0; i < arr.length; i++) {
      // do stuff here  
    }
  } while (swapped);
  return arr;
}
```

Now we have set up the function to loop over each element of the array.

NEXT: 

```javascript
const bubbleSort = arr => {
  let swapped;
  do {
    swapped = false;
    for (let i = 0; i < arr.length; i++) {
      if (arr[i] > arr[i + 1]) {
        // if element > the next element
      } 
    }
  } while (swapped);
  return arr;
}
```

If the element is greater than the element behind it in the array we want to do something (swap) with it.

NEXT: 

```javascript
const bubbleSort = arr => {
  let swapped;
  do {
    swapped = false;
    for (let i = 0; i < arr.length; i++) {
      if (arr[i] > arr[i + 1]) {
        let tmp = arr[i];
        arr[i] = arr[i + 1];
        arr[i + 1] = tmp;
        swapped = true;
      }
    }
  } while (swapped);
  return arr;
};
```

We need to save the `arr[i]` element to the `tmp` variable because we are going to overwrite it with the value of the element behind it (`arr[i+1]`). Then we reassign the value of the element behind it (`arr[i+1]`) to equal `tmp`.


This was my best try at a basic Bubble Sort function, let me know if you find a more elegant solution!
Back to JS & React
Tags: javascript, react, redux
Published: 2019-01-15 19:53:34

---
title: Back to JS & React
published: true
description: Been all over the place these past couple years with programming languages
tags: javascript, react, redux
---

Well, I’m back to Javascript. It’s been C# in Unity, C++ in Unreal Engine, Godotscript or whatever, PHP for WordPress and Custom CMS, to React/Redux 🥵. I have to admit that PHP made a lot of sense to me and solidified some concepts about the web for me.  I have yet to try Laravel, Symphony, or any other PHP framework. Honestly, I missed the flexibility of Javascript. The first thing I really remember liking about JS was anonymous functions. I can really just create a function on the fly?!?  Coming from a C++ starting point back in the late 90s, anonymous functions wowed me. Even with my limited experience JS seems very flexible and expressive. Yes it’s easy to write bad code, but I never stopped using a 🔪 in the kitchen because of a little blood. 

So anyway. Just ranting that I’m back on the JS bandwagon. Learning React & Redux from Stephen Grider on Udemy. Redux is a lot to wrap your head around sometimes, but I’ve heard React has a context api or something now. Haven’t made it that far yet, but soon. 

Thanks for reading my rant. I’m gonna start (ranting) => posting more in the future. Think it will help the learning process. A lot of it will be beginners stuff. Bear with me. 

🍻
NgRx Facades: Pros and Cons
Tags: angular, ngrx, javascript
Published: 2019-01-15 19:45:46

---
title: NgRx Facades: Pros and Cons
published: true
description: Learn about the facade pattern, why you may or may not want to use one with NgRx, and how to create a facade.
tags: #angular #ngrx #javascript 
canonical_url: https://auth0.com/blog/ngrx-facades-pros-and-cons/
---

You may have heard recently about a topic whizzing around the Angular community: facades in NgRx. I thought it’d be a great idea to write an article to talk through this issue. Let’s learn what facades are, the arguments for and against them, and how to implement one.

[Read on 🐟](https://auth0.com/blog/ngrx-facades-pros-and-cons/?utm_source=dev&utm_medium=sc&utm_campaign=ngrx_facades_proscons)

![NgRx Facades: Pros and Cons](https://thepracticaldev.s3.amazonaws.com/i/lxbvh07q0jiqi59snkam.jpg)
Socket Programming in C: Introduction
Tags: c, sockets, networking
Published: 2019-01-15 19:24:38

Today I am announcing a new series that is underway. The series will teach socket programming in C and will hopefully provide material that is clear and easy to understand especially for those new to sockets and wanting to learn. Plus, if you stick till the end, a reward in the form of a final project is made that I think you will all enjoy.

## Why Learn Socket Programming

In the next post, where I will go into more depth to what a socket is, provides a means of communication between two processes which could be across the world provided they are both on the same network. You may want to learn sockets to do just this. Another reason is simply to learn. Nothing wrong with increasing your knowledge about the world around you and becoming more informed in the process.

## Prerequisites

This series assumes its audience has little to none experience with sockets. With that being said, you will still need how to program in C or even C++.

## Next

The next post will talk more about sockets.
Making the Invisible Visible: A Look at Building Tools for Square Developers
Tags: api, serverless, webdev
Published: 2019-01-15 17:47:18

---
title: Making the Invisible Visible: A Look at Building Tools for Square Developers
published: true
description: 
tags: api,serverless,webdev
---
_Written by **Lindy Zeng** on **[Square Corner Blog](https://medium.com/square-corner-blog/making-the-invisible-visible-a-look-at-building-tools-for-square-developers-bae30a212950)_**

At Square, the Developers team exposes APIs that allow third-party developers to build custom business-processing solutions. On October 18, we announced to developers using our APIs that webhooks would now support retries. If a webhook cannot be delivered, our system will now be able to retry multiple times until a successful delivery.

Square’s webhook delivery system is a service I’ll refer to as Webhooks. Improving Webhooks’ reliability was a project I had the opportunity to dive into the first week I started at Square as a new college graduate. From the beginning, we wanted our Webhooks upgrades to require no change on the part of our external developers, in stark contrast to the amount of research, planning and work that went into the project. In fact, the announcement we sent out assured developers that they “should not need to make any changes to support webhooks with retries.” My manager remarked that it was “the most invisible change ever” — and that is how it should be. The focus of our team is to enable developers to easily integrate with Square’s APIs and provide them with a reliable and simple-to-use experience. Perhaps it was my manager’s remark about our “invisible” project that inspired me to share some insight into not only our webhooks reliability project, but also some of our “visibility” practices here at Square.

Read more on the [Square Corner Blog](https://medium.com/square-corner-blog/making-the-invisible-visible-a-look-at-building-tools-for-square-developers-bae30a212950)
Digital Ocean iOS App
Tags: help, digitalocean
Published: 2019-01-15 17:57:57

---
title: Digital Ocean iOS App
published: true
description: 
tags: help, digitalocean
---

I'm asking if someone uses a Digital Ocean Manager App no iOS, which one is it, and if it's better that other ones you've tried. I searched for opinions or reviews but it seems like it's an unexplored terrain that developers trained themselves to do an App with and API.
Do you still use a macOS app launcher?
Tags: discuss, macos, productivity, tips
Published: 2019-01-15 17:02:56

---
title: Do you still use a macOS app launcher?
published: true
description: 
tags: devdiscuss, macos, productivity, tips
cover_image: https://images.unsplash.com/photo-1518126085714-4f983a88f6c5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1605&q=80
---

There was a time, when I could swear my allegiance to one app launcher or another, as long as it was not Spotlight. At first, I believe, I started using the free version of [Alfred](https://www.alfredapp.com/) some years ago, but then I moved over to [Launchbar](https://obdev.at/products/launchbar/index.html) when I realized  that Alfred still pretty much relies on the Spotlight index for everything. At the time, I had manually [knocked out](https://www.iclarified.com/49187/how-to-disable-and-reenable-spotlight-indexing-on-your-mac) the Spotlight indexing process, in order to save CPU cycles and spare my HDD (yeah, it was quite some time ago). Launchbar builds its own index and it is very fast and fine-grained to exactly an app launcher would need.

I am still used Launchbar as my day-to-day app launcher, even though it has been years since I stopped disabling the Spotlight indexing process. I still don't like the Spotlight UI, but am aware that the index is used in many more apps beyond the app launching itself.

I am interested to know if you are still using a custom app launcher for macOS. I f yes, I would like to hear your reasons, and perhaps, get a few new interesting automation tips from you. Drop me a line in the comments.
Reverse Engineered The Google Earth API
Tags: google, 3d, javascript
Published: 2019-01-15 16:50:32

---
title: Reverse Engineered The Google Earth API
published: true
tags: google, 3D, javascript
description: Amazing 3D images from Google Earth.
cover_image: https://thepracticaldev.s3.amazonaws.com/i/k6xa7o3sa8q9sg5ify0r.jpg
---

A guy has reverse engineered the Google Earth API and created a project where you can extract 3D images from the machine.

It's amazing, take a look: [https://github.com/retroplasma/earth-reverse-engineering](https://github.com/retroplasma/earth-reverse-engineering)
A Teacher's Advice On Learning CS With Less Stress
Tags: learn, cs, javascript, teacher
Published: 2019-01-15 16:47:22

---
title: A Teacher's Advice On Learning CS With Less Stress
published: true
description: A blog post detailing what I've learned about learning
tags: learn, CS, javascript, teacher
---

<a href="https://bowlendevelopment.blogspot.com/2019/01/a-teachers-advice-on-learning-cs-with.html">New Blog Here!</a>
Low tech isn't always bad tech
Tags: discuss, productivity, culture
Published: 2019-01-15 16:27:16

---
title: Low tech isn't always bad tech
published: true
description: Low tech isn't always bad tech
tags: #discuss #productivity #culture
---

Ok ok, it seems a bit counter intuitive to think this way but a few clarifications: 

Low tech is normally applied to old technology that is simply out of date. 
    
High tech is a term for relatively new technology that incorporates advanced features or cool things you didn’t know you really wanted to do.

We often assumed that high technology is always better than low technology. However, as high technology has proliferated into many areas of life, its inherit complexity can be seen as not delivering on its initial promise of solving a problem, or at least a problem you didn’t know you had in the first place.

####Example:

Take for instance my phone:

![XKDC](https://imgs.xkcd.com/comics/xkcd_phone_6.png)


I decided to use it for pomodoro timing in addition to listening to music.

But I had issues:

 1. To start the timer means to looking at my phone to set it while avoiding the myriad notifications including email, text, calls, whatsapps etc.
 2. Silencing the notifications without silencing the alarm they are all notifications, perhaps a different app would help here, or cutting my data connection automatically using tasker, but then I have to root my phone, and i would lose my music I was streaming.
 3. Stopping the timing meant navigating the notification gauntlet again.
 4. Having the phone on my desk meant that I was tempted to look at other notifications the screen usually turns on when they appear.

####Final decision:

Use low tech solutions.

 * I use a 10 year old ipod touch for music.
 * I use a Casio watch for timing pomodoro sprints, its quick, effective and always with me.

I know many teams use a whiteboard with post it notes for kanban tracking, so it's a common theme.

What low tech solutions do you use ? And Why do you use them instead of digital tools ?
Build a GitHub Action with Ruby
Tags: githunt, github, beginners, ruby
Published: 2019-01-15 16:04:11

---
title: Build a GitHub Action with Ruby
published: true
description: 
tags: githunt, github, beginner, ruby
---

Want to build a GitHub Action with everyones favorite language?

Here's a quick start for building one with Ruby. ✨

{% github mscoutermarsh/ruby-action-recipe %}


## Fancy gif
![](http://cloud.mikeasaur.us/fd228f66cf8d/Screen%252520Recording%2525202019-01-14%252520at%25252005.02%252520PM.gif)
Schema-DTS: Schema.org Linked Data Types & Code Generation
Tags: githunt, showdev, seo, semweb
Published: 2019-01-15 15:58:10

---
title: Schema-DTS: Schema.org Linked Data Types & Code Generation
published: true
description: 
tags: githunt, showdev, seo, semweb
cover_image: https://thepracticaldev.s3.amazonaws.com/i/4xt5mqyg5ow4qtklkql1.gif
---

**Schema-DTS** is a Google Open Source Initiative project that makes it possible to write JSON-LD literals in the Schema.org vocabulary.

{% github google/schema-dts %}


It consists of two NPM packages:

1. [schema-dts](https://npmjs.com/package/schema-dts) - A set of default types and properties representing schema.org, including deprecated types, pending types, and certain extension vocabularies.

2. [schema-dts-gen](https://npmjs.com/package/schema-dts-gen) - A CLI that dynamically generates TypeScript definitions given a Schema.org layer (e.g. "schema" or "all layers") with custom flags and configuration (e.g. a custom "@context", skipping deprecated types and properties, etc.).
Top 5 DEV Comments from the Past Week
Tags: bestofdev
Published: 2019-01-15 15:32:52

---
title: Top 5 DEV Comments from the Past Week
published: true
description: Highlighting some of the best DEV comments from the past week.
tags: bestofdev
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--7VrAA2ln--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://thepracticaldev.s3.amazonaws.com/i/qmb5wkoeywj06pd7p8ku.png
---

This is a weekly roundup of awesome DEV comments that you may have missed.  You are welcome and encouraged to boost posts and comments yourself using the **[#bestofdev](/t/bestofdev)** tag.

@patricktingen provided a great answer in a thread titled **[Do you leave jokes in your code? If so, please share!](https://dev.to/ahmedmusallam/do-you-leave-jokes-in-your-code-if-so-please-share-2hkb)**.  The perfect blend of harmless and hilarious 😜:
{% devcomment 85bn %}

In **[Why is Linux Not More Popular on the Desktop?](https://dev.to/aghost7/why-is-linux-not-more-popular-on-the-desktop-40ln)** @ld00d provided some thoughts related to the marriage of hardware and software:
{% devcomment 852m %}

@peterwitham offered some additional thoughts in a great article titled **[The IDE - The beginner's trap !](https://dev.to/yafkari/ide---the-beginners-trap-eg2)**.  I especially like the last line, that it's beneficial only after "you have a grasp of the power you are taming with the tool":
{% devcomment 83la %}

In a thread full of gripes — **[What are some co-worker attitudes you dislike?](https://dev.to/joehobot/what-are-some-co-worker-attitudes-you-dislike-2bim)** — @canu667 provided three behaviors that are particularly annoying:
{% devcomment 844d %}


To finish things off: after the author asked **[How should we indent `const` declarations?](https://dev.to/kenbellows/how-should-we-indent-const-declarations-537d)**, @fpuffer provides an answer and backs it up with several advantages:
{% devcomment 83o3 %}

See you next week for more great comments ✌
That new thing everyone is raving about? It's not so hot after all...
Published: 2019-01-15 14:51:36

---
title: That new thing everyone is raving about? It's not so hot after all...
published: true
description: Useful advice on evaluating and adopting new technologies and practices
tags: 
---

I'm sure you've heard of that new &lt;best practice&gt;? Everyone has been writing about it, saying how it's the best thing ever and you should immediately adopt it to remain relevant. Well, I've looked into it and I don't think it's that good. You probably shouldn't use it. Sure, sometimes it can be good but not always, so don't jump on the hype train without thinking.

So how can you tell when to use &lt;best practice&gt;? Turns out, it's quite simple. Look at your situation. Does &lt;best practice&gt; make sense in your situation? If it does, use it. If it doesn't, don't use it. It's that simple! Now that you have an easy way to make that decision, hopefully the hype dies down and we can adopt the good parts of &lt;best practice&gt;.
Cross post blog posts to dev.to?
Tags: discuss, meta
Published: 2019-01-15 14:40:19

---
title: Cross post blog posts to dev.to?
published: true
description: Should we cross post blog posts to dev.to?
tags: discuss, meta
---

So we have a blog for our open source company/project, but I was thinking of sharing the updates here as well. Does it make sense? Is there anyone else doing the same thing?
CQured PHP 2019
Tags: php, api, framework
Published: 2019-01-15 14:38:19

---
title: CQured PHP 2019
published: true
description: CQured Framework 3.0alpha
tags: php, api, framework
---
<img src='https://thepracticaldev.s3.amazonaws.com/i/2oof8beebcmnkao8taic.JPG'>
#CQured 3.0alpha -> Onion Architecture for multi-api framework
https://github.com/air-Design/cqured/tree/3.0.0
@CQured web-api for presentation(Api)
@doctrine for DB
@lcobucci JWT for Auth.
@GuzzlePSR7
Had some issues with #Doctrine Config since it was my first time. but it look good
Importance of Editing and Proofreading
Tags: productivity, programming, career, beginners
Published: 2019-01-15 14:37:16

---
title: Importance of Editing and Proofreading
published: true
description: It is important to double-check your work (e.g. source code) before submitting. This includes editing and proofreading what you have completed.
tags: #productivity #programming #career #beginners
cover_image: https://thepracticaldev.s3.amazonaws.com/i/pwr6usrbw6n5bvf7ppr5.jpg
---

![Proofreading Meme](https://thepracticaldev.s3.amazonaws.com/i/ynpe5y68o12srfhsnyu9.jpg)

I've experienced this time after time again, many developers don't proofread their work. I don't know why some developers have this urgency to submit their code for review right after they get it working without doing the important step of editing and proofreading.

Do you remember in school when you finished that essay or research paper, you edited and proofread it before submitting right? I believe this should apply to our source code too.  In a way, source code is a developer's form of written communication. 

After you finished completing a portion of work that is ready for submission or code review, consider doing the following.

## Editing:
* Does your code integrate properly into the overall system. As an analogy, writing the next chapter in the book or the next paragraph in the essay.
* Using the right data structures for impact and efficiency.
* Are you expressing what you are doing clearly and to the point.
* Using the language as best as you can, e.g. don't write your Swift code like Java, or your JavaScript code like C#.
* Are you being overly verbose or too compact with your code.
* Have you communicated your intentions clearly that would be understood to another developer and not just the computer.

## Proofreading:
* Have you checked for spelling, grammar, and typing mistakes. Linting helps but you'll be surprised how often people ignore lint warnings.
* Are you conforming to the style of the existing code and being careful of things that a linting tool might not catch.
* Did you go through a checklist of common runtime errors.

I've heard reasons for not doing this, most of the time it comes down to "I want to submit my code as soon as possible. I don't want to be waiting around and have my code get out of date with the rest of the codebase." Our source code is not only how we make the computer work but also a form of communication between developers.  I encourage all developers, especially newer developers, to foster the same habit you have with other written communications. Edit and proofread your work before submitting.
Using MobX with React Hooks
Tags: mobx, react, hooks, javascript
Published: 2019-01-15 14:28:20

---
title: Using MobX with React Hooks
published: true
description: How to test MobX with Hooks using the react-testing-library.
tags: MobX, React, Hooks, JavaScript
series: mobx-hooks
---

This post assumes familiarity with MobX.

#### Testing is an important part of your development workflow.

In my previous post (if you haven't read, please do) {% link ryands17/using-mobx-with-react-hooks-52h5 %}

I had shown two simple examples of how to use MobX custom hooks via the `mobx-react-lite` package and how to use the traditional MobX class stores via the built-in `useContext` hook. In this post, I will demonstrate how to test these components that use hooks via [Kent C. Dodds](https://kcd.im/) superb [react-testing-library](https://github.com/kentcdodds/react-testing-library). Do check the documentation for how to render your React components in tests.

I am using the same CodeSandbox examples used in my previous post for simplicity. Also you can view the tests and output at the same time.

For the **first example**, in which we use the `useObservable` hook, the component is easy to test.

{% codesandbox 8y05z5p4q8 %}

If you view the `index.test.js` file, there are two tests,
1. to check whether the list has rendered.
2. to test whether the todos toggle changes the remaining items.

In the first test, we check the length of the list-items and the footer text, using the Jest `expect` assertions.

In the second test, we fire a click event on the list-items using the `fireEvent` method in which the `toggleTodo` method is fired that changes the todo's `completed` parameter. This in turn changes our **Footer** components' text which we can again test using Jest assertions.

For the **second example**, to test the MobX class which we used in our component via `useContext`, we need to create a dummy component and import our store as we would normally do in any other component.

{% codesandbox 3kmkj56qm %}

If you view the `index.test.js` file, a dummy component is created and it consumes our MobX class store using the `useContext` hook. We just define the minimal UI we need to test according to our MobX store and write our tests.

The tests are same as the first example but the only change here is we create a dummy component to test our MobX store to mimic our main React component.

To view the output of the tests, you can open the tests panel at the bottom of the editor in which CodeSandbox runs the test automatically for you.

Feel free to fork the sandbox and play around with those tests and components. Thanks for reading!