teleren/devto huggingface dataset:
W3C confirms: WebAssembly becomes the fourth language for the Web 🔥 What do you think?
Tags: webassembly, javascript, performance, discuss
Published: 2019-12-17 15:34:53

<b> World Wide Web Consortium (W3C) brings a new language to the Web as WebAssembly becomes a W3C Recommendation.
Following HTML, CSS, and JavaScript, WebAssembly becomes the fourth language for the Web which allows code to run in the browser. </b>

---------------

<h3>5 December 2019</h3>

The World Wide Web Consortium (W3C) announced that the WebAssembly Core Specification is now an official web standard, launching a powerful new language for the Web. WebAssembly is a safe, portable, low-level format designed for efficient execution and compact representation of code on modern processors including in a web browser.

*“The arrival of WebAssembly expands the range of applications that can be achieved by simply using Open Web Platform technologies. In a world where machine learning and Artificial Intelligence become more and more common, it is important to enable high performance applications on the Web, without compromising the safety of the users,”* - declared Philippe Le Hégaret, W3C Project Lead.


<h5>High-performance applications relying on a low-level infrastructure</h5>
At its core, WebAssembly is a virtual instruction set architecture that enables high-performance applications on the Web, and can be employed in many other environments. There are multiple implementations of WebAssembly, including browsers and stand-alone systems. WebAssembly can be used for applications like video and audio codecs, graphics and 3D, multi-media and games, cryptographic computations or portable language implementations.

<h5>WebAssembly enhances Web Performance</h5>
WebAssembly improves Web performance and power consumption by being a virtual machine and execution environment enabling loaded pages to run as native compiled code. In other words, WebAssembly enables near-native performance, optimized load time, and perhaps most importantly, a compilation target for existing code bases.

Despite a small number of native types, much of the performance increase relative to JavaScript derives from its use of consistent typing. WebAssembly leverages decades of optimization for compiled languages and its byte code is optimized for compactness and streaming. A web page can start executing while the rest of the code downloads. Network and API access occurs through accompanying JavaScript libraries. The security model is identical to that of JavaScript.

