teleren/devto huggingface dataset:
Good or bad: Styled components theme helper
Tags: styledcomponents, javascript
Published: 2020-01-28 14:15:39

---
title: Good or bad: Styled components theme helper
published: true
description: 
tags: #styledcomponents, #javascript
---

So I've been using styled components with theming lately. And I'm wondering a bit about my approach. It might have poor performance, and it might use a theme for more than what it's intended for.

#### Using the `theme` obj for more than just colors
On projects I've done in the past where I've used css modules with scss, I've found it convenient to have lots of common variables to ensure consistency in sizes (margin, padding, font etc) and colors throughout a codebase. Also to be able to easily change them/and or changing themes etc.

So a `theme` object might look something like this (example values):

```javascript
const theme = {
  width: {
    content: '60vw'
  },
  spacing: {
    sm: '0.25rem',
    md: '0.5rem',
    lg: '0.75rem',
    xl: '1rem'
  },
  color: {
    background: {
      primary: 'black',
      secondary: 'white',
      someOtherColor: 'pink'
    },
    primary: 'white',
    secondary: 'black'
  },
  font: {
    heading: {
      sm: '1.4rem',
    },
    text: {
      sm: '0.75rem'
    }
...
```

The attempt is to have all common properties in the same place, and be able to structure it so it's not horrible to get an overview of.

So using the values from the theme above in a component would look something like this:

```jsx
const MyComponent = styled.p`
  color: ${({ theme }) => theme.color.primary};
  background: ${({ theme }) => theme.color.background.primary};
`;
```

This gets pretty tedious to write all the time, and I also feels it adds to much noise, reducing readability.

**Q:** Is it fine using `theme` for sizes etc in addition to colors?

#### Using a `get` helper func instead
Since I wanted a visually cleaner and lower effort way of accessing different nested properties in my `theme` obj, I wrote a function I just called `get`. Comparing the component above, it looks like this:

```jsx
const MyComponent = styled.p`
  color: ${get('colorPrimary')};
  background: ${get('colorBackgroundPrimary')};
`;
```
`get` expects a `theme` property to exist on the component `props` object, and also a camelCased identifier which is used to look for the value. So, in my opinion it's less noise in the styling, and also easier to type.

**Q:** Since this is a function, instead of just accessing props on an object, it has to perform some operation to know where to lookup the value. So it'll definitively have a performance hit. But will using a function for purposes like this have an actual noticeable/critical performance hit regarding smooth rendering etc?

Guess it probably depends on the implementation and device.. 

Anyway I'm liking the approach, it's straight forward to use and readability is not suffering too much.**What do you think?**

If anyone's interested, I can share the func.
Setting up a React Native project (TypeScript + Airbnb linter)
Tags: reactnative, typescript, eslint
Published: 2020-01-28 14:05:05

---
title: Setting up a React Native project (TypeScript + Airbnb linter)
published: true
description: 
tags: #reactnative, #typescript, #eslint
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/44umtpqox8vayuqd9wm3.png
---
Reading other sources, I didn't succeed in setting up my React Native project with the TypeScript template and the airbnb linter. And it's okay as everything changes so quickly. I understand that my tutorial will also become obsolete in a few months, but I'll try to keep it up to date.
I will be using **yarn v1** as yarn v2 doesn't support React Native yet. As my linter, I chose the Airbnb linter.

# Creating a React Native project with the TypeScript template 
```
npx react-native init MyApp --template react-native-template-typescript
```
```
cd MyApp
```
# Adding ESLint
```
yarn add --dev eslint @typescript-eslint/eslint-plugin eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks    
```
Rename **.eslintrc.js** to **.eslintrc.json**. If you don't have a file named .eslintrc.js, just create **.eslintrc.json**. In this flile we need to add this code.
```json
{
  "extends": ["airbnb"],
  "plugins": ["@typescript-eslint", "react"],
  "parser": "@typescript-eslint/parser",
  "rules": {
    "import/no-unresolved": 0,
    "react/jsx-filename-extension": [1, {
      "extensions": [
        ".jsx",
        ".tsx"
      ]
    }]
  }
}
```
That's it. Now you have your RN project set up with TypeScript and airbnb linter.
Can you crack this google interview question? The maximum subsequence problem.
Tags: career, computerscience, programming, algorithms
Published: 2020-01-28 13:59:04

