teleren/devto huggingface dataset:
Importance and Disadvantage of Variable Fonts
Tags: veriablefonts
Published: 2019-10-01 11:00:22

Variable fonts openly support responsive web design in making websites as fluid as possible. They not only reduce the size of files, but also the number of HTTP requests made to a website. After decades of waiting variable fonts are finally with you.

For a while the thought of having adjustable web fonts was just an idea bouncing around developers. Fast forward and today it is a reality that every WordPress site is capitalizing on.

Origin of variable fonts:

The idea of having fonts that varied in shapes and style was thought about as far back as 1999. However, back then the internet was still a fresh reality in most people, and the web platform wasn’t quite conducive for such changes. Nevertheless, the groundworks were laid down, until when responsive web design became more of a necessity than a luxury for websites.

The first official launch of variable fonts was at an ATypl conference in Warsaw. Tech giants like Google, Apple and Microsoft converged, and they all agree to switch the name to OpenType Font Variations. The files were assigned the prefix .otf and the latest update now allows adjustment of letters in terms of width, length and height.

Concurrently, the Warsaw conference also served the purpose of introducing the new update to .otf files known as OpenType 1.8 spec.

Importance of variable fonts:

Variable fonts openly support responsive web design in making websites as fluid as possible. They not only reduce the size of files, but also the number of HTTP requests made to a website. The fonts update themselves in terms of screen size, help differentiate headers and content paragraph, and also improve kerning during web development.

Disadvantages of variable fonts:

Though OpenType files will be a game changer for web developers, they still have some disadvantages we cannot ignore. Many of these demerits stem from a developing platform that is yet to keep up with the font technology.

Currently, CSS3 has no integrated settings that support variable fonts. There are rumors of a CSS3 spec, but even this will have to come updated to fully work with new versions of .otf files. The other big issue is browser support for variable fonts. Though the likes of Google and Microsoft agreed on the important of .otf files, thy still haven’t implemented this new technology into their browser engines.

So we may have to wait a while longer for things to finally take shape. Nevertheless, at least technology found a way to make variable fonts a reality and is laying the foundation for a smoother future in web development.
MacOS file sort by name?
Tags: discuss, macos
Published: 2019-10-01 10:58:06

---
title: MacOS file sort by name?
published: true
description: 
tags: #discuss #MacOS
---
What type of sort order does MacOS finder use? When it's sorted by name, it sorts numbers first and then moves to alphabets. Also symbols have higher priority than numbers. Is there any algorithm that follows it?
Today's javascript interview questions
Tags: react, javascript, interview, webdev
Published: 2019-10-01 10:56:55

---
title: Today's javascript interview questions
published: true
description: 
tags: react.js, javascript, interview, webdev
---


```js
let a = [1, 2, 3, 4, 5];
a = a.map(item => item<3);
```

```js
let a = [1, 2, 3, 4, 5];
a = a.map(item => item<3);
```

```js
let a = [1, 2, 3, 4, 5];
a = a.some(item => item< 3);
```

which he told will return the mixture of `.map()` and `.filter()` 's result :D
 
- then question on writing a reducer function to return the sum of an array which I thnk I have wrote wrong

```js
const sum = arr.reduce((total, value) => total + value, 0);
```

## Redux
- are `Providers` a Higher Order Components? there was no mention of Consumer and he took the mention of consumer with regards to how react-redux `connect` function works instead of how it works in Context API 
- what is actions in Redux
- why is Reducer needed when we can directly mutate the state?

## React
- How much do you rate yourself in React :D :D :D :D
- What is portal in React?
- What are fragments in React?

## HTML
- How much do you rate yourself in HTML :D :D :D :D 
- What does HTML provide to do drag and drop? 
to which I only said I have used 3rd party libraries and never used the native solution provided by HTML. 
- Further question was how such libraries work behind the scenes and what code does it bring in to use HTML which I completely didn't know about.

Today's javascript interview questions. Honestly after giving many interviews I felt like this was a kiddy and useless interviews since I personally (don't know about generally) direct Google about such array methods to use. I pity and find it funny for myself that I couldn't answer upto the expectations, but because of the experience 

