teleren/devto huggingface dataset:
Code split your libraries and polyfills
Tags: gulp, angular, babel, webdev
Published: 2020-06-26 12:38:26

This is part two of seven.

# Hack your legacy browsers
One of the things I like to do is to load polyfills only when they are needed. The way I do that is using the `nomodule` attribute.

```html
<script src="/scripts/polyfills.js" nomodule defer></script>
```
This will not load your polyfills in modern browsers 🙂

# Babel and duplication
We are using `gulp-babel ^6.1.2` in our project. The way it is set up it adds it's little helper functions to each file (e.g. for all classes `_createClass` is added).
This results in a lot of code duplication.
They way I worked around it, was to check those functions in the bundle for duplication and remove them.
```javascript
let lastMatch = false;
const checkMatch = (match) => {
    if (lastMatch === match) return '';
    lastMatch = match;
    return match;
};

gulp
    .src(src)
    .pipe(p.babel({
        presets: [[
            'env',
            {
                targets: {
                    browsers: pkg.browserslist
                }
            }
        ]],
        plugins: ['angularjs-annotate'],
        compact: true,
    }))

    // bundle it up.
    .pipe(YOUR BUNDLE FUNCTION)

    // remove babel dupicates
    .pipe(p.replace(options.removeDuplicates.yourStringToCheck, checkMatch))
    .pipe(...whatEverElse)
        
```
After that there should be only one instance of the helper function left.

# Extract libraries from your vendor bundle
Some of the libraries that we use are not used on every page. So it makes sense to split them into their own bundle.
The ones I extrapolated where:
- google maps markerclusterer
- swiper
- smartbanner (only load on mobile)

As we are using a C# MVC backend and have all bundles postfixed with a hash, we also needed to tell the frontend how they are called. In our case we made them accessible through a window environment object.

The only part that was left to do, was to load the scripts in the respective component/service before initializing them.

Here is an example of our swiper generator which returns a promise with the swiper after loading the script (if the script has been loaded the promise will resolve immediately):
```javascript
class SwiperGenerator {
    constructor(Env, ScriptLoader, Resize) {
        Object.assign(this, {
            _Env: Env,
            _ScriptLoader: ScriptLoader,
            _Resize: Resize,
        });
    }

    init(element, options) {
        return this._ScriptLoader.load(this._Env.loadWhenNeeded.swiper)
            .then(() => new Swiper(element, options));
    }

}

angular
    .module('YOURMODULE')
    .service('SwiperGenerator', SwiperGenerator);
```

# Coming up next
- find code duplications
- optimize services
- other shenanigans
JAVASCRIPT VS PYTHON
Tags: javascript, python, react, webdev
Published: 2020-06-26 12:31:10

Javascript and Python are arguably the two most popular languages today for programmers.
Let us compare the two respective programming languages.

* Javascript is good for building a website or native applications 
  whereas Python is good for data analytics,machine learning or 
  math-intensive operations.
* Javascript can be used to run on frontend whereas Python is on 
  server-side or backend.
* Python has procedural programming whereas Javascript does not 
  have procedural programming.
* Python is a better designed language which makes it easy to  
  maintain whereas Javascript is poor.
* Javascript is good for mobile development whereas Pyhton is not 
  good for mobile development.
* Javascript is faster to run as commpared to Python.
* Javascript runs on both server side as well as on browser, 
  whereas Python is mostly used for server side programming.
* Unlike Javascript, Python does not have a way to inherit from 
  instances.
* Javascript only has floating point numbers whereas Python has 
  different numeric types like int,float,fixed-point decimal,etc.
* Javascript uses curly brackets whereas Python uses indentations.
* Both these languages have their respective uses and in the end 
  it all comes down to personal preferences.
DAY 14:Exceptions
Tags: beginners, python
Published: 2020-06-26 12:28:34

An Exception is an error that occurs whenever there is something wrong with the code one writes or if there’s something wrong with the system one is working on. Usually we can identify an exception when a program crashes (stops working horribly, no programmer likes to see that) and in order to avoid that, we can write our program inside a **try-except** block. 