In today's article, let us look at an algorithm problem related to strings.

####Problem Statement
Given a main string **S** and a dictionary of smaller strings **D**
Can you find the largest string present in the dictionary that is a subsequence of the main string **S**?

_Substring: A string **a** is said to be a sub-sequence of another string **b** if **b** contains all the strings present in the string **a** and also in the same order._

Do give it a try and compare your solution with the ones discussed in this video.

####Solution
{% youtube IHsX70r-fIQ %}

Hope that helped, Cheers!
Securing Windows Server 2019
Tags: security
Published: 2020-01-28 13:31:58

This is my first blog post. I guess one of the best ways to learn fast, is by writing and sharing. 

Today's post focuses on securing Windows Server 2019. I'm a developer, not a server guy but in my role, i'm exposed to the setup, configuration and patching of servers. To allow us to perform patching/maintenance as and when we like, we need a cluster of servers to achieve High Availability (HA). There are many ways to harden these servers and the method we have chosen is by enforcing group policies (GPOs) using the Domain Controller(s). Security policies are set centrally and propagated down to servers within the same domain.

The Center for Internet Security (CIS) publishes guidelines for securing both Windows and Linux servers. They are broadly categorized into Level 1 (L1) and Level 2 (L2). You can view L1 as baseline security and L2 as in-depth security where security is a must-have. There are thousands of policies which can be applied to help harden the servers. To do this efficiently, it is best to download the CIS-CAT scanner (there is a free "lite" version available!) and run it on your server. The scanner compares your server's configuration against the CIS Benchmarks. 

With the scanning results, we can quickly decide to apply the necessary GPOs to reduce the number of attack surfaces. However, don't do this blindly. This may break your app. It is always about taking a prudent balance between functionality and security. Don't take unnecessary risks but going for a no-risk approach is no-go as well.

CIS has worked with the various cloud providers (AWS, Azure etc.) and users can now spin up pre-configured/CIS hardened VMs. This saves us huge amount of time and effort hardening the VMs, allowing us to sleep peacefully at night.

I'm new to this and would like to learn more about administering group policies efficiently. Are there templates available for download?
What is the most challenging part of your daily work that doesn't involve coding?
Tags: discuss, career, productivity
Published: 2020-01-28 13:20:28

---
title: What is the most challenging part of your daily work that doesn't involve coding?
published: true
description: 
tags: discuss, career, productivity
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/v2dgogryaaq4wlwhjrku.jpg
---
What new/upcoming Web API(s) are you most excited about? Why?
Tags: discuss
Published: 2020-01-28 13:16:36

---
title: What new/upcoming Web API(s) are you most excited about? Why?
published: true
description: 
tags: discuss
---

