teleren/devto huggingface dataset:
CSS: How to make a website responsive
Tags: css, webdev, tutorial, codequality
Published: 2021-02-07 10:57:40

`Hello World!` The third episode of the series  - A CSS/JS trick in 5 minutes - [Last Article](https://dev.to/devlorenzo/css-how-to-make-a-gradient-animation-3a63) was about a CSS trick (How to make a gradient animation). 
This time I want to show you another CSS trick: How to make a website responsive (or how media queries work).

--- 

It's not very difficult, I just want to underline some important things. First, when you want to do something responsive always use Google device toolbar while having this in mind:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n78axuwm0fm8c6puw2ir.jpg)

Then you add a media query for these 5 different screen sizes: 
```
@media only screen and (max-width: 1200px) {
  body {
    // Change design here 
  }
}
```
I recommend you start copying your 5 media queries and then editing one at once. Remember to check frequently your website to be sure of what you're doing. 

---

You can also use media queries to check screen resolution (in dpi) and orientation. 
```
@media (orientation: landscape / portrait) {
  body {
    // Change design here 
  }
}

@media (resolution: 150dpi) {
  body {
    // Change design here 
  }
}
```
---

I created for example a responsive title here:
[Click Me](https://codepen.io/DevLorenzo/pen/LYRJbVw)

{% codepen https://codepen.io/DevLorenzo/pen/LYRJbVw %}

---

Hope this helped and thanks for reading!

> Please smash that like button to make me understand that you want the series to continue :)

---

Check this article: [The ultimate compilation of Cheat sheets (100+) - 🎁 / Roadmap to dev 🚀](https://dev.to/devlorenzo/the-ultimate-compilation-of-cheat-sheets-100-268g)

{% link https://dev.to/devlorenzo/the-ultimate-compilation-of-cheat-sheets-100-268g %}

---

## **[Subscribe to our newsletter!](https://worldindev.ck.page/)**
A loooong, and fun, weekly recap for you 
Free PDF version of my articles
Highly customizable inbox
That's --> free <-- and you help me!
Dash + Alfred - instantly search offline documentation sets for 200+ APIs, 100+ cheat sheets, and more!
Tags: dash, alfred, productivity
Published: 2021-02-07 10:33:49

---
canonical_url: https://blog.natterstefan.me/dash-alfred-instantly-search-offline-documentation-sets-for-200-apis-100-cheat-sheets-and-more
---

I am a big fan of productivity tools, which make my life easier. Anything that gets me where I want to go with just a few clicks or shortcuts is at least worth a test phase. So it's no surprise that [I'm a big fan of Alfred](https://dev.to/natterstefan/week-in-review-week-23-20-33g0) - the Spotlight alternative for macOS. In this article, I don't want to go into the advantages and why the Alfred Powerpack is worth every penny, but rather jump straight into today's topic.

Who hasn't experienced that feeling of forgetting the syntax for a certain task in a programming language? Now you are faced with the problem of finding the answer. What do you do, like many others? Sure, you google it. A few clicks in the results later, you are hopefully at your destination and have found the famous green tick on StackOverflow. But what if I told you that there is an alternative that works even offline?

Let me introduce you: [Dash](https://kapeli.com/dash?ref=natterstefan.me) - the "Indispensable masterpiece for developers." (Stefan Fürst, Media Atelier Maker of GrandTotal).

Dash gives you 200+ API documentations instantly with offline access! Together with the matching Alfred workflow, any search in the Dash library is just a few keystrokes away! I'll show you how in just a few steps.

# Setup

First of all, you need to install [Alfred](https://www.alfredapp.com/) (macOS only) and [Dash](https://kapeli.com/dash). And for the whole thing to work, you also need the [Alfred Powerpack](https://www.alfredapp.com/powerpack/v). If you're not convinced right away, install the free version of Alfred and get warmed up with the program first. You'll see that you'll want the Powerpack in the end.

Once you've installed the two apps, all you need is the workflow to go with them. It's very simple. Open Dash and go to Preferences > Integration > Alfred and follow the instructions.

# Usage

![Open Alfred and type in "javascript array" for example.](https://dev-to-uploads.s3.amazonaws.com/i/1r7vbaru0exgea53l3xz.png) 

Now that you have everything installed, it's time to see the combination in action. Open Alfred and type in `javascript array` for example. The Dash Workflow will immediately suggest the appropriate API documentation for the app. Select one and Dash will open the page in a separate window.

Now you can read the documentation at your leisure and clarify your open questions.

![Dash Window with Javascript array method open](https://dev-to-uploads.s3.amazonaws.com/i/e5czwmla4xu9k8fnpyp3.png)

## You got questions?

Do you have any questions about this productivity tip? Then write me a comment or contact me on [Twitter](https://twitter.com/natterstefan). I look forward to your feedback.
Revisiting the D in SOLID
Tags: computerscience, cleancode, solid, java
Published: 2021-02-07 10:29:29

*Photo by Pavel Nekoranec on Unsplash*
This is a continuation of the SOLID. In the last post, I covered the I and now we will be continuing with the last D. So if you didn't check the last post, feel free to click on the link: https://dev.to/sightlessdog/revisiting-the-s-in-solid-adg

#Dependency Inversion Principle
The Dependency Inversion Principle is based on the Open/Closed Principle and the Liskov Substitution Principle. And it basically states that high-level modules shouldn't depend on low-level modules. 
Simply put, never depend on anything concrete, only depend on abstractions, which never depend on details but the other way round, details depend on abstractions. 

![Dependency Inversion Uml](https://dev-to-uploads.s3.amazonaws.com/i/pjkce457fgrijm2hc1u1.PNG)

As you see in the picture, inversion doesn't mean that the low-level module now depends on the higher-level one. Because in conventional application architecture, low-level components are designed to be consumed by the higher-level components.

time for a simple example, right? 

```java
public class SteelWheel {
//properties and methods
}
```
```java
public class Car {

public Car (SteelWheel wheel) { 

}
}
```

As we can see our car class is forced to depend on a concrete implementation of wheel. And what does our principle say?
> Never depend on anything concrete, only depend on abstractions
We did violate our principle, right?
 
Well, you may be wondering right now, oh, the car class looks good, why should I care this much?.
Mmmm, good question, but imagine this with me. You would want one day to change your SteelWheels to AlloyWheels. What would you do the car class?
I hope that you are getting my point, if you change later the car class, you would violate the open/closed principle.
The car class shouldn't care about the wheel being used. 
```java
public interface Wheel {
}
```

```java
public class SteelWheel implements Wheel {
//properties and methods
}
```
```java
public class Car {

public Car (Wheel wheel) { 

}
}
```

And that's how the low-level module and the high-level one depend on the abstraction.

#Conclusion
I hope that this series was helpful. Wish you a good day!

#Sources 
https://en.wikipedia.org/wiki/Dependency_inversion_principle
Robert C. Martin “Principles of OOD”
Meyer, B. (1997): Object-Oriented Software Construction, 2nd edition
http://www.cvc.uab.es/shared/teach/a21291/temes/object_oriented_design/materials_adicionals/principles_and_patterns.pdf
JS Test #7: Is this an array?
Tags: beginners, codenewbie, javascript, programming
Published: 2021-02-07 10:11:03

Is `array` an array?	

<!--more-->

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

At line one we create an array and bind it with the `array` constant. Then the type of the value of this constant is evaluated by the `typeof` operator.

There’s no such type as `array` in JS, so it’s impossible to see the message `ARRAY!` on the screen. In fact, all JS arrays are objects, so the execution goes into the `else` branch, and `SOMETHING WEIRD` is printed on the screen.

---

**ANSWER**: `SOMETHING WEIRD` will be logged to the screen as all JS arrays have the type `object`.
How to send emails in swiftUI
Tags: swiftui, swift, ios
Published: 2021-02-07 10:10:34

Opening an email in an iOS application is a common feature, and I think most applications have it. But sometimes developers' complex mind makes its implementation more complex than it is.

In the case of swiftUI, the implementation doesn't change, you can use the old code to implement it. In my project, it works perfectly. You can find the full version of the code below.

Here are some requirements implemented in that file.
1. Create and use an object to help you checking the status of the mail service and handling the MailCompose's delegate.

    I used a static object to able to reuse it in my project.
    ``` swift

        class EmailHelper: NSObject {
            /// singleton
            static let shared = EmailHelper()
            private override init() {}
        }

    ```
    <span> </span><br/>

2. Able to open the external mail or settings app in case users didn't set up any email.

    I just supported the external mails app such as Gmail, Mail. So, if you want to add more, please do it yourself. Note, you have to add Schemes of the app which you want to support.
    ``` swift
        
        /// Remember to add the below code to Info.plist
        ///    <key>LSApplicationQueriesSchemes</key>
        ///    <array>
        ///       <string>googlegmail</string>
        ///    </array>

    ```
    <span> </span><br/>

3. Related to swiftUI, you don't have to use UIViewRepresentable or UIViewControllerRepresentable here, because you just want to open the mail but don't want to embed it in a View
    ``` swift

        struct SettingsView: View {
            var body: some View {
                return Form {
                    Section(header: Text("SUPPORT")) {
                        Button("Help") {
                            EmailHelper.shared.send(subject: "Help", body: "", to: [GlobalConstant.App.contactEmail])
                        }
                    }
                }
            }
        }
    ```
<span> </span><br/>

Happy coding!

------

{% gist https://gist.github.com/tranthanhvu/0fba1d8665153a76c95dfc0b2862acf9 %}
Introduction to API Gateway
Tags: microservices, apigateway, api, webdev
Published: 2021-02-07 10:09:25

**Originally posted on [Ashraful's Blog](https://ashraful.dev/posts/introduction-to-api-gateway.html)**
## :bulb: What is an API Gateway:question:
An API gateway is an API management tool that sits between a client and a collection of backend services.

An API gateway acts as a reverse proxy to accept all application programming interface (API) calls, aggregate the various services required to fulfill them, and return the appropriate result.
**In short:** An API Gateway is the abstraction layer between client and microservices.

## :fire: When to use an API Gateway:question:
Let's imagine that you are building a native mobile application for android and ios. In that case, you have two teams to develop the apps. On the backend side, you have separate services like Auth, Product, Cart, Order, etc. And you perfectly deploy the services. Let's assume the following IPs are assigned to services.
```
Auth     192.168.1.10
Product  192.168.1.11
Cart     192.168.1.12
Order    192.168.1.13
```
Now you tell your app team to call API according to the services' IP/Domain. Okay Good. Your business is good.  
After some days you realized to separate the Order and Payment service. Your backend team finished the job. And now the painful part is releasing the app(Android, iOS) and make sure that everyone gets the update. Both teams need to work just to change the API URL. Not only that, problems like this can arise at any time. So, here is a simple solution is, "API Gateway".

## :tada: How an API Gateway is solving your problem:question:
We just talk about the problem. Now let's talk about the solution. We just need to check the request URI and pass the request to the respected service. For example:
```python
# Something like this.
if request_uri == '/api/login/':
   pass_the_request(auth_service)
```

There are lots of API gateways that are already written for multiple purposes. For a small project, I'd like to use Nginx's reverse proxy. We'll talk about it later.
How to include span tags in an array?
Tags: help
Published: 2021-02-07 10:00:51

I am doing a page using React and I need to make some parts of the text bold. Normally I would do this using span tags but the problem is that the text is coming from an array. I tried including the span tag in the array by concatenation but I am getting a weird result. Anyone knows a workaround?
The result:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rxfhk0ex0bknk2nprj0g.png)
The code:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/d3tz81gclli9x4q3ls42.png)
AWS Cost Notification to Discord
Tags: aws, javascript
Published: 2021-02-07 09:54:07

AWS pricing system is very complicated, so there are many useful tools that can notify AWS cost daily or monthly.
Many tools are developed for Slack, but I love Discord.
Therefore, I developed AWS Cost Notification System for Discord.

This system can notify "Today's AWS cost" to Discord at 23 o'clock every day.
Also, that can notify "Last Month's AWS cost" to Discord at 23 o'clock first day of the month. (This can be changed at index.js)

All source code: https://github.com/K-Rintaro/aws-cost-discord-notify

![aws-cost-discord-notify](https://dev-to-uploads.s3.amazonaws.com/i/h8xh5qlri03gq9swki71.png)

# Requirement
node.js
npm packages
・aws-cost-explorer
・dotenv
・discord.js
・node-cron
・node-fetch


# How to use
aws-cost-discord-notify needs to use AWS Cost Explorer API.
That costs 0.01 USD every request.

1. Create your Discord bot at https://discord.com/developers/applications
2. Create AWS IAM user and get access key id & secret access key

Example policy:
```json
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": [
        "ce:*"
      ],
      "Resource": [
        "*"
      ]
    }
  ]
}
```
3. Create .env file and set Discord token, AWS access key and AWS secret access key that you got.
4. Get index.js from [GitHub repo](https://github.com/K-Rintaro/aws-cost-discord-notify) and set your Discord channel id. You can change notification time, too.



I hope I can be of any help to you.
Full Tutorial #6: Setting Up a Microservice API Gateway | Microservices Chat App Using React, Node.js, TypeScript and GraphQL
Tags: react, node, webdev, javascript
Published: 2021-02-07 09:32:37

**About Me:** I've been a professional web developer for just over 10 years now. I'm currently the lead web development instructor at [Better Coding Academy](https://codebetter.com.au), and as part of what I do, I post videos on our YouTube channel at [https://www.youtube.com/c/BetterCodingAcademy](https://www.youtube.com/c/BetterCodingAcademy).

_(Subscribe for awesome web development content!)_

Part 6 of the Microservices Chat App is here! In this episode, I start setting up the API gateway, complete with an Express server. I hope you enjoy!

{% youtube VHSZ6Yi9i8c %}

Happy coding!

Source code: [https://github.com/lucaschen/microservices-chat-demo](https://github.com/lucaschen/microservices-chat-demo)
Where are you!!?
Published: 2021-02-07 09:30:46

---
title: Where are you!!?
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---

*Where the hell are you Reaper?! Why have there been, no new posts!?*

Um, Firstly Hi, I'm good thanks. 

I'm alive, doing well, I just don't post much on dev.to because I remember mentioning that I'll be posting more and more on my own blog from now.
Which you can find here => [https://reaper.im](https://reaper.im) , and though the posts aren't frequent and you won't be notified of a new post or anything. 

It's more for people who actually like what I write and do.
It doesn't mean , I'm not active on Dev.to, I still read everything that's posted. I still comment and react on posts I like, I just don't post here anymore.

That's for the mails I got regarding no new posts...
Animated Background Effect On Hover Using CSS
Tags: animatedbackgroun, hoveranimation, cssanimation, htmlcss
Published: 2021-02-07 09:24:12

Hello Friend, today in this blog we will learn to create Animated Background Effect On Hover Using CSS. Earlier I have Shared How To Create Animated Background With Glassmorphism Calculator. Now it's time to build a CSS background effect on hover.
Animated background means the animation that happens on the screen backward of some UI designs. The animated background makes our designs more attractive and interesting.

As you can sess on the given image of this program [Ani Background On Hover], This is the real image that we are going to build. At first, these dots are in rest condition, when we take the cursor on the screen its starts to animate.

You can download all source code from the given link. <a href="https://www.codinglabweb.com/2021/02/animated-background-effect-on-hover.html">Click Here To Download All Source Code</a>
Underrated Web Dev YouTubers you should check out
Tags: webdev, react, javascript, node
Published: 2021-02-07 09:15:25

Many of us in the web dev community are familiar with teachers like Brad Traversy, Mosh, and Net Ninja. In this post, I will share 3 YouTubers who post quality web dev content with less than 100k subscribers. If you want to learn some advanced concepts in web technologies like react, node, etc. you might want to check them out.



## 1) Jack Herrington

I first saw Jack's channel in one of Brad's guest videos and the way he explained everything so crisply was really good for a channel of his size. He puts out advanced react content for eg. module federation using react, hooks using typescript, building chat apps, etc. 

Channel link: [Jack Herrington](https://www.youtube.com/user/jherr2006)

## 2) devmentorlive

devmentorlive is an industry-experienced software developer who does coding streams about react projects. His streams are usually an hour-long where he builds some custom react component or explains some new technology. At around 9k subs, this channel surely deserves more attention.

Channel link: [devmentorlive](https://www.youtube.com/c/devmentorlive/featured)

## 3) Javascript Mastery

With around 80k subs, this channel isn't that small as the ones above but for the quality of videos that this channel has, one must check it out. He puts on videos mainly on big react projects like building an entire MERN stack app, eCommerce, chat applications, and plenty more. If you're someone who likes learning by building projects you can check his channel out.

Channel link: [Javascript Mastery](https://www.youtube.com/channel/UCmXmlB4-HJytD7wek0Uo97A)


## 4) Leigh Halliday

Leigh's channel has awesome content if you want to dive deep into advanced React and Next.js. He has plenty of tutorials on various topics like react-query, Mapbox, react hooks, GraphQL, and many more. I am sure his channel is going to grow big real soon. Do check him out!

Channel link: [Leigh Halliday](https://www.youtube.com/user/leighhalliday)
Animated Text Background Effect In CSS
Tags: css, html, webdev, weeklyui
Published: 2021-02-07 09:13:23

Animated Text Background Effect is mostly used to show any text any within different animations. So here made an awesome Animated Text Background Effect In HTML and CSS with the help of background images.

Here just we used gif images to make these simple animation effects. To make the background perfect center and use the image in the background we used -WebKit-background-clip: text CSS properties.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

[Source Code](https://w3hubs.com/animated-text-background-effect-in-css/)
CSS: How to make a gradient animation and improve your websites
Tags: css, webdev, tutorial, codequality
Published: 2021-02-07 09:07:12

`Hello World!` The second episode of the series  - A CSS/JS trick in 5 minutes - [Last Article](https://dev.to/devlorenzo/js-random-background-color-change-4pof) was about a Javascript trick (How to have a random background color change). This time I want to show you a CSS trick: How to make a gradient animation.


We need two things, first to style the div that will be animated (it can also be the body):
```
.container {
/*Marine gradient: Grey, blue, violet, grey again */
  background: linear-gradient(
    -45deg,
    #bdc3c7,
    #2c3e50,
    #c33764,
    #1d2671,
    #141e30,
    #6dd5ed
  );
  background-size: 400% 400%;
  animation: backgroundChange 15s ease infinite;
}
```
I recommend you to write a comment in the code with the colors rather than just Hex values. Remember that the last hex in code will be the first color displayed. Change the animation direction with the degrees parameter (in this case, the animation will go from top left to bottom right). You can also change duration in seconds and animation type after that. 

Then you add the animation. In reality colors don't change, we are just moving the background:
```
@keyframes backgroundChange {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
```
You can easily add parts (25%, 75%) to change the animation how you need. 

---

You can have here a live preview:
[Click Me](https://codepen.io/DevLorenzo/pen/ExgpvJM)

{% codepen https://codepen.io/DevLorenzo/pen/ExgpvJM %}

---

Hope this helped and thanks for reading!

> Please smash that like button to make me understand that you want the series to continue :)

Check this article: [The ultimate compilation of Cheat sheets (100+) - 🎁 / Roadmap to dev 🚀](https://dev.to/devlorenzo/the-ultimate-compilation-of-cheat-sheets-100-268g)

{% link https://dev.to/devlorenzo/the-ultimate-compilation-of-cheat-sheets-100-268g %}

---

## **[Subscribe to our newsletter!](https://worldindev.ck.page/)**
A loooong, and fun, weekly recap for you 
Free PDF version of my articles
Highly customizable inbox
That's --> free <-- and you help me!
Vue vs React
Tags: vue, react, softwaredevelopment
Published: 2021-02-07 09:02:40

---
title: Vue vs React
published: true
description: 
tags: #vue #react #softwaredevelopment
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/7oj94bnk3c6zln1mhl2c.png
---

Vue.js gain a lot of popularity in the recent years, But is it convincing enough for developers to jump from react to vue ?
Let's discuss on what are the differences between these giants.