> I must say ***when someone asks you how much do you rate your self in this sexy tech library/feature***
you know its going to be a pretty bad interview.^(Doesn't apply to interviews in other countries I guess)
My Very First JavaScript Khan Academy Challenge
Published: 2019-10-01 10:51:00

5 years ago when I was just getting into programming world, I started with khan academy JavaScript. One of the challenge i got was to design a character. 
I thought of making something unique and searched kids drawing on google and found this frog image and started working my way through. 



![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/idhberbxwxjkdm14awsa.png)

After Completing the frog, I wanted to make it a little interactive. 

[View the project here](https://www.khanacademy.org/computer-programming/spin-off-of-project-ad-design/5581176423317504)

    var draw = function() {
       background(1, 0, 5);
       textSize(17);
       fill(97, 143, 125);
       text("The only limit is your imagination", 30, 82);
       var positionF = pmouseX;
       var eyeY = pmouseY;
       var eyeSize = 100;
       var eyeBall1 = 70;
       var eyeBall2 = 50;
       var eyeBall3 = 35;
       var eyeBall4 = 15;
       stroke(7, 61, 2);
       strokeWeight(5);
       fill(45, 135, 27);
       ellipse(positionF,eyeY+80,278,200);// face
       ellipse(positionF-75,eyeY,eyeSize,eyeSize);// left eye
       ellipse(positionF+75,eyeY,eyeSize,eyeSize);// right eye
       strokeWeight(2);
       fill(247, 250, 250);
       ellipse(positionF-80,eyeY,eyeBall1,eyeBall1);//eyeball 1 white
       ellipse(positionF+80,eyeY,eyeBall1,eyeBall1);//eyeball 1 white
       noStroke();
       fill(16, 204, 54);
       ellipse(positionF-76,eyeY+5,eyeBall2,eyeBall2);//eyeball 2 light green
       ellipse(positionF+76,eyeY+5,eyeBall2,eyeBall2);//eyeball 2 light green
       fill(0, 0, 0);
       ellipse(positionF-80,eyeY+10,eyeBall3,eyeBall3);//eyeball 3 black
       ellipse(positionF+80,eyeY+10,eyeBall3,eyeBall3);//eyeball 3 black
       fill(252, 249, 249);
       ellipse(positionF-89,eyeY+3,eyeBall4,eyeBall4);//eyeball 4 white
       ellipse(positionF+89,eyeY+3,eyeBall4,eyeBall4);//eyeball 4 white
       //face dots
       stroke(208, 219, 123);
       strokeWeight(10);
       point(positionF+17,eyeY+44);
       strokeWeight(7);
       point(positionF+36,eyeY+64);
       strokeWeight(10);
       point(positionF+-36,eyeY+61);
       strokeWeight(9);
       point(positionF+-11,eyeY+59);
       strokeWeight(12);
       point(positionF+-1,eyeY+33);
       strokeWeight(8);
       point(positionF+-24,eyeY+83);
       //Smile
       noFill();
       stroke(0, 0, 0);
       strokeWeight(10);
       arc(positionF,eyeY+40,227,208,34,146);
       strokeWeight(7);
       arc(positionF+182,eyeY+40,206,190,137,154);
       arc(positionF-182,eyeY+40,206,190,29,43);
       fill(86, 230, 14);
       textSize(39);
       text("Kiran Animations inc.", 30, 53);
    
    
        eyeSize = eyeSize+1;
    };

[Another work ](https://www.khanacademy.org/computer-programming/spin-off-of-project-crazy-painter/6363921338597376)
Things to do After Installing Ubuntu
Published: 2019-10-01 10:43:03

---
title: Things to do After Installing Ubuntu
published: true
description: Things will install after installing new Ubuntu
tags: 
---

I am PHP developer, so most of the tools below are my favorite ones:


## 1. Install Tweak  
[https://launchpad.net/ubuntu-tweak](https://launchpad.net/ubuntu-tweak)

## 2. Install Zsh  

```
sudo apt install zsh
```

```
$ sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"
```

This tool save bunch of time of typing. 

Cheatsheet:  

[https://github.com/robbyrussell/oh-my-zsh/wiki/Cheatsheet](https://github.com/robbyrussell/oh-my-zsh/wiki/Cheatsheet)  

## 3. Install Chrome  

- Sync all Chrome data.

## 4. Install Docker

I "dockerized" all my projects to Docker.

I am thinking about create a tool for automate docker-compose using python 
https://docker-py.readthedocs.io/en/stable/

## 5. Install coding tools:  

- PHPStorm
- Meld
- Visual Studio Code and its extension.

## 6. Create .ssh  

For get source code and connect to server. 

## 7. Common alias

- [https://laravel-news.com/laravel-homestead-aliases](https://laravel-news.com/laravel-homestead-aliases)
 
- [https://github.com/laravel/homestead/blob/master/resources/aliases](https://github.com/laravel/homestead/blob/master/resources/aliases)


Then let the hacking begin!
Need help - First coding interview in 2 weeks
Tags: help, javascript, java, angular
Published: 2019-10-01 10:37:14

Hi all!

I applied for a job recently for a big company and i managed to pass all the interviews so far, and I have the last one, the technical interview, in 20 days from today ... and I never been so lost.

I have 2 and a half year of professional experience in full stack development, and since im applying for a full stack position I have no ideia what questions and stacks should i focus the most, right now im looking questions and trying to solve some leetcode recomended questions, but most of them are looking kinda hard to me.

Any tips from recruiters or someone that went through the same process?
How to show context menu from NSButton in macOS 
Tags: swift, macos, appkit, button
Published: 2019-10-01 10:23:55

---
title: How to show context menu from NSButton in macOS 
published: true
description: 
tags: swift,macos,appkit,button
---

Use `NSMenu` and `popUp`

```swift
func showQuitMenu() {
    let menu = NSMenu()
    let aboutItem = NSMenuItem(
        title: "About",
        action: #selector(onAboutTouched(_:)),
        keyEquivalent: ""
    )

    let quitItem = NSMenuItem(
        title: "Quit Hacker Pad",
        action: #selector(onQuitTouched(_:)),
        keyEquivalent: ""
    )

    aboutItem.target = self
    quitItem.target = self

    menu.addItem(aboutItem)
    menu.addItem(quitItem)

    menu.popUp(
        positioning: aboutItem,
        at: bottomView.quitButton.frame.origin,
        in: bottomView
    )
}
```

Use [Omnia](https://github.com/onmyway133/Omnia)

```swift
let menuHandler = MenuHandler()
menuHandler.add(title: "About", action: {
    NSWorkspace.shared.open(URL(string: "https://onmyway133.github.io/")!)
})

menuHandler.add(title: "Quit Hacker Pad", action: {
    NSApp.terminate(nil)
})

menuHandler.show(from: self.bottomView.gearButton, in: self.bottomView)
```

Original post https://github.com/onmyway133/blog/issues/435
Looking for easy and reactjs, markdown contributions for Hacktoberfest?
Tags: hacktoberfest
Published: 2019-10-01 10:06:15

---
title: Looking for easy and reactjs, markdown contributions for Hacktoberfest?
published: true
tags: hacktoberfest, opensource
---

Looking for easy and reactjs, markdown contributions for Hacktoberfest?

https://github.com/10secondsofcode/10secondsofcode
BeautifulText - Stylized Outputs in Jupyter Notebook 
Tags: python, jupyter
Published: 2019-10-01 10:04:19

---
title: BeautifulText - Stylized Outputs in Jupyter Notebook 
published: true
description: Make your Jupyter notebooks prettier
tags: Python, Jupyter
---

A neat Jupyter trick is to be able to print markdown texts in your notebook. I have created a simple python module to generate beautiful text within the notebook.
Get the python script from Git [here](https://github.com/alephthoughts/BeautifulText).
Look at this Kaggle kernel for [demo](https://www.kaggle.com/abhisheksharma09/beautiful-text-utility-demo).
The Road to (Kenti)continuous Delivery
Tags: kentico, continuousdelivery, devops, deployment
Published: 2019-10-01 09:59:09

##Introduction
On Thursday the 19th of September I had the privilige to talk at the Kentico Connection in Brno about one of my favorite topics: Continuous Delivery. In my talk I gave a brief overview of Continuous Delivery and shared my experiences on how Continuous Delivery can be applied when you are doing Kentico development. 

![The Road to (Kenti)continuous Delivery](https://thepracticaldev.s3.amazonaws.com/i/ll6cta8rg150rfc9jsjh.jpg)

##Key takeaways
Please find below the most important points that I wanted the attendees to take away from my talk:

- **Apply a branching strategy that fits with Continuous Delivery.** Examples are <a href="https://trunkbaseddevelopment.com/">Trunk Based Development</a> or <a href="https://guides.github.com/introduction/flow/">GitHub flow</a>.
- **Differentiate files from code.** Move media (library) files to external storage (e.g. <a href="https://docs.kentico.com/k12sp/custom-development/working-with-physical-files-using-the-api/configuring-file-system-providers/configuring-azure-storage">Azure Blob Storage</a>) and consider using a best-of-breed solution like Azure Search.
- **Automate the deployment of Kentico configuration.** Prevent manual and error-prone release scripts. 
- **Seperate the release of functionality from the actual deployment.** Focus on deployable software and use feature flags (e.g. Kentico settings, Page type availability and/or settings, application/deployment slot settings etc.) to enable functionality (on demand) per environment. 

![Kontinuous Delivery](https://thepracticaldev.s3.amazonaws.com/i/5ynbp014mm3kzqyylsmv.PNG)

##Abstract and slides
This was the session description:
*Have you ever had to work long hours due to a deployment that took far too long? Did you feel stressed when one of the steps in the release script didn't go as planned? If so, this is the session for you! Join Kentico MVP Jeroen Fürst in this session and learn how to set up a Continuous Delivery pipeline for your Kentico MVC website. Jeroen will introduce you to the concept and teach you techniques that reduce deployment time from several hours to mere seconds. You will leave this session with the knowledge and ability to optimize your current deployment process and to bring your features to production without breaking a sweat!*

And here are the slides of my presentation:
{% slideshare FTaIcqSV0RHHvZ %}
My featured materials to prepare for job interview
Tags: career, architecture
Published: 2019-10-01 08:42:14

## My featured materials to prepare for job interview

- Jeff Erickson - Algorithms    (http://jeffe.cs.illinois.edu/teaching/algorithms/)
- Tech Interview Handbook   (https://yangshun.github.io/tech-interview-handbook/)
- AlgoDaily (https://algodaily.com/)
- hacker-laws	(https://github.com/solarrust/hacker-laws)
- reference-architecture	(https://github.com/wso2/reference-architecture)
- Курс по документированию API	(https://github.com/docops-hq/learnapidoc-ru)
- solutions-architecture-patterns	(solutions-architecture-patterns)
- The-Documentation-Compendium	(https://github.com/kylelobo/The-Documentation-Compendium)
- trekhleb/javascript-algorithms	(https://github.com/trekhleb/javascript-algorithms)
- Code Review Checklist: Java Concurrency	(https://github.com/code-review-checklists/java-concurrency)
- System design interview for IT companies	(https://github.com/checkcheckzz/system-design-interview)
- System Design for Tech Interviews	(https://www.hiredintech.com/courses/system-design)
- Awesome Software Design Patterns	(https://github.com/DovAmir/awesome-design-patterns)
- Solution Architecture	(https://github.com/unlight/solution-architecture)
- awesome-scalability	(https://binhnguyennus.github.io/awesome-scalability/)
- tech-interview-handbook	(https://github.com/yangshun/tech-interview-handbook)
- Questions to ask the company during your interview	(https://github.com/viraptor/reverse-interview)
- awesome-interview-questions	(https://github.com/MaximAbramchuck/awesome-interview-questions)
- system-design-primer	(https://github.com/donnemartin/system-design-primer)
- resumeworded.com	(https://resumeworded.com/)
Contributors Wanted: Mozilla Reps Mobile App
Tags: contributorswanted, hacktoberfest, help
Published: 2019-10-01 09:26:13

# Reps-Mobile aims to bring [Mozilla Reps](https://reps.mozilla.org/) to your mobile with the help of Flutter!

{% github https://github.com/obitodarky/Reps-Events-Mobile %}

Hey everyone! Few of my friends from the MozGujarat community have started working on a Mobile app for bringing [Mozilla Reps](https://reps.mozilla.org/) website to everyone's mobile devices a few months back. One can say it's a pretty new repo and still in the process of being fully flushed out.

They are looking for contributors that can help out with the same. They have issues up ranging from entry-level ones to intermediate ones that are up for grabs and will be posting more throughout the month.

Some of the issues, currently up are:
- {% github https://github.com/obitodarky/Reps-Events-Mobile/issues/42 %}
- {% github https://github.com/obitodarky/Reps-Events-Mobile/issues/36 %}
- {% github https://github.com/obitodarky/Reps-Events-Mobile/issues/21 %}
- {% github https://github.com/obitodarky/Reps-Events-Mobile/issues/39 %}

Do check out the [Repo](https://github.com/obitodarky/Reps-Events-Mobile) for more issues throughout October!

## How you can contribute
- Grab an available issue to tackle.
- Have an idea that isn't up in issues? Make an issue for the same and go ahead with it.
- Found a bug? Open an issue.

Feel free to reach out to me or [Harsh](https://dev.to/obitodarky) via DMs or in the discussion section below for any doubts.
{% user obitodarky %}

Have a great Hacktoberfest and Happy Contributing!
Frontend Architecture Decision making and checklist
Published: 2019-10-01 09:18:19

---
title: Frontend Architecture Decision making and checklist
published: true
description: 
tags: 
---


  Before getting started with the Architecture planning for a Front end development of a project. Things to be sure and Architect the code base accordingly
Here is the checklist to worth looking in to.

** This is the first set of thoughts **

1. **Responsiveness** (Web, Mobile etc)
	 Multi-Browser support (chrome, firefox, safari with versions)
     Is IE Support required?
 2. **Feature flagging** (A/B testing of a set of features for user groups based on location etc before releasing to all)
        https://dzone.com/articles/feature-flag-driven-development
  3. **Role-based access**
  4. **SEO** - Server-side rendering
  5. **PWA** - Mobile Web (Offline first, Network first) 
  6. **Realtime data sync** - Is realtime data syncing is required, in that case, we can think of Web socket or any other approach.
  7. **Security** - What are the security measures to be considered
  8. **Internationalization**
  9. **Accessibility** - 
         Accessibility is the practice of making your websites usable by as many people as possible. 		
  10. **Performance first** - 
        https://medium.com/yld-blog/performance-driven-development-c7fc030cc060
Help making White text Black when highlighted.

Published: 2019-10-01 08:57:24

I have been working on the CSS theme for our subreddit and cannot find out how to change our highlight. Please see the below example. Another issue would be at the bottom of our page the [prev] and [next] buttons are white on white. You can view our subreddit here. Any help fixing this would be greatly appreciated. Thank you!
https://reverseimagesearch.onl https://emailchecker.vip/ https://portchecker.pro/
My Top 10 Metal Tracks For Joyful Coding
Tags: music, todayilearned
Published: 2019-10-01 08:49:49

For me as a programmer and human being, music and coding go hand in hand. Even if we often times need to have conversations and talk to co-workers I can put my best game on with my headphones and some great tracks to listen to. Sometimes I need slow, atmospheric music to calm down, sometimes fast music to cheer me up. In this post I will show you my top 10 Metal tracks that always help me to get into flow and write high quality code. Maybe this will turn out into a series of posts for others genres as well.
Sidenote: These tracks are not necessarily what one would call mainstream but some gems I found one after another.

## Cyhra - Karma

{% youtube uvBjQ543l84 %}

## Orden Ogen - Fields Of Sorrow

{% youtube 7gagRay7VK8 %}

## Sabaton - 82nd all the way

{% youtube 0LS0Z8fgiII %}

## Ghost - Dance Macabre

{% youtube aGUwV0yS-L4 %}

## Brothers of Metal - Prophecy of Ragnarök

{% youtube iEV3mbS-HgY %}

## Dragonforce - The Last Journey Home

{% youtube a8tdDlqFqIw %}

## Gloryhammer - Universe On Fire

{% youtube gXzMD065HEk %}

## Dynazty - Breathe with Me

{% youtube I9EsYuDYwos %}

## Beast in Black - Blind and Frozen

{% youtube 2N4tXf3Ensw %}

## Battle Beast - Beyond the Burning Skies

{% youtube r6fS2pSPWrw %}



I would love to hear what you are listening to while coding, so please leave a comment and also follow me for more upcoming posts.
Javascript - Challenge: Brown bear eyes from khanAcademy -00009
Tags: javascript, beginners, deliaslan, khanacademy
Published: 2019-10-01 08:22:28

**Dependency of the shapes sizes and positions**
(with process.JS)
__x, y ve faceSize değişse dahi oran/orantı ve pozisyonları sabit kalacaktır.


noStroke();
var x = 197;
var y = 275;
var faceSize = 400;

// ears
var earSize=faceSize*1/2;
fill(89, 52, 17);
ellipse(x-faceSize*2/5, y-faceSize*2/5, earSize, earSize);
ellipse(x+faceSize*2/5, y-faceSize*2/5, earSize, earSize);

// face
fill(163, 113, 5);
ellipse(x, y, faceSize, faceSize);



//eyes 
fill(0, 0, 0);
ellipse(x-faceSize/4, y-faceSize/8, faceSize*1/8, faceSize*1/8);
ellipse(x+faceSize/4, y-faceSize/8, faceSize*1/8, faceSize*1/8);



//nose
fill(89, 52, 20);
ellipse(x, y+faceSize/8, faceSize*4/15, faceSize/5);
show your hacktoberfest progress
Tags: discuss
Published: 2019-10-01 08:06:57

---
title: show your hacktoberfest progress
published: true
description: 
tags: #discuss
---

As hacktoberfest has kicked in, many of you may have already started working with your PRs. Lets show them

## Heres mine:

![](https://i.imgur.com/EEAiI9f.png)