teleren/devto huggingface dataset:
Destructuring in Javascript
Tags: javscript, webdev
Published: 2020-08-20 18:40:42

Destructuring is a very simple concept in javascript, it allows you to pull out some variables from object/array, but it has a lot of features.

## Basics
```javascript
//destructuring object
const fruit = { id: 0, name: "apple", color: "red" };
const { name, id } = fruit;
console.log(id + ": " + name);//0: apple

//destructuring array
const range = [0, 5];
const [min, max] = range;
console.log(min + " - " + max);//0 - 5

//destructuring objects in array
const fruits = [
    { id: 0, name: "apple", color: "red" },
    { id: 1, name: "pear", color: "yellow" }
];

const [{name: appleName, id: appleId}, {name: pearName}] = fruits;
console.log(appleName);//apple
console.log(appleId);//0
console.log(pearName);//pear
```

## Destructuring inside of for-of loop
```javascript
const fruits = [
    { id: 0, name: "apple", color: "red" },
    { id: 1, name: "pear", color: "yellow" }
];

for(let { id, name } of fruits){
    console.log(id + ": " + name);
    //first loop> 0: apple
    //second loop> 1: pear
}
```

## Default value
```javascript
const empty = {};
const { name = "apple", id = 5 } = empty;
console.log(id + ": " + name);//5: apple

const emptyRange = [];
const [min = 0, max = 100] = range;
console.log(min + " - " + max);//0 - 100
```

## Renaming values
```javascript
const fruit = { id: 0, name: "apple", color: "red" };
const { name: fruitName, id: fruitId } = fruit;
console.log(fruitId + ": " + fruitName);//0: apple
```

## Destructuring function input
```javascript
const printName = ({ name }) => {
    console.log(name); //apple
};

const fruit = { id: 0, name: "apple", color: "red" };
printName(fruit);
```

## Rest operator
```javascript
const fruit = { id: 0, name: "apple", color: "red" };
const { name, ...other } = fruit;
console.log(name);//apple
console.log(other);// { id: 0, color: "red" }

//destructuring array
const range = [0, 5, 55, 100];
const [min, max, ...other] = range;
console.log(min + " - " + max);//0 - 5
console.log(other);// [55, 100]
```

## Nested properties
```javascript
const fruit = {
    id: 0,
    name: "apple",
    properties: {
        color: "red",
        hasBugs: false
    }
};
const {name, properties: {color, hasBugs, isMature = false }} = fruit;
console.log(name);//"apple"
console.log(color);//"red"
console.log(hasBugs);//false
console.log(isMature);//uses default value: false
```

## Swap values
```javascript
let [one, two] = [1, 2];
[two, one] = [one, two];
console.log(one);//2
console.log(two);//1
```

## Split string
```javascript
const namePassString = "hello:world";
const [username, password] = str.split(":");
console.log(username);//hello
console.log(password);//world
```
Tips for Code Assignments
Tags: hiring, career, interview
Published: 2020-08-20 18:05:09