Read the Full article [<b>here 👉 published on W3.org</b>](https://www.w3.org/2019/12/pressrelease-wasm-rec.html.en)

<h4>What do you think about this huge change? 🤔 </h4>

I am sharing one awesome talk from Lin Clark about WebAssembly.

{% youtube HktWin_LPf4 %}

Cheers!
:wave:

As I am trying to contribute contents on the Web, you can buy me a coffee for my hours spent on all of these ❤️😊🌸
<a href="https://www.buymeacoffee.com/destromas" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;" ></a>
Sign in with Google Button 🎯🪁
Tags: google, html, css
Published: 2020-02-25 16:12:50

---
title: Sign in with Google Button 🎯🪁
published: true
tags: google, html, css
---

A few months ago when I am started learning 👨‍💻 [Web Development](https://www.eduonix.com/web-development-css3-scratch-till-advanced-project-based/UHJvZHVjdC0xMzE1MDIw) from [Eduonix](https://www.eduonix.com/web-development-css3-scratch-till-advanced-project-based/UHJvZHVjdC0xMzE1MDIw) I was super curious about this Google button ⛈. I have tried several times to create it on my own but I was failed 😢😭 many times because I confused at google logo image in button but today you can see my little achievement here on my code pen. 

It is like a motivation 🧘‍♂️ for me in my Dev journey that's why I am sharing this with our Dev community 👨‍👨‍👦‍👦👨‍👨‍👧‍👧👩‍👩‍👧‍👦👨‍👦. Hey, guys if you faced something like this situation in your journey please comment below it will increase our productivity lit bit more.

{% codepen https://codepen.io/atulcodex/pen/QWbdMrP %}
Angular Developer Roadmap
Tags: angular, angular7
Published: 2020-02-05 07:42:11

---
title: Angular Developer Roadmap
published: true
date: 2019-12-04 14:32:42 UTC
tags: Angular,angular7
canonical_url: https://codesquery.com/angular-developer-roadmap/
---

Angular has become one of the most famous frameworks for frontend development. Angular is backed by the tech giant Google who also used it in all their web application. These days demand for the angular developer is increasing and it is very necessary to have a roadmap for the newbies so that they can become [...]

The post [Angular Developer Roadmap](https://codesquery.com/angular-developer-roadmap/) appeared first on [CodesQuery](https://codesquery.com).
Reading Snippets [41 => Ruby ] 💎
Tags: ruby, rails, beginners, computerscience
Published: 2020-02-02 05:10:00



"Computer science is never tied to a programming language; it is tied to the task of solving problems efficiently using a computer. Programming languages come and go but the essence of computer science stays the same. The core goal of computer science is to study algorithms that solve real problems." 









<kbd><small>Source:<a href="https://learning.oreilly.com/library/view/computer-science-programming/9781449356835/onedot1_what_is_computer_sciencequestion.html">Computer Science Programming Basics in Ruby
</a></small></kbd>
11 NPM Commands Every Node Developer Should Know.
Tags: npm, node, codenewbie, beginners
Published: 2020-04-28 15:08:23

#### 1. Create a package.json file
```bash
npm init -y # -y to initialize with default values. 
```

#### 2. Install a package locally or globally
```bash
npm i package # to install locally. i is short for install
npm i -g package # to install globally
```

#### 3. Install a specific version of a package
```bash
npm install package@version
```

#### 4. Install a package as dev dependency
```bash
npm i -d package # -d stands for --save-dev i.e install as dev dependency
```

#### 5.To see all the dependencies of your project
```bash
npm list # this will list all the dependencies of the third-party modules as well
```

#### 6. To see direct dependencies of your project
```bash
npm list --depth=0
```

#### 7. To see the information about a package in your project
```bash
npm view package
```

#### 8. See specific information from package.json of a third-party package like dependencies of the package
```bash
npm view package dependencies
```

#### 9. To check different versions available for a package
```bash
npm view package versions
```

#### 10. Check outdated packages in your project
```bash
npm outdated # run with -g flag to check globally
```

#### 11. To update the packages
```bash
npm update
```

I hope this helps. Let me know if you use any other commands that can be helpful.

Thanks for reading. 😀
How to Undo Last Commit and Keep Changes
Tags: git, beginners, tutorial
Published: 2020-04-30 03:06:26

To undo the last commit but keep the changes, run the following command:

```
git reset --soft HEAD~1    
```

Now when we run `git status`, we will see that all of our changes are in staging. When we run `git log`, we can see that our commit has been removed.

If we want to completely remove changes in staging, we can run the following command:

```
git reset --hard HEAD
```

These are dangerous commands and should be used with caution. Try it out on a different branch first. However, in the worst case scenario, we can recover commits we accidentally deleted with `git reflog`.
5 Tips for Overcoming Coder's Block 
Tags: devlive, codepen
Published: 2020-07-01 16:43:53

TL;DR
1. Use a sandbox
2. Get a cheat-sheet
3. Take a quickstart
4. Break down the problem
5. Mix 'em up

## Intro
Usually, developers experience a block. During the block period, they don't write any useful, reasonable code. This block may be due to tiredness. You may have been coding for days without breaks. But when you can't code because you have no idea on how to approach the problem, then these tips are for you.

## 1. Use a sandbox
Sandboxes are great because they help you immediately flesh out some code. Most times, they are separate from your project. This means your old code doesn't weigh you down. Some great sandbox environments are:
1. [Codesandbox](https://codesandbox.io/)
2. [Codepen](http://codepen.io/)
3. [Repl](http://repl.it/)
4. [Glitch](https://glitch.com/)

The ability to download your modules and packages in no time is a big plus.

## 2. Get a cheat-sheet
When using new technology, you may need a general overview, but are too lazy to watch a crash course (it happens). You need to read a cheat sheet. 
Google "{insert technology name} cheat sheet filetype:pdf". You don't have to include the `filetype:pdf` if you don't need the cheat-sheet in pdf format.

A cheatsheet would show you the big picture. No crash course can beat that (my opinion).

## 3. Take a quick start
Consider using a **quick start** if your first instinct is to consume an intro video. You should experiment once in a while. Go to the docs of the technology and check up the quick start. Most modern, well-documented projects have a quick start. A quick start would get your hands dirty in the shortest time while referring you to links in the docs. If the docs are terrible you can stick with whatever method suits you 🙂.

## 4. Break down the problem
How can you ever solve a problem without breaking it down? This is a fundamental part of problem-solving. 

Say you want to add state management to an app with several levels of state. You can begin by sketching the state-flow among the key components. 

Another way is to create a new markdown file with title `how to implement feature-x`. This is pseudo-coding. It is a great way to think about logic before syntax. Your brain would be more prepared to face the problem at hand. 

I recently discovered that draw.io has a VsCode extension. You can use draw.io right from your favourite editor. If you are a visual-oriented thinker, this extension is for you. If you aren't, still consider diagrams of state-flow and logic. Using flowcharts doesn't mean you're a noob.

## 5. Mix 'em up
So, you have these four tips and still not sure how to start? Mix them up. You could start with **tip 4**, then **tip 2**. it all depends on your use case. Don't slack like a potato when you have the power not to. 

A worthy mention is rubber ducking which is talking to a rubber duck about your logic or bug. Note: The object you talk to doesn't have to be a rubber duck. It could be your coffee mug.

Thanks for reading.
Animated Login Form 2020 tutorial using HTML & CSS Flexbox only [video format]
Tags: css, html, beginners, tutorial
Published: 2020-05-06 23:11:15

{% youtube 1DWJ65XP-zs %}

In this tutorial, we'll create an awesome **Animated Login Form using HTML & CSS Flexbox only**. This project is suitable for all especially **beginners**. We'll also use **CSS transitions** which allow us to change property values smoothly, over a given duration.
Mid Meet Py - Ep.6 - Interview with Steve Dower
Tags: python, chat, communities, irl
Published: 2020-05-07 01:22:16

---
title: Mid Meet Py - Ep.6 - Interview with Steve Dower
published: true
description: We meet in the middle of the day in the middle of the week to chat about Python news. Interview with Steve Dower, Python tools developer at Microsoft and core CPython developer
tags: python, chat, communities, IRL
---
PyChat (Python news):

[Pydata UK joint meetup with multiple chapters in UK yesterday, awesome talks about TensorFlow Probability and How to expend Pandas capabilities](https://www.meetup.com/PyData-Manchester/events/270272244/)

[Global Pydata conference calling for organizing committee](https://twitter.com/dontusethiscode/status/1257907697141329926)

[PyData Dublin starting with a round of Monday talks from the 18th](https://www.meetup.com/PyDataDublin/)

[Release of Napari `0.3.0` with many new features](https://napari.org/docs/release/release_0_3_0.html)

[Naomi Ceder is the first keynote speaker announced for EuroPython](https://twitter.com/europython/status/1257680784384831489)

[Learning aid for Vim](https://vim-adventures.com/) Learn Vim while playing a game

Py Hall of Frame:

Interview with Steve Dower, Python tools developer at Microsoft and core CPython developer

[Follow Steve on Twitter](https://twitter.com/zooba)

PyPI Highlight:

[Napari - fast, interactive, multi-dimensional image viewer for Python](https://github.com/napari/napari)

[Kedro - a best-practice scaffold for ML and DS pipelines](https://github.com/quantumblacklabs/kedro)
Converting Excel to PDF in Java Application 
Tags: excel, java, pdf
Published: 2020-05-07 06:09:03

PDF is a portable document format that cannot be easily edited or modified. So sometimes when we send Excel files to others and don’t want the important formulas to be viewed or modified, we will convert the Excel to PDF. This article will demonstrate two methods to convert Excel to PDF by using Free Spire.XLS for Java:
(1) Convert the whole Excel workbook to PDF.
(2) Convert a single Excel worksheet to PDF.

**Installation**
**Method 1:** You need to download the [Free Spire.XLS for Java](https://www.e-iceblue.com/Download/xls-for-java-free.html) and unzip it. And then add the Spire.Xls.jar file to your project as dependency.
![](https://user-images.githubusercontent.com/63445660/81258850-2ed68d00-9069-11ea-927c-11db90113036.png)
**Method 2:** If you use maven, you can easily add the jar dependency by adding the following configurations to the pom.xml.
```java
<repositories>
        <repository>
            <id>com.e-iceblue</id>
            <name>e-iceblue</name>
<url>http://repo.e-iceblue.com/nexus/content/groups/public/</url>
        </repository>
</repositories>
<dependencies>
    <dependency>
        <groupId>e-iceblue</groupId>
        <artifactId>spire.xls.free</artifactId>
        <version>2.2.0</version>
    </dependency>
</dependencies>
```

**The Excel test document including two worksheets:**
![](https://user-images.githubusercontent.com/63445660/81258957-6e04de00-9069-11ea-9162-f2274df37941.png)

**Example 1：
Spire.XLS for Java offers a method of workbook.saveToFile() to save the whole Excel workbook to PDF in Java.**

```java
import com.spire.xls.*;

public class ExcelToPDF {
    public static void main(String[] args) {
        //Load the input Excel file
        Workbook workbook = new Workbook();
        workbook.loadFromFile("Input.xlsx");

        //Fit to page
        workbook.getConverterSetting().setSheetFitToPage(true);

        //Save as PDF document
        workbook.saveToFile("ExcelToPDF.pdf",FileFormat.PDF);
    }
}
```
![](https://user-images.githubusercontent.com/63445660/81259013-91c82400-9069-11ea-98cc-8966e486c57f.png)

**Example 2:
Spire.XLS for Java offers a method of worksheet.saveToPdf() to save a single Excel worksheet to PDF in Java.**

```java
import com.spire.xls.*;

public class ExcelToPDF {
    public static void main(String[] args) {
        //Load the input Excel file
        Workbook workbook = new Workbook();
        workbook.loadFromFile("Input.xlsx");

        //Get the second worksheet
        Worksheet worksheet = workbook.getWorksheets().get(1);

        //Save as PDF document
        worksheet.saveToPdf("ToPDF2.pdf");
    }
}
```

![](https://user-images.githubusercontent.com/63445660/81259058-aad0d500-9069-11ea-86c7-317374648787.png)
Quick Demo! Two months of building.
Tags: showdev, postgres, supabase
Published: 2020-05-07 11:57:31

Now in [Supabase](https://app.supabase.io):

- Set up Postgres in less than 2 minutes
- Auto-generated APIs! (they are a bit flaky, go easy)
- Query your database directly from the dashboard
- Analyze your queries and make them faster :rocket:

## Important Notes

1/ Supabase is NOT production ready. Have a play around and let us know what you think. We don't track ANYTHING (although we do store your github name and email). We'd like to keep it that way, so we rely on your direct feedback to steer our product roadmap.

2/ We are free to use while we're in alpha thanks to the generosity of Digital Ocean's startup program. But the funds aren't unlimited - please shut down the database when you're done :pray:.

3/ The database takes about 2 minutes to build. It's worth it, we promise. If you've ever wanted use Postgres, we're the easiest in the market.


## Follow for updates

At Supabase, we're building some amazing tools that make Postgres as easy to use as Firebase. Some of the things we're working on:

#### Simple interface 
Why are database interfaces so hard to use? The Supabase team has built products for 70-year-olds, so we're confident we can make something easier for developers:
![Interface](https://dev-to-uploads.s3.amazonaws.com/i/b4o39am95zcl5vl54j75.png)


#### Connectors
Send realtime database changes to other systems, like queues or webhooks (Slack notifications!):
![Connectors](https://dev-to-uploads.s3.amazonaws.com/i/aom5r917s792cc081bbz.png)



#### And more

- ⚡ Realtime listeners! Subscribe to your database just like you would with Firebase.
- 🤖 Instant RESTful APIs that update when you update your schema. Supabase introspects your schema and updates your API and documentation.
- 📓 Auto-documentation for your APIs and Postgres schema. What's better than documentation? Documentation that you don't have to manually keep up to date.

We'll announce all our future features with more freebies here on DEV first. Follow us so that you don't miss out.

![Follow](https://dev-to-uploads.s3.amazonaws.com/i/jf7adc5e3kbdu4luxvt4.gif)

And make sure to star us on github! 
[https://github.com/supabase/supabase](https://github.com/supabase/supabase)

Note: this was originally "One month of building", but I'm going to round up to 2 months. We started Supabase in January, and the work on the platform started mid-March.
the #1 Ruby benchmarking tool you didn't know you need
Tags: postgres, rails, ruby, heroku
Published: 2020-05-09 16:50:41

Attention web developers working with lots of data - below are first class problems to consider:

- slow database queries
- page time outs

When customer support barks at you to resolve a 500 error, what do you do? Initial instincts suggest the two problems are related. Especially in applications with lots of user data. 

Here's step #1.. your only dance move for Ruby benchmarking: `Benchmark#realtime`

Here is an example from my day job at [Kajabi](kajabi.com): *CX gets assigned with a customer support ticket. They log into Kajabi's super admin dashboard to search for the customer (a User). The page returns a 500 error and it doesn't render.*

![page timeouts](https://media.giphy.com/media/wZmCr7odNxKP6/giphy.gif)

You want to know how long it's taking to retrieve the user. That's the first step to ensure you're going down the **right rabbithole.**

```Ruby
$ Benchmark.realtime { User.search("Sharon Jackson") }
=> 22.409309996990487
```

The result is the elapsed time. Searching a user cost 22 seconds! yikes.

Heroku has a threshold of 30 seconds before it fails to load a page. Postgres caches our first request so that subsequent requests read from a cached result. Heroku does this to ensure quicker response times.

I went and recorded how long it took before the page timed out. Approximately 22 seconds. Down the rabbithole you go from there.
My first post as a Storyblok ambassador
Tags: amp, tailwindcss, node, storyblok
Published: 2020-05-07 20:33:52

{% tweet 1258410263021342720 %}

🎉 I'm officially an ambassador at Storyblok 🎉

I wanted to share it with you, I'm very excited, it's the technology that has allowed me to create [my blog](https://www.dawntraoz.com/blog/) and being part of it is a dream come true 😍

In this article, I show you how to build a valid AMP layout to your Express.js app using Storyblok stories. Also, I show you how to add TailwindCSS in AMP and keep it valid.

Check it out at [How to use TailwindCSS, Express.js and Storyblok for AMP powered websites](https://www.storyblok.com/tp/tailwindcss-express-js-amp-sites).

I hope you like it 🥰

Any feedback you have will be welcome, and don't worry, I'm still working on the dashboard with TailwindCSS, news soon! 🦾

Thank you for reading me 💜
Add Serverless Functions to Any Static Site
Tags: netlify, serverless, node
Published: 2020-05-08 02:34:03

---
title: Add Serverless Functions to Any Static Site
published: true
description: Quickly add a serverless backend to any static site, including React, Vue, or other SPA static sites.
tags: netlify, serverless, node
---

Adding just a bit of backend functionality to your Netlify-hosted static site is a perfect use-case for serverless functions. Let's get up and running!

## Why?

Whether you want to keep a third-party or proprietary API key or secret from being shipped to the browser, or you just need a little server-side functionality, a serverless function can bridge the gap.

## Prepare Your Project

**First, we need to make sure our project is hosted on Netlify.**

Let's connect our project to a Netlify and get set up using [Netlify Dev](https://www.netlify.com/products/dev/), which will allow us to test our functions locally:

1. Create a Netlify account if you don't have one already.
2. Ensure you have the Netlify CLI installed locally. You can do this by running `npm i -g netlify-cli`. If you run into a permissions issue, check out the [NPM docs](https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally) on the issue.
3. Authenticate with Netlify by running `netlify login`.
4. Initialize your Netlify project by running `netlify init`. This will create a site on Netlify and associate your project with that new site.

### Configure a Functions Directory

**Now that we're set up with a Netlify project, we need to tell Netlify where to find our functions.**

1. Create a new directory at the root of your project. I typically name this directory something like, `/api`.
2. Create a config file to tell Netlify where to look for your functions:

```toml
# netlify.toml

[dev]
    functions: '/api'
```

### Create a Function

**Now that Netlify knows where to look for our functions, we can write our first one!**

Create a new file in the `/api` directory:

```js
// testy.js

exports.handler = async (event, context) => {
  return {
    statusCode: 200,
    body: JSON.stringify({
      message: 'yup, it works'
    })
  }
}
```

### Test Locally Using Netlify Dev

**With our function created, let's make sure it works!**

1. Start your dev server by running `netlify dev`. You may need to [choose or configure](https://github.com/netlify/cli/blob/master/docs/netlify-dev.md#netlifytoml-dev-block) a start command.
2. Visit [http://localhost:8888/.netlify/functions/testy](http://localhost:8888/.netlify/functions/testy)

### Deploy

If your local function is working correctly, go ahead and deploy it to Netlify with `netlify deploy`!

---

Thanks for reading! Need some help? Feel free to [reach out](https://twitter.com/briansw).