One of my favorite pages to explore on MDN is the directory of [Web APIs](https://developer.mozilla.org/en-US/docs/Web/API). I barely know what many of them are, but it's interesting to learn about and test out newly available browser features and what may be lurking on the horizon.

A couple relatively new features are the [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) and [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API). I've used both to solve different problems in recent projects of mine: to be notified when an element is added to the DOM asynchronously (mutation) or to be notified when an element comes enters the viewport (intersection).

What WebAPI captures your interest?
Daily Developer Jokes - Tuesday, Jan 28, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-01-28 13:00:10

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

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

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

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

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

<!-- 
Joke text:
___Q:___ What did the server say to his client who was having a bad day?

___A:___ Everything's going to be 200
 -->
How to Create Mobile UI Animations That Meet Users’ Needs
Tags: animations, uiweekly, design, webassembly
Published: 2020-01-28 12:51:29

Interface animation is an essential part of developing any digital product, application, or website. Think about how rarely you come across an application or a website that doesn’t have at least one animated interface element. At Yalantis, we’re thorough in our approach to creating animations and try not to overlook any detail. In this article, we’ll discuss why animations are needed, what to consider when creating them, and how to make animations for mobile apps from a designer’s point of view.

How is animation used in mobile applications?

One of the main goals of motion design is to enhance the usability. Animations in apps help users identify connections between interface elements and views; give feedback to users so they know what’s happening; show the hierarchy of pages and screens; and attract attention to important elements and functions.

Source: https://yalantis.com/blog/how-to-create-mobile-ui-animations-that-meet-users-needs/
Advice for UI Testing
Tags: help, javascript, testing
Published: 2020-01-28 12:32:20

Hi!

I have my app running well and I'd like to add test (unit and/or e2e).

I have one problem. Everything is about UI. You can see the code to start.

```javascript
function handleWord(text) {
    const textArr = text.split(" ");
    let wordCount = 0;

    for(word of textArr) {
        if(/[a-zA-Z0-9]/.test(word)) {
            wordCount += 1;
        }
    }

    renderText(wordDOM, wordCount);      

}

function handleChar(text) {
    renderText(charDOM, text.length);
    
}

function init() {
    document
      .querySelector('textarea')
      .addEventListener("input", event => {
        const text = event.target.value.trim();

        handleChar(text);
        handleWord(text);

    });
}

init();
```

What solution do you suggest to me to test this code? I would go with mocha but jest is also fine. The only problem is to interact with the DOM.
https://www.cypress.io/, https://testing-library.com/ or another solution you have.

Thank you in advance.
Selecting the Best SEO Company for Search Engine Optimization
Published: 2020-01-28 12:27:10

Many webmaster experienced the futility of attempting the seo as a get it done yourself project. Despite all of the hard initiatives and works they've put in the results haven't been as good as ideal by them. Choosing the services associated with a proficient SEO business may be the answer to the issues of theirs.

Value of Search engine marketing Either for site promotion or maybe business promotion one needs they rank prominently on the very first consequence web page of leading search engines such as Google, ASK, Yahoo, MSN, and others. In the record of the increasing competition within the business world the job might not be simple for every webmaster without choosing a number of qualified SEO services.

The positives of Hiring SEO Company Several advantages outcome by employing an expert and skilled SEO company. Several of the advantages are -
• Webmasters are spared of the tensions of obtaining seo by themselves.
• With their experience and experience in the swap, the service provider business is able to make the procedure quite simple as well as convenient.
• Moreover the seo procedure is going to be commensurate with the current industry trends that dependable businesses and the professional will have the ability to change into practice.

Word of Caution One precaution which the webmaster ought to consider in choosing the perfect SEO company and also acquiring the SEO services is to not enter the traps set a good unscrupulous traders on the net. A bit of research and research on the background of different companies offering the services can help the webmaster or maybe entrepreneur select the best one for the purpose of theirs.

Factors for Consideration
Main aspects for consideration in the number of the highly effective SEO business for SEO services are • Any organization guaranteeing number one position must be doubtful. A company serious about the job of its is going to offer just higher ranking.
• Recommendations from associates and friends ought to be valued.
• Discussion in web boards will help choose the reputable business by the webmaster.
• Before choosing the company one ought to ask for the websites they've optimized.

Last but not the very least the website providing SEO services must realize about automatic submissions & SEO tricks.

More: Result would be that the submitting sites get adequate quality links giving them valuable position on the outcome pages of Other search engines and google.

Find More Information: <a href='https://www.websettlor.com/seo-company-in-chandigarh/'>seo company in chandigarh</a>
How Buddy Turns DevOps to NoOps the DigitalOcean Way
Tags: devops, digitalocean, noops, cicd
Published: 2020-01-28 12:25:01

Have you ever stumbled upon a build script so cumbersome it required machine upgrades? A process so extensive you were forced into subscribing to expensive cloud servers?


Deployment automation is something that still remains shrouded behind a veil of complexity and hidden costs that add up over time. Buddy proves it doesn’t have to be that way. Learn how [**Bay Area News Group**](https://www.bayareanewsgroup.com/), one of the biggest newspaper publishers in San Francisco, uses Buddy to automate their CD tasks for three different branches — from fetching changes on GitLab to uploading files to DigitalOcean droplet.


>“[Before] I had experienced issues building production files. The build script required significant resources over and above what I needed to server my app. I would have ended up paying a lot for a cloud server just so I could build the files. With Buddy it was trivial to trigger the build script.”


Read more in this use-case article on [scotch.io](https://scotch.io/tutorials/how-buddy-turns-devops-to-noops-the-digitalocean-way) ->

**Table of Contents**
[Use Case](https://scotch.io/tutorials/how-buddy-turns-devops-to-noops-the-digitalocean-way#toc-use-case)
[Integration with DigitalOcean](https://scotch.io/tutorials/how-buddy-turns-devops-to-noops-the-digitalocean-way#toc-integration-with-digitalocean)
[YAML](https://scotch.io/tutorials/how-buddy-turns-devops-to-noops-the-digitalocean-way#toc-yaml)
[Summary](https://scotch.io/tutorials/how-buddy-turns-devops-to-noops-the-digitalocean-way#toc-summary)
Cracking a coding test interview - breakdown
Tags: beginners, webdev, javascript, career
Published: 2020-01-28 11:54:26

---
title: Cracking a coding test interview - breakdown
published: true
description: Walkthrough a coding test 
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/pcznzpwaa8o5p1cbyex7.png
tags: beginners, webdev, javascript, career
---
# Cracking a coding test interview
Coding interviews are always for me an opportunity to learn and grow which is why I wanted to share you my thought process for this one I found this morning at `letsrevolutionizetesting.com`

What I saw when I visited the page
![home page](https://dev-to-uploads.s3.amazonaws.com/i/4f3eplbe161ukupz47m8.png)

I revisited the application form
![application_form](https://dev-to-uploads.s3.amazonaws.com/i/6jzzz0onbw9tvbdmxgxq.png)

I wanted to know what technology was used for this
![server discovery](https://dev-to-uploads.s3.amazonaws.com/i/rv4uyg6h7xezcnu1l1xl.png)

I was happy to find out it was ruby

And the hint was suggesting I should try json and I did. If you know ruby on rails then it comes to you naturally
![request](https://dev-to-uploads.s3.amazonaws.com/i/5y8dnhklrcv1er1stky8.png)

But now I am in front of the page with this json payload. It says follow so I followed the link.
Once...
![request id json](https://dev-to-uploads.s3.amazonaws.com/i/szq55zdd3gjyq6ny12ws.png)

Twice...
![request twice](https://dev-to-uploads.s3.amazonaws.com/i/paa5azj663n9r9rc8m4k.png)

Then I said wait...
![but wait...](https://media.giphy.com/media/26gR2BU2Hrt9HSN6E/giphy.gif)

It was too good to be true. So you have two choices:
- either you go follow one by one the id chain
- or you can just write a bit of function like I did
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fcvnaz1c80eeot7vhxl3.png)

On the last page: The holy grale
![result](https://dev-to-uploads.s3.amazonaws.com/i/gvyfi17l05brcptlwf0m.gif)

You could have go for an iterative version with a loop


# Wrap up
I guess at RainForest they will have to make a new test since you know the answer for this one.
Overall I think it way simple enough. We just needed to take each problem one at the time and yeah every beginner can do it too.
1 thing to know when using js default function parameters, 'arguments' keyword behaviour
Tags: javascript, beginners, tutorial
Published: 2020-01-28 11:48:13

Some days ago at work I encountered an unexpected (unexpected for me at least) behaviour when using the default function parameters. I'm going to explain what and I hope this will help some folks out there.

## Default function parameters

You can skip to the next chapter if you already know well default function parameters added with es6 javascript.

For those who are not 100% familiar with this functionality, it was introduced with es6 features and it allow you to give a default value to function parameters like a normal human being would do. Let's see some examples:

Pre es6:
``` javascript
var fun = function(param1, param2) {
  param1 = typeof param1 !== "undefined" ? param1 : 1;
  param2 = typeof param2 !== "undefined" ? param2 : 2;
  // the two previous line was one of the many ways we were setting a default value

  // ... do function stuff ...
}
```
With es6:
``` javascript
var fun = function(param1 = 1, param2 = 2) {
  // ... do function stuff ...
}
```
MUCH MUCH better right?

Yep, I agree. I would strongly suggest you to start using this if you are not already.
You can read more [in the official MDN documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters), also keep in mind that if you want to support old browsers (ie11 for example) you will need to transpile your code, using something like [Babel](https://babeljs.io/). I won't dive deeper into this because we could write a book about it and there are many many great articles out there about this.

## Interaction between *arguments* and default parameters

This is where the behaviour I wasn't expecting hit me like a fist in the face.
Let's take this code:

``` javascript
const fun = function(p1 = 1, p2 = 2, p3 = 3) {
  console.log(arguments.length);
}
fun(1);
```
What do you think the snippet will log in console?
a) 0
b) 1
c) 2
d) 3
e) undefined

If you guessed *d* you answered like I did the first time, thus you were wrong.
The correct answer is *b*.
This is because **arguments always contains the actual provided parameters, ignoring the defaults**.
Infact we can see that arguments ignore also the function definition:
``` javascript
const fun = function(p1, p2, p3) {
  console.log(arguments.length); // this will log 5
}
fun(1, 2, 3, 4, 5);
```

So be careful when using *arguments* keyword combined with default parameters.


I hope this was helpful, feel free to contact me on [twitter](https://twitter.com/albertodeago88)
Free Programming Books
Tags: javascript, html, css, python
Published: 2020-01-28 11:39:58

All_Technical_Languages_PDF A to Z

1- .NET FRAMEWORK-

https://books.goalkicker.com/DotNETFrameworkBook/

2- Algorithms-

https://books.goalkicker.com/AlgorithmsBook/

3- Android-

https://books.goalkicker.com/AndroidBook/

4- Angular 2

https://books.goalkicker.com/Angular2Book/

5- Angular JS

https://books.goalkicker.com/AngularJSBook/

6- BASH

https://books.goalkicker.com/BashBook/

7- C

https://books.goalkicker.com/CBook/

8- C++

https://books.goalkicker.com/CPlusPlusBook/

9- C#

https://books.goalkicker.com/CSharpBook/

10- CSS

https://books.goalkicker.com/CSSBook/

11- Entity Framework-

https://books.goalkicker.com/EntityFrameworkBook/

12- Excel VBA

https://books.goalkicker.com/ExcelVBABook/

13- GIT

https://books.goalkicker.com/GitBook/

14- Haskell

https://books.goalkicker.com/HaskellBook/

15- Hibernate

https://books.goalkicker.com/HibernateBook/

16- HTML 5

https://books.goalkicker.com/HTML5Book/

17- HTML5 CANVAS

https://books.goalkicker.com/HTML5CanvasBook/

18- iOS

https://books.goalkicker.com/iOSBook/

19- JAVA

https://books.goalkicker.com/JavaBook/

20- JAVA SCRIPT

https://books.goalkicker.com/JavaScriptBook/

21- jQuery

https://books.goalkicker.com/jQueryBook/

22- KOTLIN

https://books.goalkicker.com/KotlinBook/

23- LaTex

https://books.goalkicker.com/LaTeXBook/

24- Linux

https://books.goalkicker.com/LinuxBook/

25- MATLAB

https://books.goalkicker.com/MATLABBook/

26- Microsoft SQL Server

https://books.goalkicker.com/MicrosoftSQLServerBook/

27- MongoDB

https://books.goalkicker.com/MongoDBBook/

28- MySQL

https://books.goalkicker.com/MySQLBook/

29- NodeJS

https://books.goalkicker.com/NodeJSBook/

30- Objective-C

https://books.goalkicker.com/ObjectiveCBook/

31- Oracle DB

https://books.goalkicker.com/OracleDatabaseBook/

32- Perl

https://books.goalkicker.com/PerlBook/

33- PHP

https://books.goalkicker.com/PHPBook/

34- PostgreSQL

https://books.goalkicker.com/PostgreSQLBook/

35- PowerShell

https://books.goalkicker.com/PowerShellBook/

36- Python

https://books.goalkicker.com/PythonBook/

37- R

https://books.goalkicker.com/RBook/

38- React JS

https://books.goalkicker.com/ReactJSBook/

39- React Native

https://books.goalkicker.com/ReactNativeBook/

40- Ruby

https://books.goalkicker.com/RubyBook/

41- Ruby on Rails

https://books.goalkicker.com/RubyOnRailsBook/

42- Spring Framework

https://books.goalkicker.com/SpringFrameworkBook/

43- SQL

https://books.goalkicker.com/SQLBook/

44- Swift

https://books.goalkicker.com/SwiftBook/

45- Type Script

https://books.goalkicker.com/TypeScriptBook2/

46- VBA

https://books.goalkicker.com/VBABook/

47- Visual Basic .Net

https://books.goalkicker.com/VisualBasic_NETBook/

48- Xamarin Forms

https://books.goalkicker.com/XamarinFormsBook/