teleren/devto huggingface dataset:
TIL: cache-control is as inconsistent as it can get in different Browsers
Tags: webdev, optimization
Published: 2021-02-05 16:49:57

Today a colleague started asking questions on cache-control and how to achieve consistent behaviour so that he can control it from Server Side

Then another colleague pointed out a StackOverflow thread where the answer makes sense but raises a question on _**why do these differences exist?**_

{% stackoverflow 14842553 %}

I think I still don't understand it completely after this revelation.

I suggested that we can use Service Workers to intercept all requests and implement better caching strategy there.

In response, another colleague pointed out that SWs are not worth the work and the support is inconsistent.

which lead me to here: https://caniuse.com/serviceworkers

[![caniuse.com_serviceworkers](https://dev-to-uploads.s3.amazonaws.com/i/21ibhdpatb1gn8xcjl3r.png)](https://caniuse.com/serviceworkers)

> Which again raises this question what is best approach to control caches from server?
Bootstrap 5 Custom Badges
Tags: bootstrap, css, html, webdev
Published: 2021-02-05 16:49:47

Badges are mostly used for a show a piece of additional information is quick views. So here we made simple and custom Badges in bootstrap 5 and with the help of custom classes for background colors.

In a bootstrap have some examples for Badges in button, heading, Contextual, Pill, and links. But here we use custom colors in a different background color. This is a responsive Facebook page for mobile and tablets side.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

[Source Code](https://w3hubs.com/bootstrap-5-custom-badges/)
CSS Grumbles
Tags: css, webdev, design, javascript
Published: 2021-02-05 16:38:14

Developers and designers alike, have all felt the frustrations of styling with CSS at one time or another.

###Yeah, yeah so what do you know?
I am a full-stack developer with a passion for front-end development. I enjoy the finer points to pixel perfect layouts and I care about the user experience of my products.

###Ok, so you know a little something, what else you got?
I have many tools at my disposal for programming languages. From IDE’s (integrated development environments) like Visual Studio and Eclipse to editors such as Atom and Visual Studio Code.

Sure, each of these tools and many others have some kind of measures for handling CSS built in but there are few to none, real tools, dedicated to CSS. That has changed! [UglyDawgTools](https://uglydawgtools.com) has released a dedicated CSS tool for the Mac named, Vogue.

###You got my attention a little. Tell us more.
Vogue works in a similar fashion to a browser inspector in that you can show or hide properties and add or delete properties. What really gives Vogue the edge here, is all of the property information readily available right in front of you instead of having to go search the web.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bztg6fwojq2uoagojxdq.png)

Sure, there is tons of CSS information scattered across the web and there are even various CSS generators that can be used. Vogue has brought a lot this together into one simple tool. With HTML element templates, CSS generators, and the ability to save templates that you customize, Vogue delivers as a nice playground or can be easily used to create serious designs.

###Interesting but I need more.
After you have perfected your CSS design, Vogue gives you the ability to extract everything from just the CSS itself to the actual HTML page.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lmdzo47wj6uoldz34uws.png)

On top of just the mechanics, Vogue has almost all of the existing CSS properties from specifications 1 through 3. Mobile and desktop compatibility information, property descriptions, property examples, and property values all built in to the tool. Each property also has information links to Mozilla for deeper dives into each property for further info and in most cases even more examples.

###Any bonuses here?
Yeah, since you asked, this tool makes designing far easier because it has instant hot reload of property and value changes right in a webview versus, changing code and having to refresh a page.

There you have it. A new dedicated CSS tool! Check it out in the MacOS App Store.
7 Javascript Concepts to Master Before Any Framework / Library
Tags: javascript, react, beginners, webdev
Published: 2021-02-05 16:37:35

These are the 7 concepts I feel are most important to understand and learn any new JS framework or library.[Read the full article here](https://medium.com/codestory/7-js-concepts-to-master-a71f33d676f3?source=friends_link&sk=d1167b474cd431a75a35ca6d7f1e6d10)
Data Science And Machine Learning In JavaScript
Tags: javascript, datascience, machinelearning
Published: 2021-02-05 16:31:53

Machine Learning and Data Science in ... JavaScript?! Yes, that's possible. Python is not the only language that you can use to do that.

And here are some JavaScript libraries that will help you to do data science and machine learning with JS. Simply click the images to get to each respective website.

## TensorFlow.js

This is TensorFlow, with JS, yep. You'll get the ML TensorFlow experience using your favorite language: JavaScript. It uses some pretty clever tricks, like using WebGL and shader language to make things fast.

[![TensorFlow.js](https://cdn.hashnode.com/res/hashnode/image/upload/v1612541443480/U_6RXij0Y.png)](https://www.tensorflow.org/js)

## ML5js

ML5js is a wrapper around TensorFlow.js that provides an easy-to-use API. It aims at making ML in the browser more accessible to creatives, students, and artists. Definitely worth it if you don't want to deal with low-level details.

[![ML5js](https://cdn.hashnode.com/res/hashnode/image/upload/v1612541549488/bsOBY0BOA.png)](https://ml5js.org/) 

## Danfo.js

Danfo.js is basically Pandas but for JavaScript. It's built on top of TensorFlow and uses tensors under the hood. The experience is pretty great, and if you're comfortable with Pandas, you'll have an easy start here.

[![Danfo.js](https://cdn.hashnode.com/res/hashnode/image/upload/v1612541635210/JpZwV9Gzu.jpeg)](https://danfo.jsdata.org/) 

## D(anfo)Notebook

Imagine a Jupyter notebook, but for JavaScript, and meant to be used with Danfo.js. That's what DNotebook is.

[![D(anfo)Notebook](https://cdn.hashnode.com/res/hashnode/image/upload/v1612541715816/UMeNJn_7y.png)](https://github.com/opensource9ja/dnotebook) 

## TorchJS

TorchJS provides JS bindings for PyTorch. Its primary purpose is to import and run TorchScripts that have previously been created from Python code, but it also provides an incomplete API to work directly in JavaScript.

[![TorchJS](https://cdn.hashnode.com/res/hashnode/image/upload/v1612541811198/kFe1VgPXs.jpeg)](https://github.com/torch-js/torch-js)

## ml.js

This is the JavaScript answer to scikit-learn. You'll find anything you could potentially miss from scikit here, as well!

[![ml.js](https://cdn.hashnode.com/res/hashnode/image/upload/v1612541880509/dxukrPrJD.png)
](https://github.com/mljs/ml) 

## Before You Leave

If you liked this article, feel free to visit me on [Twitter](https://twitter.com/oliverjumpertz). I regularly post content there. It is basically the platform where you will find my content first before it lands on my blog or somewhere else.
Open-Source Contributors Needed!
Tags: laravel, vue
Published: 2021-02-05 16:14:30

Hello! I am working on building a FormBuilder similar to https://formbuilder.online/ but without jquery. I am in the early stages of development and would love some help.

If you're interested in contributing to an open-source project, then come join me in building this form builder.

https://github.com/jringeisen/laravel-vue-formbuilder

Things I'm planning to add:
- Converted to a package.
- More fields added such as radio and checkboxes.
- A way to render the form to make it usable.

Example of a use case:
I currently use the jquery form builder on a Saas product that I built which allows my users to create custom contact forms that they can then embed into their website to collect leads. My Saas product is built with Laravel and Vue.js so I'm trying to avoid jQuery which is why I'm building this project.

Any contributions that add value to this open-source project are welcome! So I look forward to hearing from anyone that wants to contribute.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nyqb5vb4lc9y7z8cdsad.png)
Install java in ubuntu using SDK
Tags: linux, java, devloper, sdkman
Published: 2021-02-05 16:30:41

Are you a java/kotlin Developer, it is very important to maintain all its java versions and use them accordingly and it is very hard and want to maintain it, then this video is for you.
In this video, I try to explain how sdkman helps us to install, maintain and use different JDK tools for the Linux system.

To install sdkman you require to run the below commands: 
curl -s "https://get.sdkman.io" | bash
source "$HOME/.sdkman/bin/sdkman-init.sh"

once sdkman verify its version using 

1.sdk version

you are ready to go, java is a single command from you let's grab it


1.sdk i java {version}

really done!!!

yes you are now if you want you can list all different version for java using 

1.sdk ls java

you can install another version on java too and to use that only run 

1.sdk use java {version}


In the next video, we saw how to configure your IDE.

Important Links: 
https://sdkman.io/
https://www.oracle.com/java/technologies/java-se-support-roadmap.html
https://youtu.be/ENFx_sZpHko
Welp, my first hackathon 
Tags: ideas, project, hackathon
Published: 2021-02-05 16:16:14

> I entered my first hackathon, Oh My. :open_mouth:

One of the communities that I am a part of sent out a flyer about a Hackathon. Hmm, hackathon... I'd love to try that. Hackathons always look fun, right? Why not give it a try? 

I dove in and registered. :dancers:

Now as a rusty newbie, how in the world do you find project ideas? The theme is Social Good. So, I may cater my project more toward the mental health arena because it seems so many people state they need help but aren't able to obtain help. 

My question for you, yes you :sparkles: 
How did you prepare or what helped you on your very first hackathon? 

I won't be working with a team, solo dolo. I'd love to hear feedback on how your first hackathon was and your skill level going into it. 
Thanks in advance for sharing.
Day 1: The Dev Journey Begins
Tags: devjournal
Published: 2021-02-05 15:14:12

## A Bit of Background
Hello world!
Well that wasn't as difficult as I had anticipated. To start, I am a mid-level developer (on paper) at a mid-western company, even though it doesn't feel that way sometimes. I am writing to the internet today because I had a revelation last night, as I stared at the snow falling around me, gently blowing against my window, that something in my life needed to change. That is where my journey to revamp my career started, and the decision to chronicle it all was made there.

## The Conditions
1. Everyday, I will list out what I plan to do for that day to progress myself forward. Consider it a form of accountability.
2. My goals will consist of something (virtually) tangible. Whether it be code, or an updated resume, etc. 
3. Each day I will post here what I just mentioned above.

## The Little Bit for Today
My goals for today are:
* Create this post (that was a gimme)
* Start the piece of literature we all love, Cracking the Coding Interview (CTCI), at least a chapter or two
* Do some work for my friend Willster on his app (I'll probably make a post about this)
Book Recommendation
Tags: books, database, algorithms
Published: 2021-02-05 16:13:00

* This book is one of the best book which helped me to understand huge importance of ALGORITHMS and this effect on the people who have made it.
* Huge importance of DATA STRUCTURES and value of Space and Time Complexity to reduce computation processing power which is the most costly very HIGH. 
* Many Algorithm are discussed in this book but most importance which I found interesting where
1. Secretary Problem
2. Parking Problem
3. Scheduling and Sorting Problem
4. Memory Cacheing
* Computers have compare very far in storing memory from Hard Disk to Solid State Drive But Still for computation purpose cost of this computation are very high hence many tech companies have bunch of Computer Scientist for algorithm performance enhancement.
* One of the interesting Example which was about amazon, have taken the concept of CDN (Content Delivery Network) and used that logic into Amazon e-commerce Warehouse are shipped to specific areas where people are searching the most product.
* Must Read : Programming Manger , Software engineer , Architect and Product Stake Holder

PS : It will surely boost your understanding and help to crack Big interviews.
Super Mario World Restored Original Soundtrack: Great Coding Music!
Tags: watercooler, music
Published: 2021-02-05 16:07:57

{% youtube ajYLHvFL0sU %}

This YouTube channel has all the songs. My first reaction is this is definitely good focus/coding music. If you played Super Mario growing up these tracks are likely familiar and non-distracting, but also highly enjoyable. I'm sure you've never heard these sounds so crisp.
Active class v-for
Tags: vue, vfor, active
Published: 2021-02-05 15:52:02

---
title: Active class v-for
published: true
description: How to toggle active class inside v-for?
tags: vue, vfor, active
cover_image: http://static-mag.itcher.com/mag/wp-content/uploads/2015/06/V-for-Vendetta.jpg
---
<p>v-for Vendetta 😄</p>

<p>Using v-for inside a template is pretty common within a Vue app. It can become tricky if you wanted to toggle an active class on the selected item only and not every item inside the loop. Let's see how…</p>

<p><strong>Template app.vue</strong></p>

```vue
<template>
     <div>
        <div 
        v-for="(item, i ) in items" 
        :key="i"
        :class="{ active: i === activeItem}"
        >
         // some looped items from data here
         // button for active toggle 
            <button @click="selectItem(i)"> {{item}} make item active </button>
        </div>
    </div>
</template>
```

<p>The above, we have a basic app.vue file template. A v-for looping over items with i set for the index. The class is then bound to active, only when the index is equal to the activeItem, will this equal true and produce the active class.</p>

<p><strong>Data and methods</strong></p>

```javascript
<script>
export default {
    data() {
        return {
            activeItem: null,
            items: ['mike', 'chris', 'bob']
        };
    },
    methods: {
        selectItem(i) {
            this.activeItem = i;
        },
    },
};
</script>
```

<p>First, we set the <strong>activeItem data = null</strong>.</p>

<p>Then we change this data with the selectItem method, which takes the index as a parameter and updates the activeItem to match the index of the clicked item. Now when we click on the first item, activeItem = 0, i = 0, therefor the first item will be given the active class, and the other items will not.</p>

<p>A pretty simple solution but works well, if possible you can change the data being looped over and store a isActive key and value and toggle this way also.</p>
Telegram uchun Python dasturlash tili uchun Bot yaratish
Tags: telegrambot
Published: 2021-02-05 15:46:25

Salom Hammaga! Bugun biz siz bilan birgalikda Telegram uchun Python dasturlash tilining Aiogram kutubxonasi orqali bot yaratishni ko'rib o'tamiz. Demak boshladik!!!
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/oguqg5f6xqz6aeg23dbv.jpg)
Operate Firestore data with robot account on server side
Tags: firebase, javascript, firestore, fireauth
Published: 2021-02-05 15:35:29

Firestore is good product. But when we operate to firestore from server side, that `firestore-admin` ignore rule and enable full access. It's scary point.

I came up with a rule-based way to access the firestore from the server side

### Warning

**This is PoC, I'm not try this in production.**

## Prerequirement

First, you need create service(robot) account on console.

## Sample Code

```js
const firebaseAdmin = require("firebase-admin")
const firebaseClient = require("firebase")
require("firebase/firestore");

// Paste your service account (create on prerequirement)
const serviceAccount = require( "./YOUR-SERVICE-ACCOUNT.json")

const firebaseConfig = {
  // YOUR FIREBASE CLIENT CONFIG
}

// Paste your service(robot) account id
const serviceAccountUserId = "YOUR_SERVICE_ACCOUNT_USER_ID"

const main = async () => {
  firebaseClient.initializeApp(firebaseConfig)

  firebaseAdmin.initializeApp({
    credential: firebaseAdmin.credential.cert(serviceAccount)
  })
  // Create custom token with admin
  const customToken = await firebaseAdmin.auth().createCustomToken(serviceAccountUserId)
  
  // Execute sign-in. You can fail write access when comment out next line.
  await firebaseClient.auth().signInWithCustomToken(customToken)
  
  const db = firebaseClient.firestore()

  // rule like...
  // match /auth/{someobj} {
  // 	allow read, write: if request.auth != null;
  // }
  const result = await db.collection("/auth").add({
    foo: "baz",
  }).doc
  console.log(result)

  // Failed Example:
  // const resultFailed = await db.collection("/auth-cant-write").add({
  //   foo: "baz",
  // }).doc
  // console.log(resultFailed)
}
main()
```

This will also help impersonate the user in server-side (like firebase-functions).
Spacemacs  #1:  পরিচিতি  
Tags: spacemacs, vim, emacs
Published: 2021-02-05 15:20:33

ইমেকস (Emacs) এবং ভিম ( Vim ) খুবই পুরনো এবং জনপ্রিয় দুটি টেক্সট এডিটর (Text Editor)। [Editor War](https://en.wikipedia.org/wiki/Editor_war) বললে সাধারণত এই দুটি এডিটরের মধ্যে কোনটি অধিক ভালো এই বিতর্কটিই উঠে আসে। দুটি এডিটরকেই আমরা আমাদের প্রয়োজন অনুযায়ী সাজিয়ে নিতে পারি (Customizable) এবং বিভিন্ন প্লাগইনসের মাধ্যমে আমরা এডিটরগুলোর কাজের পরিধি বৃদ্ধি করতে পারি (Extensible)। ইমেকস-এ Org mode এর মত অসাধারণ কিছু প্লাগইনস আছে অন্যদিকে ভিম-এর রয়েছে দ্রুত কাজ করার উপযোগী Key Bindings. এই দুই এডিটরের বিতর্কে Spacemacs উপসংহার টেনেছে এভাবে "The best editor is neither Emacs nor Vim, it's Emacs and Vim!".
[Spacemacs](https://www.spacemacs.org)  হচ্ছে Emacs এর একটি ডিস্ট্রিবিউশন। যেখানে Vim এর Key Bindings গুলো নিয়ে Emacs কে কাস্টমাইজ করে তৈরি করা হয়েছে একটি শক্তিশালী টেক্সট এডিটিং ইনভারমেন্ট।
Typescript can be confusing
Tags: typescript, webdev, codequality, javascript
Published: 2021-02-05 15:08:19

At Codesphere, we code mostly in Typescript, not necessarily because it is our favorite language, but because we found out that it made us the most productive.

To start off, here are some benefits of Typescript that make us more efficient:

* ability to code in the same language in both frontend and backend
* (mostly) great OO + types
* asynchronous code


However, recently I came across two very strange behaviors, (I know, they are common in the JavaScript Bubble) and I felt the urge to share them!


###1: ['1', '2', '10'].map(parseInt);

I came across this when I wanted to format some user input, convert it into numbers and put them in a chart.


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qw0lh9siscqdo1s6x0sm.png)

Don't believe me? Open up a console in your browser, paste in the following, and press enter.


`['1', '2', '10'].map(parseInt);`


This does not work, because map passes three arguments into `parseInt()` on each iteration. The second argument index is passed into parseInt as a radix parameter. So each string in the array is parsed using a different radix. `'2'` is parsed as radix 1, which results in NaN, `'10'` is parsed as radix 2, which is 3, and `'1'` is parsed as the default radix 10 because its index 0 is falsy.

###2: Inheritance of 'readonly' in Typescript

During a code review at Codesphere, my colleague Roman came across the idea to make methods readonly. What happened next left us a little confused.

It's actually not possible to make a method readonly, but it is possible to make a readonly property with a function type, which has the same effect.

Interestingly enough, it is not possible to assign the property again for instances of the same class, but it is possible to inherit a class and override the property, as well as, assign the property on an instance of a subclass.


```
class Roman {
    readonly jonas: () => void = () => console.log("huh?");
}

class Elias extends Roman {
    jonas: () => void = () => console.log("oh no, override works!");
}

const elias = new Elias();
elias.jonas(); // oh no, override works!
elias.jonas = () => console.log("oh no, assignment works too!");
elias.jonas(); // oh no, assignment works too!
```


That's all for now, I hope that you enjoyed the read! The support for TypeScript is one of the core features of Codesphere IDE. By the way - my name is Saji and I joined the Codesphere team because I love coding and our vision to improve the developer experience.

What is your experience with TypeScript? Feel free to share your story about the things you find confusing in TypeScript!
WIP Google Advanced Search in Natural Language
Tags: showdev, startup
Published: 2021-02-05 15:00:21


[![Natural Advanced Search for Google](https://img.youtube.com/vi/G9yjJd9HCM8/0.jpg)](https://www.youtube.com/watch?v=G9yjJd9HCM8)

(Click on the image to play the YouTube demo video)

Last week I created a [Twitter Chrome extension](https://dev.to/quantleaf/twitter-advanced-search-with-natural-language-kka) that lets you do advanced searches in natural language instead of using the syntax or UI. I got a lot of feedback on what I could continue with next, so for this week I decided to implement the same language technology on Google advanced search! The extension is in Chrome Store review now, and is expected to be released at some point next week!

[Source code](https://github.com/quantleaf/google-natural-advanced-search)

What do you think about the design, could I improve something? If there would be any features of Google you want to access by writing text, what would that be?

Have a great friday!
Marcus
No Ads on GoOnlineTools for users
Tags: showdev
Published: 2021-02-05 14:56:23

Hi,

We are back with the new update on GoOnlineTools 😍

Many developers using our tool for daily use. So we decided to give some Good features for regular users.

Now you can use any developer tools without advertisements. Not only this we added access for premium features and upcoming tools for regular users.

## New features for users

1. No Advertisements 
2. Access premium features 
3. Access upcoming tools

## Our popular developer tools

1. [Share code snippet](https://goonlinetools.com/snapshot/share/)
2. [Lua Beautifier](https://goonlinetools.com/lua-beautifier/)
3. [JSON Formatter](https://goonlinetools.com/json-formatter/)
4. [Lua Minifier](https://goonlinetools.com/lua-minifier/)
5. [Real-time HTML Editor](https://goonlinetools.com/realtime-html-editor/)
6. [Rich Text Editor](https://goonlinetools.com/rich-text-editor/)

Explore [all tools](https://goonlinetools.com/)

Check [wikipedia article](https://en.wikipedia.org/wiki/Goonlinetools) 

If you are using our tool then I recommend you to log in to access all these features that are exclusively available for regular users.