teleren/devto huggingface dataset:
Flask, CSS and Cache walked into a bar...
Tags: python, flask, css, firstpost
Published: 2021-01-24 07:23:00

Hello reader :)


I would finish this joke but it's meaningless without context. Hence bear with me till the end, to experience the best joke ever.


So yesterday night, I was learning flask from a freecodecamp video, and it was pretty decent. The video begins with some boilerplate, followed by the concept of templates and their inheritance. Now I faced an error, and I assume some of you guys might have faced this in the beginning too. 


> *The CSS stylesheet that I linked in the 'base.html' file, didn't seem to work.*

![VSCode screenshot of error.](https://dev-to-uploads.s3.amazonaws.com/i/rznihd9copuckm7e5bmg.png)


I tried everything, and all my code seemed to be fine as I referred to multiple sites. I rewrote the code, just to make sure I didn't commit some stupid mistake (btw my code worked in the first go with no errors except for the damn *CSS*.). Eventually, I was frustrated and left it.


But as fate would have it, I searched for '*CSS with flask error*' on google today, just to see if other people might have faced it (In retrospect, should have done this yesterday.). And the god of programming, Stack Overflow, came to my rescue.


It had the exact same problem as mine, with 11 answers. Since the first and the most upvoted answer is usually the right one, I read it and found that I had already tried it all (The damn answer was long).


And right when I had almost lost hope, when future seemed bleak and life felt meaningless, I saw the next answer... it changed my life. I am a better person because of it. I got out of my depression and set up a billion-dollar company (all this happened a few minutes ago.)
The answer was written by Tanishka Gupta, and I quote:


> try reloading the chrome using
> ctrl + shift + R


And if you think **this** is funny, what do you think about the fact that it actually worked? 

![Screenshot after hard reload](https://dev-to-uploads.s3.amazonaws.com/i/a08jkb4ifejogao79uoc.png)

So finally, when my laughter stopped, I read a comment on this answer by VocoJax and I quote:


> WHAT KIND OF MAGIC IS THIS??


(The capitalization is not my addition. It was commented this way.)


The comment described both my emotions, and the next fit of laughter I couldn't explain to my co-residents, pretty well.


So after some research, I understood that chrome saves a copy of CSS file in its cache on the first load, and uses it for that session. Simple reloads do not reset the browser cache, hence any of my changes in the CSS file weren't reflecting in the browser window. ctrl + shift + R does a complete reset of the window thus clearing the cache and using the source CSS file. Which in turn reflects the changes you do in your CSS file. Simple enough?


And hence to end this article and to finish my stupid joke, 
> *Flask said "You still haven't changed CSS.", to which CSS said, "Hold my cashe!".*

I know the joke wasn't good. Thanks for sticking around though.

Au revoir. :)
(I don't really know French.)
Remove S.W.org DNS prefetch from Wordpress
Published: 2021-01-24 07:08:06

Making Wordpress faster is an ongoing experiment. There's a few more things I've discovered which can be removed for small (albeit in this case, VERY small, speed gain). DNS prefetching Google fonts and S.W.org which pulls files from the WP repository.

```
add_action( 'init', 'remove_dns_prefetch' );
function  remove_dns_prefetch () {
   remove_action( 'wp_head', 'wp_resource_hints', 2, 99 );
}
```

It's as easy as that. We use it [here](brisbaneagency.com/woocommerce-tax-rates-csv/) and [here](https://presetylightroom.pl).
4 THINGS I AM GOING TO LEARN IN 2021
Tags: react, vue, deno, go
Published: 2021-01-24 07:04:31

2020 was an excellent year was new front end technologies such as react and vue . As its very clear now that javascript is going to be the go to language for most of the tasks , I planning to spend alot of time this year learning two new frontend frameworks , React and Vue .
Let me first tell some uses of react and Vue . 
React is being used by :- 
1>Uber
2>Facebook 
3>Airbnb
4>Netflix and many more 

Whereas Vue is being used by :- 
1>Nintendo 
2>Louis Viton
3>Apple 
4>Adobe

For more information about react and vue , you can visit this link 
<a href="https://www.monterail.com/blog/vue-vs-react-2020">LINK</a>

Besides from these front end frameworks , Ill be learning Deno
Its a replacement to <b>nodejs</b> . Deno is alot more secure than node as we have to grant permissions for certain files to run . In node we dont have the accessibility check for which files are being viewed by the module but in deno we have the permission to do so . Also that it comes inbuilt with a few modules such as nodemon . In deno instead of using npm packages by downloading them , we simply need to use their url's instead , hence removing the functionality of <b> package.json </b> . 

The last thing that ill be focusing on this year is golang . The language has been growing alot and is heavily backed up by google . Currently its providing the maximum average salary for a back end language . Golang has a easy learning curve (c like syntax). 
One of the reasons ill be learning golang is because of the concurrency . Node is single threaded , that means we can run one process at a time , whereas we can run as many processes in golang as we want provided our device supports it . It has a amazing standard library with a lot of in built convenient to use functions . Golang has a speedy execution , which means the applications are going to be faster than those made by nodejs .

Well Thank you for reading this far and ill be happy to know in the comments what you guys are going to learn this year .

<small> -->A cool tip for people who are very good in javascript , learn typescript this year . </small>
React Test-Driven Development (TDD)
Tags: react, showdev, javascript, beginners
Published: 2021-01-24 06:11:28

---
title: React Test-Driven Development (TDD)
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/jmqfnsj6whr8digsjygi.png
published: true
description: Quick beginner tutorial on how to do TDD with React
tags: react, showdev, javascript, beginners
---

The idea behind Test-Driven Development is quite simple.

1. Write a test BEFORE you implement your next bit of functionality

2. Write the minimal implementation needed to make your test pass

3. Refactor and re-structure what you've written so far as needed 

Then just keep cycling through those 3 steps as you build out the rest of your project!

## In the following video, I talk about TDD in detail and show you exactly how to start doing it in React.js  

{% youtube CjoxKgT_Hng %}

Let me know in the comments if you have feedback!
Authentication in Node.js and JWT Video Tutorial | 1 hour
Tags: node, javascript, webdev, codenewbie
Published: 2021-01-24 06:09:43

In the following 1 hour tutorial, you will learn how to create API endpoints to handle `registration of users`, `signIn`, and `protection of the API endpoints`. 

If you enjoy the content like the video and remember to subscribe to my YouTube channel for more.

## Auth In Node.js 👇
{% youtube wwiwyFXQCHw %}
REACT ANIMATION - Animation Libraries for React.js
Tags: react, animation, webdev, javascript
Published: 2021-01-24 05:55:18

## [**Framer Motion**](https://www.framer.com/motion/)
   - JavaScript library
   - Relatively new
   - Easiest, feature rich & production ready
```
npm i framer-motion
```

## [**React Reveal**](https://www.react-reveal.com/)
   - Based on the popular css animation library **animation.css**
   - Primarily used to show and/or hide *DOM elements*
```
npm i react-reveal
```

## [**React Motion**](https://www.npmjs.com/package/react-motion)
   - React specific animation library
   - Based on real physics
   - Uses sniffing and dumping
```
npm i react-motion
```

## [**React Spring**](https://www.react-spring.io/)
   - Inspired by react-motion
   - Attempts to improve performance over react-motion
```
npm i react-spring
```

## [**React Anime**](https://alain.xyz/libraries/react-anime)
   - React wrapper for the popular library *Anime.js*
   - All the functionalities wrapped into their declarative form
```
npm i react-anime
``` 

<br>
Worked with other cool libraries? Share in the comment section below!

<br/>
Connect with me : [Github](https://github.com/deyRupak) | [Tutoring](https://www.fiverr.com/share/V763ld) | [Freelance Web Dev](https://www.fiverr.com/share/Rld9Y8)
Find your Stack
Tags: android, cli, programming
Published: 2021-01-24 05:13:52

---
title: Find your Stack
published: true
description: How to use the android debug bridge to debug your app's activity backstack
tags: android, cli, programming
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/iw02b24u82zcz55rzrl9.jpg
---

We recently had to debug some old (**very very old**) code because of some new issues arising from it. One of the things we were investigating was whether the code was starting activities in the wrong order due to a race condition. So we had to debug our activity stack. We quickly realized that there was no easy way to debug that from android studio. Then we turned to the trusty `adb` which this command:

`adb shell dumpsys activity activities`

The `dumpsys activity activities` command gives you a ton of info about the current activities. But we only care about the activities related to our app, so we pipe the output to `grep package.name`. 
This still gives us a little too much into if you just want to look at the activity stack, so we pipe output again to `grep Hist` to only get the activity stack. The full command ends up looking something like this:

`adb shell dumpsys activity activities | grep package.name | grep Hist`

This works well if you want a snapshot of the current activity stack, but doesn't really help if you want to continuously log the activity stack. This is where we turned to the `watch` command. This command is not on mac by default so you have to install it through brew like `brew install watch`. The `watch` command runs a command at whatever interval you want. 
With `watch` installed your full command turns into something like:

`watch -n 0.1 "adb shell dumpsys activity activities | grep package.name | grep Hist"`

The `-n` flag sets the time interval at which we run our adb command. So this means run the command every .1 secs. 
This ended up working perfectly and we were able to continuously debug our activity stack and figure out if there was some problem there. Turns out the activity stack was fine but this helped us rule out what and pointed us in the right direction to eventually fix the issue.
Creating Tabs using Html,css,js
Tags: 100daysofcode, javascript, html, css
Published: 2021-01-24 05:09:03

Fourth day of 100 days of code.

# HTML Code:

``` 
 <div class="tabs">
      <button id="tab1" onclick="open(event, 'html')" type="button">
        HTML
      </button>
      <button id="tab2" onclick="open(event, 'css')" type="button">
        CSS
      </button>
      <button id="tab3" onclick="open(event, 'js')" type="button">
        JS
      </button>
    </div>
    <div id="cont"></div>
```

Index.js
```
function open(event, skill) {
  event.preventDefault();

  const content = document.getElementById("cont");
  content.classList.add("content");
  if (skill == "html") {
    content.innerHTML =
      "HTML is the standard markup language for Web pages.With HTML you can create your own Website.";
  }
  if (skill == "css") {
    content.innerHTML =
      "CSS is the language we use to style an HTML document.CSS describes how HTML elements should be displayed.";
  }
  if (skill == "js") {
    content.innerHTML =
      "JavaScript is the worlds most popular programming language.JavaScript is the programming language of the Web.";
  }
}
```
Through onclick event, pass the skill and if the skill matches the button value, update your innerHTML.
What's the weirdest job a recruiter has called about?
Published: 2021-01-24 05:06:51

I've received a few odd calls for job openings. I've had the usual stuff like you know JavaScript do you know Java? questions about various frameworks. I once had a call about installing printers. 
The recruiter saw that I had a background in photography and thought I might have experience with printers. Well I mean I do but I don't want to make a career out of it. Certainly don't want to drive around the city installing stuff. I thought that would be my weirdest ever call. It was topped the other day.
I had an email about a Dental Assistant. I have no idea why. My first reaction was maybe they need an application for the Dentist office. There are a couple Dental Industry companies in town, maybe they needed help. Nope. I read the job description. It was for an actual dental assistant involved in patient care and surgery. I don't need to be around nitrous oxide. I'm a developer I need caffeine. 

So what's the weirdest job someone has called you about?
CES conference
Published: 2021-01-24 05:01:35

#Home appliances
In terms of cleaning LG has developed something they call TrueSteam technology where they use steam to clean clothes and dishes.
LG has made a refrigerator that has a small glass window to see what you have inside. also a pretty cool part of it is that its a touchable screen so you just knock twice and it lights up.
The main thing with the fridge is to keep cold inside to make it more effective. by making it so that you don't have to open anything to look in the fridge it keeps cold in.
they have also made the ice maker smaller and make circular ice instead of cubed 
they have created a washer and dryer that can tell the cycle you want by the feel of the fabric using AI that learns preferred settings and since the washer and dryer are together the two machine communicate to say what should be done for the clothes
The first home appliance release from Samsung is more focused on lifestyle and its a 4 door fridge that is meant to fit the style of your home. the fridge is meant to be more organized with specific sections

#TV's
LG has also come out with a TV so thin it looks like a line from the side. they have also given the TV AI that is capable of making it so that letters and background images and things in different positions like that are processed differently
It auto switches volume so that you don't have to get up when you switch channels you don't have to figure out the correct volume 
they also made it much easier to screen mirror from a phone to a TV and vice versa
there us now a game section in options for the TV based on game genre 

#Vacuums
LG has developed a vacuum that has no cords and has 5 part filtration system. it is supposed to take out most of the allergens and make a cleaner house
Samsung has developed a new vacuum that goes around on its own but the big selling point is the new AI. the new AI is able to detect any object that might be in the way of the vacuum so that it can go around it. they advertised it as being able to see small objects as well so that it doesn't get caught in cloth or some other thing you might've left 

#Air purifier
The first thing starting off from LG is new home appliances. First is the LG Puri air which is advertised to take out pollution and allergens from the air. It can be a small room, bug office, or hand held device. 
One thing they have done is put the Puri air into a mask so you can wear it on the go. 
the handheld one is for you to put it down anywhere you go. which is much better than what I thought (to just put it up to your mouth when you need it).

#AI
LG has made a hub to connect all of its devices onto one thing so that they can communicate. this means that if you own all of the LG products in one house you can have almost an entire smart house that learns your preferences 
Samsung gave a little sneak peak into their facial recognition software by making the hosts face change the face of the Mona Lisa. I've seen software like this before but I feel this is one of the best ones. they have also developed object seeking AI for vacuums so that they don't bump into anything
Create a sample app with TypeScript, React, typeorm, type-graphql. graphql-code-generator while reading "Learning GraphQL"
Tags: typescript, react, graphql
Published: 2021-01-24 04:59:11

Recently, I was reading a book [Learning GraphQL](https://www.oreilly.com/library/view/learning-graphql/9781492030706/) to learn GraphQL.
To understand it deeply, I tried to create a sample app: https://github.com/danimal141/learning-graphql-ts

It's not interesting to just copy a sample app written in the book, so I used TypeScript, `typeorm`, `type-graphql`, `graphql-code-generator`.
I'm happy if this post is helpful for someone who tries to create the same application.

## Common

- The book uses JavaScript but I used TypeScript.
  - GraphQL itself has a type system, so I think TypeScript and GraphQL are compatible.
- Adopted a Monorepo directory structure.
  - Used [yarn workspace](https://classic.yarnpkg.com/blog/2017/08/02/introducing-workspaces/) to put all packages together.
- Used [npm-run-all](https://github.com/mysticatea/npm-run-all) to enable to run commands for the front-end and back-end at once.
- Used [lint-staged](https://github.com/okonet/lint-staged) and [husky](https://github.com/typicode/husky) to run Prettier when committing.
- Add ESLint etc.
- Sorry for skipping tests...

## back-end

- Used [typeorm](https://github.com/typeorm/typeorm) and [type-graphql](https://github.com/MichalLytek/type-graphql) to define the GraphQL schema and DB schema conveniently.
  - type-graphql automatically generates the schema file :)
  - It might be better o try [Nest.js](https://github.com/nestjs/nest)...?

## front-end

- Used [create-react-app](https://github.com/facebook/create-react-app) to create a TypeScript based project.
  - Created only the user list view and login feature.
  - The React way in the book seemed a bit old so I used React hooks actively.
- Used [graphql-code-generator](https://github.com/dotansimha/graphql-code-generator) to generate the types for TypeScript from the GraphQL schema that the back-end generated.
- Child components defines only GraphQL fragments and Root component should construct the whole query as much as possible (Fragment colocation).
- [Login feature](https://github.com/danimal141/learning-graphql-ts/blob/main/client/src/components/AuthorizedUser/index.tsx) was a bit hard for me because it's my first time to use Mutation...
  - The book uses `Mutation` component、but I used React hooks instead.

## Conclusion

- GraphQL is awesome.
- TypeScript and GraphQL are compatible.
- `typeorm` seems good for back-end developments.

## References

- https://www.oreilly.com/library/view/learning-graphql/9781492030706/
- https://classic.yarnpkg.com/blog/2017/08/02/introducing-workspaces/
- https://github.com/mysticatea/npm-run-all
- https://github.com/okonet/lint-staged
- https://github.com/typicode/husky
- https://github.com/typeorm/typeorm
- https://github.com/MichalLytek/type-graphql
- https://github.com/nestjs/nest
- https://github.com/facebook/create-react-app
- https://github.com/dotansimha/graphql-code-generator
Heroku Deploy Error: Uglifier::Error: Unexpected token: punc ({). To use ES6 syntax, harmony mode ...
Published: 2021-01-24 04:53:34

ERROR: Uglifier::Error: Unexpected token: punc ({). To use ES6 syntax, harmony mode must be enabled with Uglifier.new(:harmony => true).

Try replacing

# production.rb
config.assets.js_compressor = :uglifier
# with
config.assets.js_compressor = Uglifier.new(harmony: true)

https://github.com/rails/webpacker/issues/1285
Rails - sqlite to pgsql
Tags: pg
Published: 2021-01-24 04:51:43

gem 'pg'

/home/tao/gameideas-rails-jquery/config/database.yml
```
default: &default
  adapter: postgresql
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  timeout: 5000
development:
  <<: *default
  database: db/development
# Warning: The database defined as "test" will be erased and
# re-generated from your development database when you run "rake".
# Do not set this db to the same as development or production.
test:
  <<: *default
  database: db/test
production:
  <<: *default
  database: db/production
```
SonarQube setup on macOS (part 1)
Tags: sonarqube
Published: 2021-01-24 04:28:02

Install SonarQube from 
https://www.sonarqube.org/downloads/

You can unzip sonarqube-8.6.0.39681 or whatever version you have downloaded.

Once unzipped, move to macosx-universal-64 using command:
_cd Downloads/sonarqube-8.6.0.39681/bin/macosx-universal-64_
 
__To Start SonarQube:__
./sonar.sh start

once sonarqube is started you can see message:
Starting SonarQube...
Started SonarQube.

__You can check if sonarqube is running or not using :__
./sonar.sh status

SonarQube is running (1731).

Open a browser and check port 9000
http://localhost:9000/

In order to change the default 9000 port, you can move to conf folder where you can see a file _sonar.properties_, where default port 9000 can be changed.

__To Stop SonarQube:__
./sonar.sh stop

__Prerequisite for sonarqube:__

If not installed previously, please install Java 11.
https://www.oracle.com/technetwork/java/javase/downloads/jdk11-downloads-5066655.html

In case of issues like __Error as “wrapper” cannot be opened because the developer cannot be verified__
Please check the solution provided [here](https://community.sonarsource.com/t/sonar-cannot-start-once-updated-to-macos-catalina-error-as-wrapper-cannot-be-opened-because-the-developer-cannot-be-verified/16439/2)

Part 2: https://dev.to/shivani15sharma/running-sonarqube-to-check-javascript-code-part-2-730
Code Smell 58 - Yo-yo Problem
Tags: codenewbie, codesmell, tutorial, webdev
Published: 2021-01-24 03:04:56

*Searching for a concrete method implementation? Go back and forth, up and down.*

TL;DR: Don't ab(use) hierarchies.

# Problems

- Deep Hierarchies

- Subclassification for Code Reuse

- Readability 

- Low Cohesion

- High Coupling
 
# Solutions

1.  Favor composition over inheritance.

2. Refactor deep hierarchies.

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/85826dec4db583e6301c9c45a625a246)
```php
<?

abstract class Controller {

}

class BaseController extends Controller {

}

class SimpleController extends BaseController {

}

class ControllerBase extends SimpleController {

}

class LoggedController extends ControllerBase {

}

class RealController extends LoggedController {

}

```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/d50419e3b895ee4d4341ca3c31faa091)
```php
<?

interface ControllerInterface {
  
}

abstract class Controller implements ControllerInterface {

}

final class LoggedControllerDecorator implements ControllerInterface {

}

final class RealController implements ControllerInterface {

}
```

# Detection

Any linter can check for suspects against a max depth threshold.

# Tags

- Hierarchy

# Conclusion

Many novice programmers reuse code through hierarchies. This brings high coupled and low cohesive hierarchies. 

[Johnson and Foote](http://www.laputan.org/drc.html) established in their paper this was actually a good design recipe back in 1988. We have learned a lot from there.

We must refactor and flatten those classes.

# Relations

{% post https://dev.to/mcsee/code-smell-11-subclassification-for-code-reuse-1136 %}

# More info

%[https://en.wikipedia.org/wiki/Yo-yo_problem]

{% post https://dev.to/mcsee/coupling-the-one-and-only-software-design-problem-2pd7 %}

[c2](https://wiki.c2.com/?DeepClassHierarchies)

[Hierarchies should be deep by Johnson and Foote](http://www.laputan.org/drc.html)
 
* * *

>   An error arises from treating object variables (instance variables) as if they were data attributes and then creating your hierarchy based on shared attributes. Always create hierarchies based on shared behaviors, side.

_David West_
 
* * *
 
{% post https://dev.to/mcsee/software-engineering-great-quotes-26ci %}

* * *

This article is part of the CodeSmell Series.

{% post https://dev.to/mcsee/how-to-find-the-stinky-parts-of-your-code-1dbc %}