teleren/devto huggingface dataset:
What do you think about nested styles in Styled Components?
Tags: discuss, styledcomponents, css
Published: 2020-01-06 11:09:53

---
title: What do you think about nested styles in Styled Components?
published: true
description: 
tags: discuss, styled-components , css
--- 
For example I have nested styled component for a navbar like this
```
const Navbar = styled.nav`
    // some style 
    .logo{ 
        // logo style 
    } 
    .nav-items{ 
        //nav-items styles 
    } 
    .nav-item{ 
    // list styles 
}`
```

I am only defining one styled component and using that as a base to style other elements of the navbar with nested style. Sometimes the nested style inside the styled components gets very large with many classes which might be difficult to read. 
I looked at [spectrum code](https://github.com/withspectrum/spectrum/blob/alpha/src/views/channel/style.js) and found that they almost never nest style inside styled component. Is it a bad practice to use nested style inside styled component? Should i create styled component for each elements like logo, nav-items? What are your thoughts?
tauri.studio
Tags: webdev, rust, tauri, opensource
Published: 2020-01-06 11:07:35

We're happy to announce that we launched the website for tauri, which you can find here: 

### https://tauri.studio
You'll find an introduction about how Tauri has been designed to let you use your current web framework to make tiny and really secure apps - and you don't even have to know rust to profit from it.

### https://tauri.studio/en/patterns
We've also included some comparisons between common patterns that you can use to build your apps, like my personal favourite, the Kamikaze pattern:

![Kamikaze Pattern](https://thepracticaldev.s3.amazonaws.com/i/vmgelwr0mzzh5iz1wsjv.png)

### https://tauri.studio/en/security
There is also a pretty thorough writeup of our security posture and some of the things we've got in the pipeline.

### Documentation
For the time being, we are hosting our docs as a GitHub wiki, so if you just want to dive in, please check it out here:

https://github.com/tauri-apps/tauri/wiki


---
Tauri is an MIT licensed FLOSS project that you can contribute to! 
- Join a working group at [Discord](https://discord.gg/SpmNs4S)
- Make a donation via [Github sponsors](https://github.com/sponsors/nothingismagick) or [opencollective](https://opencollective.com/tauri)
- Just try it out and give us your feedback
Improve Your Singing Voice
Published: 2020-01-06 10:56:04



Improving your singing voice. here is never a time in a singer's life where you shouldn’t aim to sing better, perform better onstage and continuously work on improving your craft. Even the top singers in the world are always working on how to improve their singing so that they stay the best!
B
Trust me! Learning to become a great singer isn’t a sprint – it’s a marathon, and by following this guide and learning the correct ways to improve your singing you are setting yourself up with the necessary foundations to ensure you have a long and lasting career.

Sometimes singers can get in the mindset that it’s all about the singing and make the mistake of thinking that the way to improve your singing is to sing more. This is somewhat true – YES practice is important (more on that later) but so is rest when it comes to training your voice to sing. 

Your voice is a muscle and just like when you go to the gym your muscles need rest days, this is also true for your vocal chords. Remember to give yourself a day of rest so that your body can relax and not be in a constant state of strain.

https://thestudiomentor.com/how-to-improve-your-singing-voice-in-a-week/
Top 05 Best illustrations packages for your projects right now in 2020
Tags: tutorial, webdev, javascript
Published: 2020-01-06 10:53:48

Illustrations are great when you want to express, convey or instruct something and over the past few years, you must’ve noticed the rise in the trend of web developers, app developers using illustrations for their project or for creating project wireframe.

Now along with that bloggers and digital marketers and many companies have also joined this trend.

Particularly, this trend is quite popular because, it makes website, app or any social media post interactive. This interactive nature is only achieved when you use appropriate illustrations according to appropriate situation. This way the textual information becomes less and that is replaced by illustrations.

Which brings more emotions to your social media post or any project.
TO CONTINUE READING- https://krayoncraft.com/top-05-best-illustrations/
Multiple PWA on the same website
Tags: pwa
Published: 2020-01-06 10:51:46

Now I will show how to publish 2 PWA within the same domain. This app randomly generates Yes or No.

![Yes or No decision maker](https://thepracticaldev.s3.amazonaws.com/i/qiub3o3b7whd7gp52i3g.png)

##First PWA

The first application is – [Yes / No Wheel](https://igenerator.net/yes-no-decision-maker/wheel-spinner/).

First you need to create a manifest.json

```javascript
{
    "name": "Yes or No Wheel",
    "short_name": "Yes / No Wheel",
    "start_url": "/yes-no-decision-maker/wheel-spinner/",
    "scope": "/yes-no-decision-maker/wheel-spinner/",
    "display": "standalone",
    "background_color": "#607D8B",
    "theme_color": "#607D8B",
    "description": "Yes or No? Spin the wheel to decide.",
    "icons": [{
      "src": "/img/icons/pwa_48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "/img/icons/pwa_96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/img/icons/pwa_144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/img/icons/pwa_192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/img/icons/pwa_512.png",
      "sizes": "512x512",
      "type": "image/png"
    }]
  }
```

Then we create a service worker

```javascript
const cacheVersion = 'v1';
const urlsToPrefetch = [
  '/yes-no-decision-maker/wheel-spinner/',
];

this.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(cacheVersion).then(function(cache) {
      return cache.addAll(urlsToPrefetch);
    })
  );
});


this.addEventListener('fetch', event => {
  let responsePromise = caches.match(event.request).then(response => {
    return response || fetch(event.request)
  });

  event.respondWith(responsePromise);
});
```

Now we connect the manifest.json

```html
<link rel="manifest" href="https://igenerator.net/yes-no-decision-maker/wheel-spinner/manifest.json">

```

Register service worker

```javascript
if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('/yes-no-decision-maker/wheel-spinner/sw.js', { scope: '/yes-no-decision-maker/wheel-spinner/' }).then(function(registration) {
          console.log('Service worker registration succeeded:', registration);
        }).catch(function(error) {
          console.log('Service worker registration failed:', error);
        });
      } else {
        console.log('Service workers are not supported.');
      }
```

##Second PWA
Second application – [Yes / No Button](https://igenerator.net/yes-no-decision-maker/button/). We do by analogy as in the first case, replacing only the URL and the name of the application.
Disable footer on Office 365 Communication Sites
Tags: powershell, office365
Published: 2020-01-06 10:37:20

Microsoft, by design, released many features on the new SharePoint sites on Office 365.
One of these features is a footer for the Communication sites.

But if you just have a footer in your design or you want to add another footer, you can easily remove the default functionality with a simple script.

First of all, you need the latest version of PowerShell PnP.
You can install it with the following command from a PowerShell terminal instance:

**Install-Module SharePointPnPPowerShellOnline**

Now you can run the following script to disable all footers in all Communication sites.
Remember to change the first variable with your tenant name.

The script automatically retrieves all sites filtered by the Communication site template and disable the footer.

{% gist https://gist.github.com/kasuken/70e3cabd073f652006726f5968136c0e file=DisableFooter.ps1 %}

You can find the script on my Gist account: https://gist.github.com/kasuken/70e3cabd073f652006726f5968136c0e

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/z2kn6btslmxoi6alst5w.gif)
AWS AI & Machine Learning Podcast — Episode 4
Tags: aws, machinelearning, podcast
Published: 2020-01-06 21:04:13

---
title: AWS AI & Machine Learning Podcast — Episode 4
published: true
date: 2020-01-06 10:20:58 UTC
tags: aws,machinelearning,podcast
canonical_url: https://medium.com/@julsimon/aws-ai-machine-learning-podcast-episode-4-4c35bce7869d
---

### AWS AI & Machine Learning Podcast — Episode 4

In this episode, I have a chat with Pavlos Mitsoulis-Ntompos, a Data Scientist for the Expedia Group and an AWS Machine Learning Hero. We talk about real life ML, and what it takes for ML projects to be successful.

> Video episodes are available on my [YouTube channel](https://www.youtube.com/juliensimonfr).

> Audio episodes are available on [Apple Podcasts](https://podcasts.apple.com/us/podcast/aws-ai-machine-learning-podcast/id1492801210), [Spotify,](https://open.spotify.com/show/1argBtYSeSksGU8dcW4TAS) [Deezer](https://www.deezer.com/show/756292), and more. Visit my [audio podcast page](https://julsimon.buzzsprout.com/) to subscribe and be notified of future episodes.

{% youtube kMOSH6CBjGw %}
Clean Code Handbook Chapter 1 Summary
Tags: codequality, testing, books
Published: 2020-01-06 10:14:22

Hey all! 

I recently started reading "Clean Code A Handbook of Agile Software Craftsmanship" by Robert C. Martin [link to the book on Amazon](https://www.amazon.com/Clean-Code-Handbook-Software-Craftsmanship/dp/0132350882/ref=sr_1_1?keywords=clean+code&qid=1578251590&sr=8-1) and I thought I would share what I have been learning I believe there are other conclusions you can have from reading this book, the book was highly recommended to me and so far I have not been disappointed.

In the first chapter, the author is trying to help us understand why we need clean code and what clean code is.

The author sells us on the idea that *bad code* can kill companies because one of the issues with bad code is that once we start with bad code we continue to pile on more bad code which makes fixing bugs harder which eventually makes the application unusable and not and not worth fixing, so then the companies dedicate resources to make a new application that does the same as the old one but then that one is done in a rush with “bad code” and we end up in a never-ending loop of bad code unless we break it and start writing clean code.

Now we get into the what is clean code part of this chapter, here the author asks other famous programmers and teachers how they would describe “clean code” I will not get into all of those here (they are really great but can get too long for this format)so I will try to give a short description that will be inclusive of most of the main points.  

A few of the adjectives used to describe clean code are *elegant*, *readable* and *straightforward* when the author breaks those down a little more we get to an understanding that when writing code the focus should be to minimize complexity so when someone else reads the code it should be like reading a book, where everything makes sense and has a clear purpose in other words the code is *cared for*.


(This is my first post and my first time trying something like this feedback is welcome but please be gentle 😅)
Binary Exponentiation
Tags: computerscience, algorithms
Published: 2020-01-06 10:01:31

Binary exponentiation is a simple technique used to find the value for **a<sup>n</sup>** in O(logn) multiplications instead of the naive way which is O(n) multiplications. First, let's have a look at the naive way then this way.

## The naive way
From mathematics, **a<sup>n</sup>** is expressed as a multiplying itself n times. Hence a naive function for solving this will be like below.
```cpp
int pow(int a, int n){
  int ans = 1;
  while(n--){
    ans *= a;
  } 
  return ans;
}
```
This is quite simple but we will want to reduce the complexity of this function and that is where binary exponentiation comes in.

##This way(Binary Exponentiation)
In this method, the work is split into the binary representation of the exponent which reduces the computation to O(logn).
#### Example
Naive: 3<sup>13</sup> = 3 * 3 *...* 3
This way: 3<sup>13</sup> = 3<sup>1101</sup> = 3<sup>8</sup> * 3<sup>4</sup> * 3<sup>1</sup>
Implementing an algorithm for this is very simple. intead of looping n times we rather loop through the bits which is logn times. To get our solution, we then find the powers at which a bit is set just like the example above. Because we are using the binary presentation of n the power at a set bit will be the square of the previous set bit.
That is:
3<sup>1</sup> = 3
3<sup>2</sup> = (3<sup>1</sup>)<sup>2</sup>
3<sup>4</sup> = (3<sup>2</sup>)<sup>2</sup>
3<sup>8</sup> = (3<sup>4</sup>)<sup>2</sup> ...

So with this, we just find the product of the powers set in n.
## Code for this way
```cpp
int pow(int a,int n){
  int res = 1;
  while(b){
    if(b&1){
      res *= a;
    }
    a *= a;
    b >>= 1;
  }
  return res;
}
```

The above code computes in O(logn) which is better than the naive way which computes in O(n)
It's so amazing to be a part of this community
Tags: watercooler
Published: 2020-01-06 09:14:04

Greetings fellow Dev,

My first Hacktoberfest swag just arrived.

Thanks to the Dev Community and Digital Ocean for organizing this event. And most importantly, Thanks to y'all for supporting me and every other beginner in starting out this journey.

**Seriously You guys are amazing.**

Check it out: 
{% instagram B6-Mu2mDEwH %}
A Quick Guide Through Canonical Links
Tags: html, seo
Published: 2020-01-06 09:07:22

# The problem 🧐

## Duplication within your own domain
Let's assume you have a page on your website that has the __identical content__ as another page, for example:
- `https://yourwebsite.com/blog/seo-optimization`
- `https://yourwebsite.com/en/blog/seo-optimization`
- `https://yourwebsite.com/blog/page.php?id=4711`

This would be bad, because the search engines would not know which one is the "real" link, which one should be indexed in their engine. This results in that page being "punished" by ranking it down.

## Cross-domain duplication
The same happens if you say, have a blog where you passionately share your content, and __post the same content on another blog__ to enhance the reach of your knowledge:
- `https://yourwebsite.com/blog/your-blogpost`
- `https://dev.to/yourusername/your-blogpost-2e79`

This would cause your website being ranked down, because there is another site with the same content as yours.

This is where canonical links come in.

# The solution 💡

A *canonical URL* is the __"preferred" or even "original" page__ of your content. To include it in your website, you set a `<link>`-tag with `rel=canonical` in the `<head>`-part of your HTML as such:

```html
<link rel="canonical" href="https://yourwebsite.com/original-post/" />
```

This way we tell the search engines that `https://yourwebsite.com/original-post/` is the __original content origin__.

It works similar to a HTTP 301 header (moved permanently), just that the website is not actually being redirected.

## Self-referencing

You might ask yourself if it's necessary to set a canonical link to your page, __even if you only have the content on a single page__ and are not referencing any third-party content.

Yes, it is __highly recommended__ to have canonical URLs in every page of your website. The reason for this is, that if you share social media campaigns with links such as `https://yourwebsite.com/your-post?social_campaign=twitter` or `https://yourwebsite.com/your-post?social_campaign=facebook`, it is a different URL with the same content. As we learned, this gets your page ranked down by search engines.

## Common mistakes

__The 5 most common mistakes__ when dealing with canonical links, [according to Google](https://webmasters.googleblog.com/2013/04/5-common-mistakes-with-relcanonical.html "5 common mistakes with rel=canonical") are the following:
- Setting canonical URLs for paginated sites
- Using relative URLs instead of absolute ones
- Multiple declarations of rel=canonical
- Category or landing page specifies rel=canonical to a featured article
- rel=canonical in the `<body>` element

Read more about these mistakes on [Google's Webmaster Central](https://webmasters.googleblog.com/2013/04/5-common-mistakes-with-relcanonical.html "https://webmasters.googleblog.com/2013/04/5-common-mistakes-with-relcanonical.html") blog.

*Photo by [kaleb tapp](https://unsplash.com/@kalebtapp?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText "kaleb tapp on Unsplash") on Unsplash*
The Social Life of a Developer
Tags: career, networking
Published: 2020-01-06 07:57:00


The best advice I've received about my job search so far is to get out into the community and meet people. The majority of the interviews that I've had so far have been from the people I know or meet passing my name along to a recruiter. I've always thought that one simply had to apply to however many online job listings they had to until something stuck, and that's just not the case in today's market. Who you know will always trump what your resume looks like.

I've had great success meeting new people through local tech meetup events. There are a number of event boards online, such as geekwire.com and newtechnorthwest.com, that have the current month's events planned out. At first, I only targeted events that were relevant to my skills or interests. This works well if you're looking to connect or collaborate with the people that you would end up working alongside of, but branching out into other fields is well worth it. Individuals outside of your own purview will often have need of your skills, or have questions about how you might go about solving their problems. It's these connections that are really powerful, as they might talk to their friends and coworkers about an insightful solution or idea that you had offered. This has resulted in more than one interview for me.

Aside from meetups, reach out to the development teams at the companies you're interested in. More often than not, developers will be more than eager to meet socially for coffee. These meetings are an easy way to pick the minds of your peers to find out what skills would be important to brush up on and get a picture of a company's internal community.

2020 is a new year, and I am confident that we job seekers will find the opportunities that are laying in wait for us. Good luck, and happy coding!
What things you take care before deploying your projects in production?
Tags: watercooler, discuss, question
Published: 2020-01-06 07:30:50

---
title: What things you take care before deploying your projects in production?
published: true
description: 
tags: watercooler,discuss,question
---

I was wondering that what are the different things professional developers take care before deploying their projects to production.


Thanks for answering.
Have a nice day!
Getting Started with Git and GitHub: Complete Beginner's Guide
Tags: git, setup, github
Published: 2020-01-06 07:20:34

Why do you need to use Git?
Git is becoming an ‘industry standard’. If you want to become a better developer, you may need to use Git to develop software and collaborate with other developers. Git lets you manage code development in a virtually endless variety of way. Here are benefits of using Version Control System/Git:

https://codechief.org/article/your-first-time-with-git-and-github
Day 5 - Silent Visual Track with Hydra (Js Livecoding Environment)
Tags: showdev, video, javascript, animation
Published: 2020-01-06 07:07:32




For the 5th day, decided to let the animation be the soundtrack for the audience to decide. This time inside of using Sonic Pi, I decided to use Hydra :


https://youtu.be/kdyBbNuBDO0

Which is built upon JavaScript and can be tried on the following link: 

https://hydra-editor-v1.glitch.me/

Github: https://github.com/ojack/hydra

As described by creator Olivia Jack (https://twitter.com/_ojack_?lang=en):

Set of tools for livecoding networked visuals. Inspired by analog modular synthesizers, these tools are an exploration into using streaming over the web for routing video sources and outputs in realtime.

Hydra uses multiple framebuffers to allow dynamically mixing, compositing, and collaborating between connected browser-visual-streams. Coordinate and color transforms can be applied to each output via chained functions.
Schnell Englisch lernen
Tags: englischlernen, schnellenglischlernen, intensivenglischkurs, englischcrashkursfrankfurt
Published: 2020-01-06 07:06:16

Finden Sie einen schnellen und hochintensiven Englischkurs mit der Methode des Alpha-Instituts, die Spaß macht. Mit dem Englischkurs können Sie in nur 3-6 Tagen 900 englische Wörter lernen oder perfektionieren.

Besonders effektive und intensive Englischkurse in Frankfurt, Hamburg, Berlin, München, Mallorca mit Geeignet für alle Sprachniveaus und Altersgruppen.
https://www.fremdsprache.de/englisch-lernen
Prototypal noninheritance in Javascript
Tags: javascript, inheritance, proxy, prototype
Published: 2020-01-06 06:25:43

Everybody knows that the inheritance mechanism in Javascript is prototypal. Many also know that it's possible for an object to not have a prototype and therefore not inherit anything. But did you know that it's possible for an object to have a prototype but not inherit from it?

First of all, while the Javascript specification provides hints about what inheritance is, it doesn't fully define it. But how can we observe the inheritance mechanism? Well, we need an object with a prototype, see that the object doesn't have a property that the prototype has and then when we access that property on the object we get the same value that we would get if we accessed it on the prototype. We're also freezing the object and the prototype in order to make things look less dynamic.

```js
const proto = {x: 1};
const obj = {};

Object.setPrototypeOf(obj, proto);

Object.freeze(proto);
Object.freeze(obj);

console.log(1, Object.getPrototypeOf(obj)); // proto
console.log(2, Object.getPrototypeOf(obj) === proto); // true
console.log(3, obj.hasOwnProperty('x')); // false
console.log(4, 'x' in obj); // true
console.log(5, proto.hasOwnProperty('x')); // true
console.log(6, proto.x); // 1
console.log(7, obj.x); // 1
console.log(8, obj.x === proto.x); // true
```

So basically we made eight observations here and we're looking to prove that it's possible for the last two observations to be different for a particular object, even if the first six are the same as in this example.

The answer is: proxies!

```js
const proto = {x: 1};
const proxyTarget = {};

Object.setPrototypeOf(proxyTarget, proto);

const obj = new Proxy(proxyTarget, {
  get(proxyTarget, prop, receiver) {
    if (proto.hasOwnProperty(prop)) {
      return undefined;
    }

    return Reflect.get(proxyTarget, prop, receiver);
  }
});

Object.freeze(proto);
Object.freeze(obj);

console.log(1, Object.getPrototypeOf(obj)); // proto
console.log(2, Object.getPrototypeOf(obj) === proto); // true
console.log(3, obj.hasOwnProperty('x')); // false
console.log(4, 'x' in obj); // true
console.log(5, proto.hasOwnProperty('x')); // true
console.log(6, proto.x); // 1
console.log(7, obj.x); // undefined
console.log(8, obj.x === proto.x); // false
```
How to make a dependent dropdowns in React with Typescript?
Tags: react, typescript, javascript, webdev
Published: 2020-01-06 06:11:18

I have two dropdowns, base dropdown lists the values Asset & Liability and i need to show the list of second dropdown depended by the base dropdown, ie, if i select Asset the second dropdown only lists Fixed Assets and Current Assets or if i select Liability then Long term and Short Term. How to do it in React Js With Type script language?