This means that we are preparing our program to handle any error that may occur so instead of a horrible crash, you will get a simple message letting you know what happened. 

The **try**-block is where you write the code that may cause an exception while the **except**-block is where we write the exception handling logic.

**The Task:**
Read a string, *S*, and print its integer value; if *S* cannot be converted to an integer, print **Bad String**.

```python
S = input().strip()
try:
    int_s = int(S)
    print(int_s)

except:
    print('Bad String')

'''
Sample Input 0

3
Sample Output 0

3
Sample Input 1

za
Sample Output 1

Bad String
'''
```
DAY 13: Abstract Classes
Tags: python, beginners
Published: 2020-06-26 12:24:12

The challenge was a continuation of classes just that it was dealing with abstract classes. **Abstract classes** are classes that have functions which have no body in them in simple terms, the functions are declared in that class but its functionality is not defined there and for the function to be executed, the derived class has to define its functionality. 

Python uses the **ABCMeta** class for defining abstract base classes and it has a decorator, **@abstractmethod** to indicate when there is an abstract method.

**The Task:**
Given a *Book* class and a Solution class, write a *MyBook* class that does the following:
• Inherits from *Book*
• Has a parameterized constructor taking these  parameters:
1.	string **title**
2.	string **author**
3.	int **price**
• Implements the *Book*class' abstract **display()** method so it prints these  lines:
1.	Title: , a space, and then the current instance's **title**.
2.	Author: , a space, and then the current instance's **author**.
3.	Price:, a space, and then the current instance's **price**.

```python
from abc import ABCMeta, abstractmethod
class Book(object, metaclass=ABCMeta):
    def __init__(self,title,author):
        self.title=title
        self.author=author   
    @abstractmethod
    def display(): pass


class MyBook(Book):
    def __init__(self, title, author, price):
        self.title = title
        self.author = author
        self.price = price
    
    def display(self):
        print(f'Title: {self.title}')
        print(f'Author: {self.author}')
        print(f'Price: {self.price}')


title=input()
author=input()
price=int(input())
new_novel=MyBook(title,author,price)
new_novel.display()

'''
Sample Input:
The Alchemist
Paulo Coelho
248

Sample Output:
Title: The Alchemist
Author: Paulo Coelho
Price: 248
'''
```
Who does Bug Triage?
Tags: discuss, productivity, management, webdev
Published: 2020-06-26 12:12:15

When customers call complaining about a bug, who does the work of finding the source of the problem?

Does customer support try to diagnose the bug themselves and forward it to a backend or frontend developer depending on their diagnosis? Do they pass it to a QA person to handle that? Does it go straight to the frontend developers, because the bug is visible in the UI regardless of the source?

How does your team do it? Do you have any suggestions?
Daily Developer Jokes - Friday, Jun 26, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-06-26 12:00:16

---
title: "Daily Developer Jokes - Friday, Jun 26, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Friday%2C%20Jun%2026%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12596ec99e0.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ What sits on a pirate's shoulder and calls, "Pieces of seven, Pieces of seven"?

___A:___ Parroty error.
 -->
Tips to improve productivity in developers
Tags: productivity, devpride, webdev
Published: 2020-06-26 11:55:53

 
 1) STOP WASTING TIME-   
    * Cut down on checking social media.
    * Turn off notifications.
    * Look for apps that limit your time on certain apps.


2) PLAN THE STRUCTURE OF YOUR PROJECT-
   * Chunk your work into smaller tasks.
   * Follow the workflow.
   * All projects are different, you may need different templates.


3) CODE FASTER-
   * Try using keyboard shortcuts.
   * Find tools that speed up your work.
   * Improve your typing speed.


4) DO NOT DRAIN YOURSELF-
   * Take small breaks at regular intervals.
   * Overworking can cause fatigue.
   * Breaks will clear up your stress to some extent.