---
canonical_url: https://www.wilbertom.com/blog/code-assignments/
---
Over the last six months, I have been reviewing coding assignments while searching for our next Software Engineer at [PrintWithMe](https://www.printwithme.com/). Here are some tips I would give developers on the other side of this.

## Use the programming language you're best at

You might feel this is a good time to test a new programming language you have been learning. The problem is that using a language you don't have real experience with will lead to mistakes. If the reviewer knows the programming language in your submission, they will quickly spot places where you don't measure against experienced developers using that programming language.

Another reason developers do this is that they feel the need to use the programming language listed in the job posting. Ask about this ahead of time, but in my experience, great companies don't care what programming language you use. They understand that a good developer is a good developer, and picking up a new language will not be a problem.

## Run your code through tools

Take the time to run your code through formatting, static analysis, and other tools. It shows that you care about code quality, and it will catch common errors. If the person reviewing your code runs it through these tools, they will be put off immediately by warnings.

## Test your code

I'm surprised by the number of developers who still don't know about [TDD](https://en.wikipedia.org/wiki/Test-driven_development) or testing in general. If you're one of them, take the time to learn it and use it on your code submission. If you are applying for any company where high-quality systems are important, tests will be a requirement. Even if they are not specified in the instructions, add them, they will make you stand out.

## Make sure your submission is correct

Sometimes I get submissions that are straight-up wrong. This is because the developer forgot to test against corner cases like when the input is 0, an empty string, or something along those lines.

After making changes to your code, test *everything* again. A few times, candidates would make last-minute changes and forget to test running the program. There's nothing worse than your submission crashing on the first run.

## Write clear documentation

Document how to test and run the code. Add a description of your design decisions. This might be controversial, but I'm going to come right out and say it: reading three paragraphs on why you chose "dynamic algorithms" is boring. Add documentation for humans.

Even though this is something I will forgive if the code is good, it's a place to stand out. A developer needs to communicate clearly with everyone in the company, not just other developers. Its something a lot of engineers struggle with, myself included. If you show me you are better at it than me, I want you on my team.
Day 2 of 100DaysOfCode
Tags: 100daysofcode, javascript, github, freecodecamp
Published: 2020-08-20 18:24:14

Started the day by getting more familiar with GitHub and downloaded the GitHub desktop app. Learned about GitHub Pages and how to host a website using it. After it was done, did some more basic JavaScript at FreeCodeCamp. 

Realized that today I just doubled my coding streak! ;) 

I feel great for starting this challenge and hope it will last for a long time. 

## What I did today:

### 1. GitHub Pages Learning Lab
https://lab.github.com/githubtraining/github-pages
####What I learned from it:
* Got more familiar with the GitHub Flow
* Enabled GitHub Pages
* Selected a theme using the config file
* Learned about proper directory format and file naming conventions in Jekyll
* Added and modified Jekyll front matter


### 2. Basic JavaScript at FreeCodeCamp
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/
####What I learned from it:
* Difference with objects and arrays
* Accessing properties of objects using dot and bracket notation
* Updating property values

 
#### Time spent learning:
Task 'Learning GitHub and GH Pages'. Elapsed time: 61 min 30 s
Task 'JavaScript on FCC'. Elapsed time: 35 min 2 s

#### Total Time: 1h 36min 32s
Tracked by using my [TaskTimer](https://www.arttupyykonen.com/tasktimer/) script. 


Hope you enjoyed my second post. See you all tomorrow!
Switching the offset for a UTC date in SQL Server
Tags: sql
Published: 2020-08-20 18:23:49

I was doing some work recently where I needed to group some data from SQL Server by year, month, week, etc.

The simplified version was something like this:
```
SELECT	
	COUNT(x),	
    YEAR(CreatedUtc)
FROM	
	dbo.[Order]
GROUP BY
	YEAR(CreatedUtc)
```

The CreatedUtc data type is datetimeoffset storing zulu datetimes.

Even though I knew I was only looking at data from 2020 I was still seeing 2 rows - one for 2019 and one for 2020.

I tested my date filtering (omitted for brevity in the sample above) and everything was fine. All dates was within the 2020 UTC bounds.

So after digging a bit more I found the offending row resulting in the 2019 group. The date was: **‘2019-12-31 23:56:43.0052080 +00:00’**

Thinking of it, it of course makes perfect sense that the built-in YEAR function is not aware of timezones.

**YEAR(‘2019-12-31 23:56:43.0052080 +00:00’)** will (naturally) return 2019.

We need to switch the offset in the datetimeoffset to the timezone required for the task. In my use-case of a building a report that means switching to CEST/Central European Standard Time.

The YEAR snippet now instead becomes:
```
YEAR(SWITCHOFFSET(CreatedUtc, DATEPART(TZOFFSET, CreatedUtc AT TIME ZONE 'Central Europe Standard Time')))
```

The full (still simplified) sample becomes:
```
`
SELECT	
	COUNT(x),	
    YEAR(SWITCHOFFSET(CreatedUtc, DATEPART(TZOFFSET, CreatedUtc AT TIME ZONE 'Central Europe Standard Time')))
FROM
	dbo.[Order]
GROUP BY
	YEAR(SWITCHOFFSET(CreatedUtc, DATEPART(TZOFFSET, CreatedUtc AT TIME ZONE 'Central Europe Standard Time')))
```
Notice: I haven’t yet done any benchmarking on the above approach and it might make sense to extract this to a function to clean things up a bit.

Also see the official SWITCHOFFSET documentation.
https://docs.microsoft.com/en-us/sql/t-sql/functions/switchoffset-transact-sql?view=sql-server-ver15

If you have another better approach please do let me know :-)
What are Best Chrome Extensions for Web Dev and Cash-back?
Tags: webdev, webpack, beginners, discuss
Published: 2020-08-20 18:16:47

## Here are the Top 6 that I used daily:

**Q: Are there any cool chrome extensions out there that could improve my web dev programming?**

1. [Adblock Plus](https://adblockplus.org/): Block all the ads
2. [Grammarly](https://www.grammarly.com/): Used to check my grammar when I write essays, blogs, etc.
3. [Honey](https://www.joinhoney.com/): To find me the best deals
4. [Rakuten](https://chrome.google.com/webstore/detail/rakuten-get-cash-back-for/chhjbpecpncaggjpdakmflnfcopglcmi?hl=en-US): Give me cash back when I shop online
5. [Redux Dev Tool](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en): For debugging with React
6. [JSON View](https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=en): View JSON on the web browser prettier
User Testing Feedback - Building SaaS #54
Tags: python, django, saas
Published: 2020-08-20 18:10:10

{% youtube hM2qLCGwAIA %}

In this episode, we worked on issues found from a round of user testing.  I talked about how I did user testing with my customer, then started to tackle the usability issues that she identified.

We're taking a break from building the onboarding flow so that we can take some time to address feedback from user testing with my customer.

I started the stream by explaining how I set up user testing and what I got out of the experience.  We talked through the issues and looked at how they range in size and complexity.

To get some early wins, we started by working on the easiest issues.  I completed four issues in the stream.

The first issue changed a single template to alter the sub-navigation of the interface.  I removed some customization on the navigation element and replace the text.

After that short change, we debugged an issue with a print style.  We talked about print styling and how to include CSS changes only when printed by using the `media="print"` attribute to the link tab.  After I found the source of the issue, I updated the print CSS file and tweaked the template to fix it.

For the third issue, I added a new view with some unit tests to include a button to let users get to the page that lets them enter any missing task grades.

Finally, we made a broad change on the site to set the position of all confirmation buttons from the left to the right.  My customer said this was what she naturally expected, so I styled everything appropriately.  I was grateful to make this change early in the project because it would be quite painful in the future if there were tons of forms to modify.

On the next stream, we'll get into more of the user testing feedback.

This article first appeared on [mattlayman.com](https://www.mattlayman.com/building-saas/user-testing-feedback/).
How best do I structure my User database?
Tags: help, discuss, rails, ruby
Published: 2020-08-20 17:58:31

---
title: How best do I structure my User database?
published: true
description: 
tags: #help #discuss #rails #ruby
//cover_image: https://direct_url_to_image.jpg
---

Hi everyone, 

I need help designing my user related database structure. I am building an app with Rails to allow house owners manage their various properties and I want to have different categories of users. There are the admins: they get the dashboard and do analytics etc. Then the main app users are owners themselves. I want the owner to be able to add a tenant to a flat and also add a caretaker to manage a building or more. Do you think I should use the same user table for these 3 with roles?

Any advice you give will be very helpful.

Thank you
Automatically Create a Release When The package.json Version Changes
Tags: actionshackathon, github, git, opensource
Published: 2020-08-20 17:44:29

### My Workflow

[Automatic GitHub Release](https://github.com/marketplace/actions/automatic-github-release): Automatically generate a release when the package.json version changes.

It's currently being used to manage releases of itself. I created it to help manage releases of some private packages I'm working on.

### Submission Category: 

Maintainer Must-Haves

### Yaml File or Link to Code

{% github https://github.com/justincy/github-action-npm-release %}

### Additional Resources / Info

What I learned:

* Debugging is rough. [act](https://github.com/nektos/act) makes it easier but it's not a perfect solution.
* The first gotcha I ran into was that steps need an ID in order to reference their output. For some reason can't reference steps by their name.
* Actions can't depend on other actions. My [original plan](https://github.com/justincy/gh-action-release-test) was to create a few [small actions](https://github.com/justincy/npm-version-action) and stitch them together into a larger [composite action](https://docs.github.com/en/actions/creating-actions/creating-a-composite-run-steps-action) but it's not possible.
* Use [@actions/core](https://www.npmjs.com/package/@actions/core), even if you think your script will be small. It makes input, output, errors, etc much easier. Chances are your script will become quite a bit more complex when you start handling errors.
* [You must bundle all code that your actions needs, including dependencies](https://docs.github.com/en/actions/creating-actions/creating-a-javascript-action#commit-tag-and-push-your-action-to-github). The best solution is to use [@vercel/ncc](https://github.com/vercel/ncc).
Converting HTML file to PDF using Aspose.Words API
Tags: html, asposewords, pdf, csharp
Published: 2020-08-20 17:42:27

###Introduction:
In this article, you will be able to observe and test how to convert an HTML file with images to PDF.
Actually, I got a request from a customer and he wanted to use Aspose.Words library for this task.
###Prerequisites:
Our Aspose.Words libraries work on any platform and include – Aspose.Words for .NET, Aspose.Words for Java, Aspose.Words for C++, Aspose.Words for Android via Java, Aspose.Words for SharePoint, Aspose.Words for Reporting Services and Aspose.Words for Jasper Reports. For this article, we will use Aspose.Words for .NET which can be downloaded [here](https://downloads.aspose.com/words/net).
###Simple conversion:
Usually, the conversion from HTML to PDF is simple like this:
```
   Aspose.Words.LoadOptions options = new Aspose.Words.LoadOptions();
   options.LoadFormat = Aspose.Words.LoadFormat.Html;
   Aspose.Words.Document document = new Aspose.Words.Document(inputFile, options);
   document.Save(outputFile, Aspose.Words.SaveFormat.Pdf);
```
###Potential problem:
A potential problem here could be that the images from the source document don't fit the page width in the PDF output.
###Solution:
```
   //loading the HTML file
   Words.LoadOptions options = new Words.LoadOptions();
           options.LoadFormat = LoadFormat.Html;
   Words.Document doc = new Words.Document("source.htm", options);
   //iterate through the sections in the doc Document
   foreach (Section section in doc.Sections)
   {
      //change document margins – the numbers can be adjusted for your needs
      Words.PageSetup ps = section.PageSetup;
      double margin = ps.TopMargin;
      ps.TopMargin = margin * 0.35;
      ps.BottomMargin = margin * 0.35;
      double targetWidth = ps.PageWidth - ps.LeftMargin - ps.RightMargin;

      //finding all the shapes in the document
      NodeCollection shapes = doc.GetChildNodes(NodeType.Shape, true);
      foreach (Words.Drawing.Shape shape in    shapes.OfType<Words.Drawing.Shape>())
      {
         if (shape.HasImage)
         {
            //checking if the image fits the page 
            double imgWith = ConvertUtil.PixelToPoint(shape.Width);
            if (targetWidth < imgWith)
            {
                shape.Width = targetWidth;
            }
         }

      }
   }
   doc.Save("output.pdf", SaveFormat.Pdf);
```
Conclusion: The Aspose.HTML and Aspose.PDF APIs could also be used for the conversion, but in this request, the customer wanted to use Aspose.Words. You can find more examples on our [Documentation page](https://docs.aspose.com/dashboard.action).
Deploy Django application to Heroku using GitHub Actions 
Tags: actionshackathon, github, opensource
Published: 2020-08-20 17:36:48

[Instructions]: # (To submit to the GitHub Actions x DEV Hackathon, please fill out all sections.)


### My Workflow
[Note]: # (Make sure to include the name of your GitHub Action and share where it's being used!)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n21drvda2qm48emd4n5h.png)

Hey guys, I have built this website using Django and also used Django Restframework to build an API and implement it there on this site. I configured this project to be deployed on Heroku but each time I commit and push a change to my GitHub repository I have to push it again to Heroku to make the changes visible. Then I came to know about GitHub actions and this is where GitHub actions came into play, I have created a GitHub action which will automatically push the commit to Heroku so that I only need to push my changes to GitHub and my website gets updated on its own.
<br/><br/>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vkmzutd6idv6pnn1ftim.png)
This is how my newly created GitHub action looked.
<br/><br/>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7n93xo2zesubwweszvkj.png)
And this is after the action ran successfully and did my job.
<br/><br/>

In case you want to check out this website. Here is the link: 
https://spandan-project.herokuapp.com/



### Submission Category: 

[Note]: # (Maintainer Must-Haves, DIY Deployments, Interesting IoT, Phone Friendly, or Wacky Wildcards)
DIY Deployments


### Yaml File or Link to Code

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github link_to_your_repo %}` to share a GitHub repository)
{% github https://github.com/spandanpal22/railway_reservation_sysytem_heroku %}


[Note]: # (Additional Resources / Info)

[Note:]: # (Be sure to link to any open source projects that are using your workflow!)

[Note]: # (Be sure to include the DEV usernames of your collaborators, if any. )

[Reminder]: # (Submissions are due on September 12th (11:59 PM PDT) and winners will be announced on September 23!)
Working on Github Actions - Update 1 (The Idea)
Tags: actionshackathon, github, opensource, javascript
Published: 2020-08-20 17:20:06

After checking out the [**Github Actions Hackathon**](https://dev.to/devteam/announcing-the-github-actions-hackathon-on-dev-3ljn), I started exploring more about GitHub actions and was amazed by learning the amount of power they possess.

In this post, I would like to share the idea on which I am working for this hackathon (This is not a submission)

# The Idea

![The Idea](https://dev-to-uploads.s3.amazonaws.com/i/t4746b3w9ykb5i4rbhv2.png)

# Current Progress

Right now, the action scans the backend javascript file for express API Calls and just console logs them on each push to the repository

 ![Current Progress](https://dev-to-uploads.s3.amazonaws.com/i/skahktebjlpqzewtu07d.png)

# Description

I plan to scan the backend server file for API calls and also scan the router routes for categorized API calls and then use the keywords get, post, etc to fetch the API call type. 

The backend file path, app variable name used can be given a custom input.

{% github Pika1998/express-autodocs %}

# Suggestions and ideas are most welcome 👨‍💻💖
Save time debugging Rails by automatically displaying params directly inside your views
Tags: ruby, rails, debug, tips
Published: 2020-08-20 17:13:43

Here's a fun and easy little trick. Let's throw a `debug(params)` into our view, and then we can see what our params are for every page! In Rails, this means seeing the controller/action for every page you visit as well as any dynamic content that was used for each view --- nifty!

### 1. Add the debug

First, let's head into our `application.html.erb` page and add it into our layout, in this case right under the footer:

```html
<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>
    <meta charset="utf-8">
    <%= render 'layouts/rails_default' %>
    <%= render 'layouts/shim' %>
  </head>
  <body>
    <%= render 'layouts/header' %>
    <div class="container">
    <%= yield %>
    <%= render 'layouts/footer' %>
    <%= debug(params) if Rails.env.development? %>
    </div>
  </body>
</html>
```

(While not absolutely necessary, our post-fix conditional `if Rails.env.development?` makes sure that if we were to accidentally push this guy into production we wouldn't see it!)

### 2. Add some style

The debug will be styled using `.debug_dump` class selector.  We can use a mixin from Sass called `box_sizing` to make this extra pretty. Head into your `app/assets/stylesheets/custom.css` file and drop this in:

```css
@import "bootstrap-sprockets";
@import "bootstrap";

$gray-medium-light: #eaeaea;

@mixin box_sizing {
  -moz-box-sizing:    border-box;
  -webkit-box-sizing: border-box;
  box-sizing:         border-box;
}

.debug_dump {
  clear: both;
  float: left;
  width: 100%;
  margin-top: 45px;
  @include box_sizing;
}
```

### 3. Results
Great! Now load up your `rails server` and check out your pages. You should see a beautiful little grey box with useful info about the page that is rendered; specifically, you'll see your page `params` in a pretty little YAML format!

![debug(params) makes a lovely little YAML!](https://i.imgur.com/mPDgcyL.png)


---

*Thanks go to Michael Hartl's excellent [Learn Enough](http://learnenough.com) series for this tip!*
How to install macOS X El Caption on Virtualbox
Tags: virtualbox, windows10, machinelearning
Published: 2020-08-20 17:12:29

When you try to install macOS on Windows PC. Then you know, that the best option is Virtual machine like Virtualbox or VMware.These two are the most used virtual machines in the world.
And more specific, the best one is virtualbox. it is a free and open source software by Oracle corporation. Therefore, most of people use virtualbox.
So, today we have brought the A to z guide on to use Virtualbox. And how to <a href="https://techvatan.com/">install macOS in Virtualbox</a> . And like this you will have macOS installed on your Windows OS.
the procedure is straightforward but lenghty.
But don't worry! we have explained the entire procedure extensively. Just visit the given link above. and follow the step by step procedure. and finally you can successfully do that.