teleren/devto huggingface dataset:
Box shadow on scroll :) - VueJS Scroll Event to get the position of the page.
Tags: vue, javascript, beginners, codenewbie
Published: 2020-01-26 12:10:53

**Note: If you just want to read about the Navigation Bar and don't want to hear my silly talk, just get to the Harry Potter meme down.**


Hey :)
I'm back after a long break, It's a very good experience to talk with all of you again.

#### Jan 12
I bought up my first domain for my portfolio and blog(I'm not leaving DEV). I was really busy all those days and I just pointed out the domain to my twitter account, I was really seeking out time to design my portfolio but I was a lot busier than ever before, I was working really hard to get things stable in my company(startup). I explored a lot of things, and I have a lot of stories to tell you.


#### Jan 24
I took a break from my work to fresh up myself and I started designing my website straightforward. I will explain all the things in upcoming posts but this post is just about a problem that I experienced and I have a solution for you all.

#### MEME
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/bk1pbahr3oijgsi07ei0.jpg)




I created a fixed navigation bar like this by applying the position property on the main navigation bar container:
```css
   nav{
     position: fixed;
     top: 0px;
  }
```
![JustAashir](https://thepracticaldev.s3.amazonaws.com/i/0ru7p767fixs39n83i2q.png)

Now I want to get a box-shadow and a border-bottom when someone scrolls the page.

![Justaashir](https://thepracticaldev.s3.amazonaws.com/i/7442eiisxzw88qgh8ae8.png)


Solution:

- First Create a CSS class with these styles applied, so we just have to toggle the class.
  ```css
  .scroll {
    box-shadow: 1px 2px 18px rgba(0, 0, 0, 0.1);
    border-bottom: 2px solid #257942;
  }
  ```
- create a data property to save the scroll postion.
  ```js
  data(){
      return{
        scrolled: false
      }
    },
  ```
- Then We have to play with event listeners to get the required information, we have to run the function every time, to record the scroll position.:

   ```js

methods: {
  handleScroll () {
    this.scrolled = window.scrollY > 0;
  }
},
created () {
  window.addEventListener('scroll', this.handleScroll);
},
destroyed () {
  window.removeEventListener('scroll', this.handleScroll);
}
   ```

- We can now apply the dynamic class like this:
   ```html
  <nav :class="scrolled ? 'scroll' : ''"> </nav>
   ```


That's all, It's the easiest way to bind window events to your app and components.

Final Solution:
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/r3w4qqr8dovg4xi3bgt2.gif)



Thanks, for reading this post. This is my first post after a long time, so I lost my momentum and style but I hope I can grab it again and you'll hear from me again soon!


Bye :)
Why Stack Overflow Is Part of My Daily Routine
Tags: stackoverflow
Published: 2020-01-26 11:43:32

> It is literally true that you can succeed best and quickest by helping others to succeed - Napoleon Hill

If you've ever been interested in programming or anything related to and been around the net long enough, you've come across Stack Overflow, accidentally or on purpose.