5) FOCUS ON YOUR GOALS-
   * Try minimizing distractions.
   * Don't overthink and under-think.
   * Create a peaceful and productive work environment.


6) MAKE A DEADLINE-
   * It leads to more work being done in a limited time frame.
   * It helps in eliminating procrastination.


7) REGULAR PHYSICAL EXERCISE-
   * Regular physical exercise keeps body and mind healthy and the
     individual in harmony with nature.
Go - A moment of clarity.
Tags: go, theory
Published: 2020-06-26 11:51:10

---
title: Go - A moment of clarity.
published: true
description: 
tags: Go, theory
//cover_image: https://direct_url_to_image.jpg
---

Salutations all,

I have been digging in to a book called Introducing Go by Caleb Doxsey (published by O`Reilly) which had an exercise to create  a small program which put 5 values in to a 5 value array. The trick was then to find the average by adding the five values then divide it by five.

It was here I had a moment of clarity, whilst i was copying the text from the book, I thought to myself:  "What if there is more or less than five items in the array? I would need to change a few lines to reflect this in the program. Is there a way to make this simpler?"

Now I am not a developer, I'm a Sysadmin who dabbles in occasional Python with the help of Google and StackOverflow with dreams of developing really useful software to automate my job so I can sit back and sip cocktails and let my automations manage themselves. So there are two things about me questioning the script that I'd like to highlight.

1, My question was then echoed in the next paragraph of the book. It then talked me through making it simpler.

2, I am actually learning about programming theory as well as how to wield some code in Go.

My question to the Dev community is - have you ever had such moments of clarity about your develop maturity?
Using Google & Stack Overflow is great for the dirty jobs but actually reading a book that explains things with some depth of theory are pretty priceless.
Escape SQL LIKE wildcard characters
Tags: sql, csharp
Published: 2020-06-26 11:38:33

In MSSQL, [LIKE](https://docs.microsoft.com/en-us/sql/t-sql/language-elements/like-transact-sql?view=sql-server-ver15) operator has wildcard characters that aids in pattern matching.

If you want to disable it, one way is to manually escape it. In my case, I made a string extension to transform the search text before passing it to the stored procedure via ADO.

SQL recognizes which character to escape if it was enclosed in `[]` with the exemption of single quote `'`.

```csharp
public static string EscapeSqlChars(this string input)
{
	return input
		.Replace(@"[", @"[[]")
		.Replace(@"\", @"[\]")
		.Replace(@"'", @"''")
		.Replace(@"%", @"[%]")
		.Replace(@"_", @"[_]");
}
```
Read more discussions [here](https://stackoverflow.com/questions/439495/how-can-i-escape-square-brackets-in-a-like-clause).
All Reserved keywords in JavaScript
Tags: javascript
Published: 2020-06-26 08:16:35

The spec for [ECMAScript 2020](https://www.ecma-international.org/ecma-262/11.0/#sec-reserved-words) says:

> A reserved word is an IdentifierName that cannot be used as an identifier.

These are the reserved keywords specified in [ECMAScript 2020](https://www.ecma-international.org/ecma-262/11.0/#sec-reserved-words):
```js
break case catch class const continue debugger default delete do else
export extends false finally for function if import in instanceof new
null return super switch this throw true try typeof var void while with
```

Keywords which are reserved only in certain contexts:
```js
await yield
```

Keywords which are reserved only if strict mode is on:
```js
arguments eval let static
```

There are a few keywords which are not currently used in the spec but are set aside for use as a reserved keyword in future specifications, they are:
```js
enum implements interface package private protected public
```

Apart from the above there global properties which act as reserved keywords. These are read-only or immutable in global scope:
```js
Infinity NaN undefined
```

There are also a few keywords like `async` which are not reserved and can be used as identifiers.

Fin.

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

Next post is going to be about `strict mode` in javascript.
I have taken up a challenge to post good-to-know stuff in JS for thirty days. Please follow me [@zlfnhmd](https://twitter.com/zlfnhmd) for updates and to show some love❤️❤️❤️
javaScript – Replace all occurrences of a forward slash in a string
Tags: javascript, webdev, codenewbie
Published: 2020-06-26 11:28:06

---
title: javaScript – Replace all occurrences of a forward slash in a string
published: true
date: 2020-06-26 11:20:54 UTC
tags: javascript,webDev,codeNewBie
canonical_url: https://rajeshdhiman.in/replace-all-occurrences-of-a-forward-slash-in-javascript/?utm_source=rss&utm_medium=rss&utm_campaign=replace-all-occurrences-of-a-forward-slash-in-javascript
---



Today I learned an easy solution to replace all occurrences of a forward slash in string in javascript. I had to convert an URL to a string in another format, so initially, I tried `str.replace()` method like 

    str.replace('/', ":");

But to my surprise, it only replaced the first occurrence in the string. 
Then I thought oh I might need to use a regular expression. But I failed to make a regular expression, I always do. 
But then I find a much simple way.

    str.split('/').join(':') 


Let me know if you find it useful.
Code O Game - algorithms, datastructures, etc..
Tags: java, javascript, go, rust
Published: 2020-06-26 11:20:11

![](https://i.imgur.com/rwEgByj.png)
Hi guys! 
I built a repository to have in a single place all possible algorithms and data structures - in multiple languages. 

We aim to achieve this in a collaborative manner, so feel free to contribute in any way you want, just make sure to follow the contribution guidelines listed below.

Don't be lazy and contribute now. [repository](https://github.com/CodeOGame/coding-expert)

Feel free.
15 VUE JS Project Ideas: Beginner to Expert [With tutorial]
Tags: vue, codenewbie, beginners, tutorial
Published: 2020-06-26 11:16:52

Developers’ love towards Vue js is increasing every day. As a React developer and I want to stick with React js. But after I saw many devs are loving and telling good things about the Vue, I feel like I need to look up and learn it. So I’m planning to learn it. You can think of this whole list as my learning list to be an expert in Vue from a beginner. Comment out if I am missing something!

But the way, I want to tell every junior who just wants to learn Vue. First, learn why Vue was created. What problem is solved also you can see an amazing documentary of Vue js – 

{% youtube OrxmtDw4pVI %}

# 15 Vue js Projects (1 Bonus)

### Starter Project ideas

#### [Countdown](https://www.youtube.com/watch?v=Q_fLx2KcoYA+)
#### [Todo App](https://www.youtube.com/watch?v=-X2hP9pOVss)
#### [Calculator](https://www.youtube.com/watch?v=m1_ih43p24s)
#### [Weather App](https://www.youtube.com/watch?v=JLc-hWsPTUY)

### Intermediate Project ideas

#### [Quiz App](https://www.youtube.com/watch?v=y7dh6NrwlPI)
#### [Music App](https://www.youtube.com/watch?v=BPyniDJ5QOQ)
#### [Customer Manager](https://www.youtube.com/watch?v=IUgstalu6zo)
#### [Spotify UI Clone](https://www.youtube.com/watch?v=w5GQcHxJH1w)

### Advanced Project ideas

#### [Library Website](https://www.youtube.com/watch?v=FdC4Mjljd3k)
#### [Dashboard](https://www.youtube.com/watch?v=cUSfL6MBmlY)
#### [2D Multiplayer Game](https://www.youtube.com/watch?v=JEYEpledOxs)
#### [Chat Website](https://www.youtube.com/watch?v=ifOzAyR1cG4)

### Expert project ideas

#### [DevMeetUp Website](https://www.youtube.com/watch?v=FXY1UyQfSFw&list=PL55RiY5tL51qxUbODJG9cgrsVd7ZHbPrt&index=2&t=0s)
#### [E-commerce Website](https://www.youtube.com/watch?v=UrUuvNyK-Os&list=PLB4AdipoHpxYPjGo0n2m6tmCLud_iSEbv&index=2&t=0s)
#### [Trello clone](https://www.youtube.com/watch?v=DGPfCT5dDQE)
#### [Reddit Clone](https://www.youtube.com/watch?v=UjX5ZE359ck)

I know it’s a huge list but thanks for reading this whole thing! Share this with your friends to help them!

Here Instagram version of the post –

{% instagram CB5ShGhlHIK %}

I’ve started a programming community on discord. Click to join [Discord Channel](https://discord.gg/uDj2JtH)

I've two free PDF for you
- [Learn JavaScript in 30 Days](https://blog.nerdjfpb.com/javascript-in-30-days-free-pdf/)
- [Node JS In 30 Days](https://blog.nerdjfpb.com/node-js-in-30-days-free-pdf/)


Originally it published on [nerdjfpbblog](https://blog.nerdjfpb.com/project-ideas-for-vue-js-beginners-to-expert/).

I've two free pdfs for you
- [Javascript in 30 days](https://blog.nerdjfpb.com/javascript-in-30-days-free-pdf/)
- [Node js in 30 days](https://blog.nerdjfpb.com/node-js-in-30-days-free-pdf/)

You can connect with me in [twitter](https://twitter.com/nerdjfpb) or [linkedin](https://www.linkedin.com/in/nerdjfpb/) or [instagram](https://www.instagram.com/nerd_jfpb/)  !
How to Write GraphQL Queries with WayScript
Tags: graphql, tutorial, wayscript
Published: 2020-06-26 10:59:18

Introduction
------------

Integrating GraphQL into your workflow is easy with wayscript. With our prebuilt module, all you need is the url of the server you're writing your query against & your own GraphQL code. Let's take a look at how we can easily query an API with information about countries and their calling codes.

Working with GraphQL
--------------------

Our new GraphQL module let's you write graphQL queries directly in our editor. Let's take a look at how to set this up. We'll create a new script and place the graphQL module as the first step of our workflow.  
  

![](https://cdn.wayscript.com/blog_img/110/1.png)

  
  
To configure it, we'll need a few things. We'll need the URL in which we want to send our request to, the GraphQL query, and the headers we want to send with the request. In the below example we want normal JSON, from a server which provides country calling code data.  
  

![](https://cdn.wayscript.com/blog_img/110/2.png)

  
  
There are a few advanced options should you need them as well. We can set the number of retries we want to send should the query be unsuccessful the first attempt and if JSON is the preferred request method. The code we're using in this example looks like this:
<pre> query { 
    CallingCode { 
        name 
        countries { name } 
         } 
}
</pre>

Using the GraphQL Return
------------------------

GraphQL will return the specified response, the default being displayed with a struct type object within WayScript. Here's the example response in this example:  
  

![](https://cdn.wayscript.com/blog_img/110/3.png)

  
  
We can access these values within wayscript in other modules. These wayscript variables are part of what makes it so fast to develop solutions using our platform.

Looping & Conditional Statements
--------------------------------

Let's say we wanted to loop through our response, looking for countries only with a certain calling code. This is easy to do using a loop and an if statement module:  
  

![](https://cdn.wayscript.com/blog_img/110/4.png)

  
  
The Loop we can set to loop oer each object within our dictionary type object. The if statement we can set to look for the certain desired calling code.  
  

![](https://cdn.wayscript.com/blog_img/110/5.png)

  
  

Questions, Feedback?
--------------------

As always, if you have any questions, comments, feedback, or suggestions, please let us know on WayScript or through our [discord](https://discord.gg/VWbXSbj). The script used in this tutorial can also be found [here](https://wayscript.com/user/derricks/S_qrNUw8).
Swaggerhub how I can document that an Accept header with a specified value is nessesary in order for a successfull api calls?
Tags: help, swagger
Published: 2020-06-26 10:47:25

Hello I try to document an existing Api in Swagger. The Api requires both headers:

* `X-Access-Token`
* `Accept` with value `application/json; version=public/v2`

As I ask here:

{% stackoverflow 62593055 %}

Do you know how I can document that `Accept` header is required with a specified value?

Also in my API's the request header `Accept` is different from the