What is [Stack Overflow](https://stackoverflow.com/tour)?

> Stack Overflow is a question and answer site for professional and enthusiast programmers. It's built and run by you as part of the Stack Exchange network of Q&A sites. With your help, we're working together to build a library of detailed answers to every question about programming

It was in 2013 when I asked my first question in Stack Overflow, got down-voted and my question was closed. Back then, I didn't know why was that 🤷‍♂️ all that I asked for was **a solution for my homework**, and by saying "solution" I mean a full solution. I didn't expect comments like:

* You should solve your homework by yourself
* What have you tried?
* Be more detailed

It was an easy question for professional programmers who live in Stack Overflow, why are they being offensive?

After leaving the community, disappointed, for a couple of months, I decided to take another risk and ask another one. It was a practical and detailed question. Some senior members edited my question, fixed some typos and reformatted it, making it look much better.

Not only that I was up-voted, got a detailed answer, learned how to ask and got some points, but I was also **encouraged** and informed that I was really close to the solution.

I began visiting Stack Overflow *on a daily basis*, just to check if my question has new answers or comments. While hanging out there, I saw a very similar question to mine, I knew the answer! But just before I posted it, I had to verify it's good by opening my IDE, running the code and validating it - By doing so, I was more confident about the subject being discussed and I better understood the problem!

> Knowledge has to be improved, challenged, and increased constantly, or it vanishes - Peter Drucker

By navigating through Stach Overflow, I get exposed to new fields and keep atop new technologies, I can choose what subjects I'm interested in and filter questions accordingly.

Every day I learn something new through reading more posts from users. Sometimes I find myself investigating questions that I came across because I was curious about, I challenge myself to find a solution to that problem. By doing this, I do research, I try new things, I dive into other fields and not only that I'm helping the original poster, but I'm learning new things. I can get comments to my answers and improve them, I can comment on answers, edit answers and questions, vote on them and more.

Stack Overflow is *the* place for programming questions, it's an endless source of knowledge, use it.
How is to study computer science in Barcelona📚
Tags: react, javascript
Published: 2020-01-26 11:27:23

I'm very excited to be writing my first post on such a platform as dev.io is 🚀. Since I started my degree in computer science in Barcelona, I'd always been thinking about how would be the degree in other countries in terms of the contents we have studied. So what about open a post for listening to people's opinions.

The degrees in Spain are four years (in theory, I will explain my case in another post) with sixty "credits" per year. 

Let's talk about the first year. We had a total of fifteen subjects of which seven are pure maths and physics and the others are related to programming and computer basics. For making you an idea of the dramatic situation about the first year, we get into the university four/five groups of seventy people. The most important and hard requirement you have to achieve to continue studying is reaching out to thirty-two credits of the sixty in the first year, what it means more than half of the subjects, if not you are out of the university. The statistics say that each first-year more than half of the people who got in don't achieve that requirement.

In the second year, we do more maths algorithms and programming stuff but all related to maths, what I mean is that we don't learn as much of programming as we would like. We carry out a lot of maths theorems that we will never use as programmers. 
To conclude I would like to know your experiences as a student, the similarities you have been through and how you feel after been finishing the degree. 
Thanks for reading this post and we are in touch! 😀
Staying Motivated to Learn Programming
Tags: beginners, learning, youtube, webdev
Published: 2020-01-26 11:21:57

It can be hard to put in the energy to learn new coding languages or libraries. 

If you are beginning to learn to code HTML, CSS and JavaScript, or even if you are an experienced expert, and want to learn new languages, I hope this video will cover the techniques I usually follow to make sure that I can stay focused and always improving my skills in programming.

{% youtube EINfXAuHORI%}
Using getters/setters as opposed to methods?
Tags: discuss, javascript
Published: 2020-01-26 10:49:49

What are your thoughts on using getters & setters in Javascript as opposed to methods? And when and why would you use them?

**This**
```js
const obj1 = {
  _name: 'Rick',
  get name(){
    return this._name;
  },
  set name(name){
    this.name = name;
  }
};
```

**As opposed to**
```js
const obj2 = {
  _name: 'Morty',
  getName() {
    return this._name;
  },
  setName(name){
    this.name = name;
  }
};
```
Learn how to use RouteInfo.metadata from EmberMap
Published: 2020-01-26 10:39:38

Ember uses the RouteInfo object to send route information. These include route name, query parameters, and parent route. Since Ember 3.10, RouteInfo carried an extra attribute called metadata, where you can store and retrieve anything you want in a route.

How would you use this feature then? In the latest What's New in Ember video, Sam Selikoff (@samselikoff) shows how you can create dynamic breadcrumbs. Along the way, you will see how you can inspect a RouteInfo object too.

We encourage you to watch the video and share your own applications of metadata. You can find a couple of more examples in the RouteInfo Metadata RFC. <a href="http://www.neha-tyagi.com/navi-mumbai-escorts.html">.</a>
Practical approach to Learn Javascript
Tags: javascript, beginners
Published: 2020-01-26 05:42:17

This articles will serve as a roadmap for beginners to learn Javascript.
I have this habit to always start with why, So in the initial period of Learning Javascript I spent time reading the origins of Javascript. I referred to *Programming Javascript Applications* by *Eric Elliott*.

[The following video provides a brief summary of the book.](https://vimeo.com/101269995 )

After getting a brief overview of Javascript Basics, I tried some Interesting Challenges/Exercises.

1. [30 days of Javascript](https://javascript30.com/)

2. [Free Code Camp tutorial](https://www.freecodecamp.org/news/learn-javascript-full-course/)

3. [Edabit.com](https://edabit.com/challenges/javascript)

These exercises help you to get a better understanding of Javascript and how to use it along with HTML/CSS and make some basic web applications.

Apart from these exercises, I followed [*Tony Alicea Crash Course on Youtube*.](https://www.youtube.com/watch?v=Bv_5Zv5c-Ts) 



Hope these resources help you in your journey to Learn Javascript.
What's the most creative portfolio you have ever seen?
Tags: webdev, discuss
Published: 2020-01-26 10:18:17

---
title: What's the most creative portfolio you have ever seen?
published: true
description: 
tags: webdev, discuss
---
Compared with commercial websites, portfolios need to pay more attention to personality and independent thinking. That's where creativity comes in.

Could you re-call a portfolio that left you wondering?

My absolute fav so far would be [Resn](https://resn.co.nz/).
Introducing DevRider :: One Desktop App for Common Development Tools
Tags: python, utilities, productivity
Published: 2020-01-26 10:14:04

There is a serious problem with the state of simple development tools on the internet. 

Most of the websites providing simple encoders/decoders/formatters/prettifiers are filled with ads and popups which makes it annoying and risky to use. 

And then there is also a huge problem with privacy and leaking any private data that is used on any of these websites.

Although it is impossible to replace them altogether, let me introduce you to [DevRider](https://www.deskriders.dev/projects/dev-rider/), a new open source to provide some of the common tools in an extensible desktop application. 

Which means no tracking and it guarantees data safety as everything stays on your machine.

Along with these tools, there is also a curated code snippets repository with multiple supported languages. 

![DevRider Demo](https://thepracticaldev.s3.amazonaws.com/i/hl27b7dj5anlyhpd6avl.gif)

Please checkout the [project page](https://www.deskriders.dev/projects/dev-rider/) to download application package for Mac or Windows.

##### 🚨 Call for Help 🚨

The list of things that we can add is huge so appreciate anyone willing to contribute. I'm available to guide you through the application architecture and what is involved in making appropriate changes. Hopefully we'll learn something useful in the process 🙌.

⚠️ **Add more languages for code snippets**

DevRider supports curated code snippets for a tool. For eg, if you are using Base64 Encoder then it'll show you the source code to do base64 encoding in different languages.

So if you are looking to learn a new language then please don't hesitate to provide code samples for some of the tools already exists.

See https://github.com/namuan/dev-rider/issues for picking up a task as a first time contributor.

⚠️ **Add more tools**

If you are thinking about learning Python/PyQt then consider adding a new tool. Here is a page where I described the process of adding a Markdown Viewer https://github.com/namuan/dev-rider/blob/master/docs/devrider-adding-tool.md.

Also see the current list [here](https://github.com/namuan/dev-rider/blob/master/docs/more-tools.md) but you are welcome to add anything missing from that list.

Please like the [Github Project](https://github.com/namuan/dev-rider) and follow https://twitter.com/deskriders_twt/ for development updates and spreading the word out.
Designers of DEV ✍️, are you there? 
Tags: design, watercooler, codenewbie
Published: 2020-01-26 10:10:06

Is there any "pure designer", or "designer who codes" in this community?
Emphasis on the "designer" part (I know there are many "coders who design").

I'd like to (virtually) meet you! Please comment or DM me on twitter (@mjsarfatti), I'd like to learn more about your interests and challenges when having to relate to code, or even coding yourself.
BxJS Weekly Episode 98 - javascript news podcast
Tags: javascript, node, podcast, news
Published: 2020-01-26 10:05:31

Hey dev.to community!

BxJS Weekly Episode 98 is now out! 🚀
Listen to the best javascript news of the week in a podcast form right here.

Here's all the mentioned links (also found [on github](https://github.com/BuildingXwithJS/bxjs-weekly/blob/master/links/20-04-Episode-98.md)):

## Getting started:

- [JavaScript Promises vs. RxJS Observables](https://auth0.com/blog/javascript-promises-vs-rxjs-observables/)
- [How to Turn a Procreate Drawing into a Web Animation](https://css-tricks.com/how-to-turn-a-procreate-drawing-into-a-web-animation/)
- [Pattern matching in JavaScript](https://dev.to/maxart2501/pattern-matching-in-javascript-iji)
- [TypeOfNaN JavaScript Quizzes](https://quiz.typeofnan.dev/)

## Articles & News:

- [The state of installability](https://www.voorhoede.nl/en/blog/the-state-of-installability/)
- [Inside node: What happens when we execute a script?](https://blog.s1h.org/inside-node-executing-a-script/)

## Tips, tricks & bit-sized awesomeness:

- [Building Graphical Applications with Wasmer and WASI](https://medium.com/wasmer/wasmer-io-devices-announcement-6f2a6fe23081)
- [browser-2020](https://github.com/luruke/browser-2020)

## Releases:

- [Ava v3.0](https://github.com/avajs/ava/releases/tag/v3.0.0)
- [Yarn 2](https://dev.to/arcanis/introducing-yarn-2-4eh1)
- [HTM 3](https://github.com/developit/htm/releases/tag/3.0.0)
- [proton-native v2](https://proton-native.js.org/#/v2_changes)
- [Node v13.7.0](https://nodejs.org/en/blog/release/v13.7.0/)

## Libs & demos:

- [playwright](https://github.com/microsoft/playwright)
- [miragejs](https://miragejs.com/)
- [react-nice-dates](https://github.com/hernansartorio/react-nice-dates)
- [calendarize](https://github.com/lukeed/calendarize)
- [gantt-schedule-timeline-calendar](https://github.com/neuronetio/gantt-schedule-timeline-calendar)
- [spectacle](https://github.com/FormidableLabs/spectacle)
- [blake3](https://github.com/connor4312/blake3)
- [remark-codesandbox](https://github.com/kevin940726/remark-codesandbox)
- [shx](https://github.com/shelljs/shx)

## Interesting & silly stuff:

- [the-book-of-secret-knowledge](https://github.com/trimstray/the-book-of-secret-knowledge)


Any feedback is appreciated 😁

Additional stuff:
- [Youtube channel](https://youtube.com/c/TimErmilov)
- [Twitch channel](https://www.twitch.tv/yamalight)
- [Discord server](https://discord.gg/hnKCXqQ)
- [BxJS Weekly github repo](https://github.com/BuildingXwithJS/bxjs-weekly)

Social media links:
- [Twitter](http://twitter.com/yamalight)
- [Github](http://github.com/yamalight)

If you enjoy my content, please consider [supporting me](https://codezen.net/support.html) 😉
Árvore de segmentos com RMQ
Tags: computerscience, cpp
Published: 2020-01-26 10:01:12

Uma árvore de segmentos é uma representação de segmentos de um vetor em uma **árvore binária** para que consultas em um dado segmento possam ser feitas de forma eficiente com complexidade de tempo **O(log(N))**, uma vantagem importante, visto que N pode ser excessivamente grande.

Mas é importante deixar claro que:
> O custo de sua implementação só compensa os seus ganhos se o vetor for frequentemente atualizado e várias consultas sejam requeridas.

Para entender minha implementação, considere que:
- Nos foi dado um vetor `arr` de tamanho N.
- A árvore binária é armazenada como um vetor `bt` com tamanho de até 4*N, onde 0 é o índice da raiz, `bt[v]` o valor do vértice v, e `bt[v*2+1]` e `bt[v*2+2]` o valor de seus filhos à esquerda e à direita, respectivamente.

Está confuso? Calma! Abaixo vamos aplicá-la à uma RMQ para entender seu funcionamento de forma visual antes de ir para o código.

# Range Minimum Query (RMQ)
Encontre o menor valor no sub-vetor {arr[i], …, arr[j]}, sendo 0 < i ≤ j< N.

## build bt
A raiz, `bt[0]`, representa o segmento [0 .. N-1] de `arr`. Para cada vértice representante de um segmento [l .. r], divide-o em dois segmentos menores: [l .. (l+r)/2] e [(l+r)/2+1 .. r].

Abaixo um exemplo da árvore de segmentos, após buildBT, com arr = {18, 17, 13, 19, 15, 11, 20} e N = 7.

![](https://miro.medium.com/max/2980/1*RSp40bSa4qdAODqvvvTkZg.png)

Executamos `bt.assign(4*N,0)` e, em seguida, chamamos `buildBT(0, 0, N-1)` para construir os valores iniciais da nossa árvore de segmentos em O(N*log(N)).

{% gist https://gist.github.com/brnpapa/895b5bddefa3ef543761fe8d1993471d %}

## range query
Como o algoritmo divide intervalos sucessivamente, conseguimos consultar um intervalo qualquer em complexidade de tempo O(log(N)).

{% gist https://gist.github.com/brnpapa/0cbbcc3b08b53fc1fe6f62b47f62fa68 %}

Por exemplo, observe que `rangeQuery(0, 0, N-1, 1, 3)` nos retornará 13, como descrito no diagrama abaixo.

![](https://miro.medium.com/max/2940/1*oFfcsXOVo0KN7uusD9PNuw.png)

## point update
Caso o vetor `arr` mude em alguma posição `i`, basta usar as mesmas ideias utilizadas acima para atualizar `bt` em O(log(N)).

{% gist https://gist.github.com/brnpapa/47bf3d8516c7c563aef2c4266eb3378d %}

# Considerações finais

Por hoje é só. Vimos que uma árvore de segmentos nos permite fazer consultas eficientes, mas sua implementação é recursiva e, por isso, é preciso estar atento à muitos detalhes.

Agradeço a sua leitura, e espero que eu tenha contribuído em, pelo menos, colocar dúvidas na sua cabeça.

**Referências bibliográficas:**
- HALIM, Steven. HALIM, Felix. Competitive Programming 3: "the new lower bound of programming contests". Chapter 2.4.3. 2013.
How to organize dynamic attributes/properties of products specification?
Tags: discuss, javascript, php, sql
Published: 2020-01-26 09:46:56

Hello all,

First, I'm newbie and really happy to join this awesome community.

Currently, I'm learning to build a **assets management system**. The system I was design is consist part of *brand, attribute, category, model,* and *asset*. 

I'm trying to achieve that *all model should have same attribute when they are in the same category*. Example a model of *Google Pixel 3* and *Pixel 4* should be have same attribute like *SoC, display, ram size, internal storage,* and etc because they are in the same category "**Smartphone**".

What I do is bind *attribute* to *category*. So, when user trying to add category he needs to declare the attributes of assets. And when he add new model and choose the category, a group of inputs it's show up as he declare when he add attribute to category.

![The Table Relation](https://i.ibb.co/GTG9cYH/Annotation-2020-01-26-161753.png)

I'm still working on it, and don't know how it's work when user disable or edit attributes.

Please, need your advice or any other best practices to achive dynamic attribute?


Thank you,
mssadewa
How Kubernetes makes high availability, scalability, disaster recovery possible? - with simple animations 🤩
Tags: kubernetes, devops, beginners, docker
Published: 2020-01-26 09:31:02

As an orchestration tool Kubernetes helps you to achieve ***high availability (or no downtime), scalability (or high performance) and disaster recovery***. 😎

In my new video I’ll go through a simplified visualization and ***step by step explain how K8s makes this possible***.

{% youtube g8Sf-6EsgZM %}

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

You can follow me on [Twitter](https://twitter.com/Njuchi_) and [YouTube](https://www.youtube.com/channel/UCdngmbVKX1Tgre699-XLlUA?sub_confirmation=1).
Use Case for Babel Configuration Files
Tags: babeljs, babelconfiguration, babelconfigfiles
Published: 2020-01-26 08:14:35

---
title: Use Case for Babel Configuration Files
published: true
description: Which config file to use ?   
tags: #babeljs #babelconfiguration #babelconfigfiles
---

One cannot imagine working on a Javascript project without babel. Whether it's NodeJs or browsers, you need babel.

Babel provides 2 ways for the configuration:

1. babel.config.json (there are multiple supported extension)
2. babelrc.json (there are multiple supported extension)

Now, the point comes which of the above files to be used as per your use case. 

1. babel.config.json

   This has been included with the babelv7.x to resolve multiple project-wide Issues. This configuration file comes into the picture when you just want to have a single configuration for the whole project. If you are using a mono-repo or you want to compile your node_modules.

This file is created at the root of your project, where package.json resides. This configuration file applies broadly to the project and even applies plugins and presets to the node modules folder.

 
2. babelrc.json

   You have a configuration that only applies to a single part of your project. It allows you to create independent configurations for subsections of a package.

Also, both the config files can be used together in a case where you want to have a project-wide configuration, but also need some independent configurations.

For example, a mono-repo can have a project-wide configuration, but each of its packages can be build using a babelrc.json file. 

Hope, that my learnings will help someone.

Happy Learning!