teleren/devto huggingface dataset:
Think responsive with flexbox
Tags: css, design, responsive, webdev
Published: 2020-05-02 17:54:15

Now more than ever, building a website that follows the guidelines of responsive design is critical. With the variety of electronic devices on the market, having a website that looks good on all screens will help you reach more users. Writing hacks in your code to detect if your user is browsing with an iPhone or an Android is simply not enough!

Thankfully, having a responsive website is not the Herculean task that it might seem in the first place. One of the keys is to create your website with a mobile-first mindset from the get-go. Implementing responsiveness in the middle of the development cycle might cost you a lot more work. Your software engineers will more than likely end up re-writing code that they pushed recently.

So, what does it take to develop a responsive website? Knowing CSS and its subtrlties is a vital skill for this purpose! It is common to say that developers don’t like this programming language. CSS has weaknesses, for sure, but its evolution and the great libraries such as SASS and Styled Components have changed everything. Also, using Flexbox layout is going to make your life so much easier! One of the concepts behind Flexbox is that you don’t need to specify anymore the size of your elements on the page. Instead, just like with CSS Grids, you describe the layout you wish your view to adopt.

This focus on the layout of the page rather than the size of the different “boxes” is exactly what we are looking for when it comes to responsive design. No matter the resolution of your user’s screen, a well-used Flexbox will guarantee that it will look good for them, even if the aspect ratio is completely unorthodox. Of course, you can also use what is called media queries to implement breakpoints. That way, you can simply dictate the layout of your page based on the width and height of your user’s screen. Typically, you offer 3 different layouts for your application: one that looks good on smartphones, one for tablets, and one for large screens. Unfortunately, with the release of new devices with bigger screens, this approach is not scalable as you will have to constantly update where these breakpoints are. That’s where Flexbox shines. It has this little extra thing that can not be achieved by media queries: It shrinks or extends the dimensions of an element based on the size of its neighbours. And that’s how your website can look good on any screen!

However, if your developers started styling your website by hardcoding sizes in pixels, existing views are not going to play well with Flexbox, which works better when it has the freedom to decide how big or small everything on the page should be to fit in the layout you want. That’s why responsive design must be thought out before you start creating your first pages. And once you have established a framework for your views, styling will be a breeze! You’ll see!
The CSS Trick You Didn't Know About...
Tags: todayilearned, beginners, webdev, productivity
Published: 2020-05-02 17:49:21


Let's me show a simple trick that could speed up your workflow while working with CSS.

Sometimes, you need the CSS of a component that you might have found on a website you like.
Many times, I am looking for design inspiration and when I find something that I like, I get curious about how the styling was made...
{% youtube 15VYQKWei2k %}
This simple trick that I am going to show you, it is going to help you to extract the CSS from any given website. 

I felt in love with this feature as soon as I discovered its existence.

It is super easy!

1. **Go to the website** you like.
2. **Open the Chrome DevTools**
3. **Select the component** that you want to extract the CSS.
4. **Right-click on the element** in the Chrome DevTools and...
5. Click the **Copy -> Copy Styles**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mnmdx50da1bvnw2srk17.png)
6. **Copy the CSS in your code!**

Done. That's all you really need to copy the CSS styles from any part of any given website!

Pretty amazing!

### ABOUT THE AUTHOR
Domenico is a tech lead and software developer with a passion for design, psychology, and leadership. 
If you need help with software development, you need consultancy for your technical challenges or you need a leader for your software team or just want to collaborate online, feel free to contact me!

![Follow me](https://images.unsplash.com/photo-1576259222107-6c9767685742?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1951&q=80)


### FOLLOW ME

Do you know that I have a YouTube channel? [Subscribe!](http://bit.ly/YT_DOMENICOSOLAZZO)

Where can you find me?

**Youtube:** [Domenico Solazzo's Channel](http://bit.ly/YT_DOMENICOSOLAZZO)
**Instagram**: [domenicosolazzo](https://www.instagram.com/domenicosolazzo/)
**Linkedin**: [solazzo](https://www.linkedin.com/in/solazzo/)
**Medium**: [domenicosolazzo](https://medium.com/@domenicosolazzo)
**Facebook**: [domenicosolazzo](https://www.facebook.com/domenicosolazzo.labs/)
**Twitter**: [domenicosolazzo](https://twitter.com/domenicosolazzo)
**Snapchat**: [domenicosolazzo](https://twitter.com/domenicosolazzo)
**Github**: [domenicosolazzo](https://github.com/domenicosolazzo)
**Website**: [https://www.domenicosolazzo.com](https://www.domenicosolazzo.com)
**Dev.To**: [https://dev.to/domenicosolazzo](https://dev.to/domenicosolazzo)
**Hashnode**: [https://hashnode.com/@domenicosolazzo](https://hashnode.com/@domenicosolazzo)

**Watch the Full Video on Youtube**
{% youtube 15VYQKWei2k %}
Level101 — Amazon Üzerinde Ubuntu Sunucu Nasıl Açılır?
Tags: ubuntu, setupguide, aws
Published: 2022-08-15 11:33:22

---
title: Level101 — Amazon Üzerinde Ubuntu Sunucu Nasıl Açılır?
published: true
date: 2020-05-02 17:44:14 UTC
tags: ubuntu,setupguide,aws
canonical_url: 
---

### Level101 — Amazon Üzerinde Ubuntu Sunucu Nasıl Açılır?

Merhaba Arkadaşlar

Amazon üzerinde ubuntu sunucu kurulumu yapmak için aşağıdaki adımları izleyebilirsiniz.

Ec2 panele girip Launch Instance butonuna basılır.

![](https://cdn-images-1.medium.com/max/1024/1*qI4oFkirdZuKTNFJqYWa_Q.png)

Kurulum yapılacak linux distro versiyonu seçilir.

![](https://cdn-images-1.medium.com/max/1024/1*h42hOL8pui68xHDRAyW9aw.png)

Makine özellikleri seçilir.

![](https://cdn-images-1.medium.com/max/1024/1*X2tQE2xFs8Ju9MIa6uDh8w.png)

Yeni Key Pair ismi verilip, pem dosyası local’e indirilir.

![](https://cdn-images-1.medium.com/max/1024/1*AF3ChCbZbnwyrWPYCMkUow.png)

Bağlantı yapılacak makineye sağ tıklanıp Connect butonuna basılır.

![](https://cdn-images-1.medium.com/max/1024/1*DSTpLPZzSyuy2pMxQjF31g.png)

Pem dosyasının olduğu dizine gidilip Example adımda gösterilen şekilde SSH bağlantısı kurulur.

![](https://cdn-images-1.medium.com/max/1024/1*DLm66UTJxRiHxzHXwv6_0g.png)

Tebrikler başarıyla giriş yapıldı.
My first blog: can I get a review?
Tags: jekyll, githubpages, beginners
Published: 2020-05-02 17:42:48

Earlier in the year I made a blog with jekyll and github pages , [muna-writes](
https://munabedan.github.io/), I only wrote one post on it but with the dreadful covid-19 crisis, and staying at home I thought I might give blog writting a try once more.

Am currently working on a series I will be releasing next week.

A review of the blog would be really appreciated, comments on the looks and any constructive opinions on personal blog writting in general.
🌍Pomodoro Timer By FreeCodeCamp (JS) [YouTube LIVE]
Tags: javascript, tutorial, frontend, freecodecamp
Published: 2020-05-02 17:17:19

⬇️ In this video, I 'll show you how to create a Pomodoro clock using javascript, jquery and bootstrap!
The inspiration for this project is coming from FreeCodeCamp.

In FreeCodeCamp you can find all the user stories. I'm going to implement only a few of them.
-User Story: I can start a 25 minute pomodoro, and the timer will go off once 25 minutes has elapsed.
-User Story: I can reset the clock for my next pomodoro.
-User Story: I can customize the length of each pomodoro.
-User Story: After 'break' or 'work' is done you'll hear a sound.

###If you watched the video you know in the end I messed up.
Here is the correct code:
I misspelled the function 'onclick'
I capitalized the 'C'... it should have been 'onclick'
That was the only problem :) 

###Useful links
- Codepen: https://codepen.io/EleftheriaBatsou
- Background sound: http://soundbible.com/grab.php?id=1377&type=mp3
- Working project: https://codepen.io/EleftheriaBatsou/pen/ZEbXJLV?editors=0010
- Instructions on FCC: https://www.freecodecamp.org/learn/front-end-libraries/front-end-libraries-projects/build-a-pomodoro-clock
- External Library for Animation: https://www.jqueryscript.net/demo/Customizable-Liquid-Bubble-Chart-With-jQuery-Canvas/ and https://www.jqueryscript.net/demo/Customizable-Liquid-Bubble-Chart-With-jQuery-Canvas/waterbubble.js

###If you guys recreate this project send me a link to check it. 

************************************

👋Hello, I' m Eleftheria, an app developer, master student, public speaker, and chocolate lover.

🍩Would you care about buying me a coffee? You can do it here: [paypal.me/eleftheriabatsou](paypal.me/eleftheriabatsou) but If you can't that's ok too!

**************************************

🙏It would be nice to subscribe to my [Youtube](https://www.youtube.com/c/EleftheriaBatsou) channel. It’s free and it helps to create more content.

🌈[Youtube](https://www.youtube.com/c/EleftheriaBatsou) | [Codepen](https://codepen.io/EleftheriaBatsou) | [GitHub](https://github.com/EleftheriaBatsou) | [Twitter](https://twitter.com/BatsouElef) | [Site](http://eleftheriabatsou.com/) | [Instagram](https://www.instagram.com/eleftheriabatsou/)
Which URL Shortener Tool Do You Use and Why? 
Tags: discuss
Published: 2020-05-02 17:02:43

**There are many URL shortener tools available in the market some are free and many require paid subscriptions to use their service.**

Here are few URL shortener tools I already know about:
 - bitly,
 - tinyURL,
 - rebrandly,
 - shorturl.at
 - t.co - twitter

All the above tools are fast and secure, they also come with url hit tracker that let you know how many clicks your short links get.


But the URL shortener tool I use is [longurl.in](https://longurl.in), created by me and is free to use.

I created my own URL shortener tool using and named it longURL.in. It is built using Next.js, Typescript, serverless and MongoDB cloud. 

**Features:**
- It is fast and secure, communication is happening through HTTPS,
- It always generates the same short URL for the same long URL, I did because I wanted a one to one mapping for a long URL, so that the database space consumption is less.
- Shortened URLs read the metadata of the long urls when shared in social networking sites so that the short links don't look like spam links.
![longurl.in-thumbnail](https://i.imgur.com/6uLBVG9.png)
- It is hosted in AWS cloud.

**Not Implemented**
 - It does not monitor how many hits a short URL gets.

**Please comment which URL shortener tools do you use and why?**

**If you have any suggestion or feedback, please comment**
Dark Mode with Sass and CSS variables
Tags: sass, darkmode, cssvariables, css
Published: 2020-05-02 17:01:19

---
title: Dark Mode with Sass and CSS variables
published: true
description: How to implement dark mode on a website using Sass and CSS variables 
tags: sass, dark mode, css variables, css
---

Implementing dark mode with Sass is hard because it is a preprocessor language. Any changes implies a new generating process and a page refresh. Therefore it is impossible to switch from light to dark - or the way around - in real time.

The CSS variables instead are accessible and can be changed dynamically at any time. 

Why not take advantage of potential of the two languages ​​together?

## Step 1 - Create colors variables in Sass

Declare the Sass variables dedicated to colors:

```sass
$color-black: rgb(0,0,0);
$color-white: rgb(255,255,255);
$color-gray-light: rgba($color-white, .15);
$color-gray-dark: rgba($color-black, .15);
```

Generally I use dedicated files to store project variables like _settings.scss or _design-tokens.scss depending on project complexity. 

## Step 2 - Create element-scoped CSS variables
I declare the CSS variables that will be affected by theme switch, using element-scoped naming:

```sass
:root {
  --color-page-background: #{$color-white};
  --color-text: #{$color-black};
}
```

Pay attention to use escaping Sass syntax `#{$variable}` otherwise the code is not compiled.

## Step 3 - Create basic CSS styles
I declare the two background-color and color properties on the `<body>` using the dedicated CSS variables:

```css
body {
  background-color: var(--color-page-background);
  color: var(--color-text);
}
```

## Step 4 - Add dark mode variables change 
Through the use of a `.dark` class to be added to the `<body>` I change the value of the CSS variables by inverting the Sass variables:

```sass
.dark {
  --color-page-background: #{$color-black};
  --color-text: #{$color-white};
}
```

You can also decide to use data-attributes if you prefer such as `data-theme="dark"`. The decision is up to you and the coding conventions defined with your team.

## A single style.scss file

If you use a single `style.scss` you could import setting variables first using Sass partials. Then put dark mode at the end of the file.
```sass
// Settings
@import 'setting/tokens' // Sass variables
@import 'settings/global'; // CSS variables

// other CSS stuff here

// Dark mode
@import 'trumps/dark'; // CSS variables for dark mode
```

Remind to use CSS variables for all those components you want to control with dark mode.

## Benefits
Following this way, we can **manage layout changes** foreseen by the light/dark switch with few lines of code, **using Sass partials for code modularity** without having to create dedicated dark theme files or introduce complex logic in Sass. 

Try this [demo con CodePen](https://codepen.io/zetareticoli/pen/MROMZE)
Simplex node.js http server
Tags: javascript, node
Published: 2020-05-02 16:58:41

[Comment]: # (All of this is placeholder text. Use this format or any other format of your choosing to best describe your project.)

[Reminder]: # (Make sure you've submitted the Twilio CodeExchange agreement: https://ahoy.twilio.com/code-exchange-community)

[Important]: # (By making a submission, you agree to the competition's terms: https://www.twilio.com/legal/twilio-dev-hackathon-terms)


## Introduction
Hello everyone, I've built a simple Node.js Http-Server with router. I wanted to build a server with routing support without using any third party libraries.

Right now it does not support any middleware or request body parsing, it is something i want to explore adding in the future.

#####Key supported features:

MIME types for most common files
Serves HTML, JS, CSS, plain text and images
Serves index.html as a default directory index
Responds with error codes for missing files
Ability to set route aliases
Ability to set custom routes

### Usage
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/14v8n4zca4hrxlklogin.png)

#####Static assets
Static assets are served from /public directory

/public - HTML files
/public/static
/public/static/css - CSS files
/public/static/images - Images
/public/static/js - Javascript files

#####Route Aliases
Route aliases can be set in /routes/aliases.js

  "/": "/index.html",
  "/about": "/about.html",
  "/contact": "/contact.html",
  "404": "/404.html",

### Source Code
You can view source code on GitHub https://github.com/nvrenuff/simplex-http-server.

Feel free to use this for leaning purposes or simple non production projects.

Any feedback, recommendations are welcome :)
Footer Using Foundation CSS
Tags: css, html, webdev, beginners
Published: 2020-05-02 16:39:05

Footer most important for the website with an important link and some basic information. So here we design basic Footer Using Foundation CSS framework with some CSS properties.

In these elements, we used the foundation grid with a container and responsive columns classes. Also, we used the bottom footer for a show credit purpose with some links. To make responsive with mobile and tablets side we used responsive columns classes. To make responsive for tablets and the mobile side we used media queries.

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

[Download Source Code](https://w3hubs.com/footer-using-foundation-css/)
🔐 Intro to managing secrets using Mozilla SOPS 🔐
Tags: security, sops, devops
Published: 2020-05-02 16:38:46

---
title: 🔐 Intro to managing secrets using Mozilla SOPS 🔐
description: Discovering a cheaper and more convenient alternative to Vault 
tags: security, sops, devops
published: true
---

It should go without saying that secrets, such as passwords and API keys, should never be committed to any repository hosting services such as Github or GitLab in plaintext.  

But how to share secrets with your team and maintain version control?

## The old classic: Vault

One solution is to provision a [Vault](https://www.vaultproject.io/) server, which has built-in access control and secrets management. 

You can then write scripts to automatically fetch a project's secrets according to the current environment using Vault's API and know that a lot of the work to secure access to those secrets is being done for you.

### Potential drawbacks

However, the drawbacks to this approach are the additional overhead and cost to maintain Vault on a server (most likely on a Kubernetes cluster in the cloud). 

For small organisations without a dedicated DevOps team, you also need to have at least one expert on hand to maintain and debug the vault in the event it goes down, or more likely is "sealed". 

In fact, every time a node in the cluster is restarted by your cloud provider (which depending on your pricing options, can occur fairly regularly) it will automatically seal the vault and require someone to manually port-forward into the cluster to "unseal" it with the appropriate set of access keys. 

Relying on a secrets management system that affects every project when something goes wrong is less than ideal.

## SOPS for the win (with caveats :wink:)

[Mozilla SOPS](https://github.com/mozilla/sops) (short for Secrets OPerationS) is a neat little tool for encrypting files in formats such as YAML, JSON and ENV.

For example, say you have a simple YAML file storing the following secret:

```
// values.yaml
super: secret
```

You can encrypt this file by running `sops -e -i values.yaml`, which will output something like this:

```
// values.yaml
super: ENC[AES256_GCM,data:PGCefhm7,iv:mjtXDC2EDTbjDurf0qAOS/OaUqgZs9RHAH6cTwjkXvc=,tag:CRtNcAZhOdv7G1tYfBIIOA==,type:str]
```

You can now keep `values.yaml` in your code repository in a much more human readable format that works will with version control (and makes git diffs much easier to handle).

In order to decrypt this file, SOPS needs the correct keys. 

It pairs well with all the major cloud provider key management services so you can still reap the benefits of controlling access to the required keys to decrypt the files.

You can then rotate keys and create key groups based on which environment you'd like to decrypt the file in. 

Pretty hand right?

I've read that this approach does not scale up well, which might be a major drawback for larger teams or projects.

Let me know in the comments if you've worked with SOPS and what your experience with it has been, good or bad!
Magento 1 to Magento 2 Migration
Tags: magento1tomagento2migration, magento20upgrade, upgradetomagento20, magento2migration
Published: 2020-05-02 16:29:54

Magento officially announced its withdrawal from its Magento 1.x support from 30th June 2020 onwards, Hence it is final now that those who fail to migrate their store from Magento 1 to Magento 2 won’t receive security updates after 30th June, 2020. It means any Magento eCommerce store not yet migrated from M1 to M2 is prone to risk as it will be functioning on an unsupported software.
For more Detail follow the link magento 1 to magento 2 migration
https://www.infigic.com/blog/migrate-from-magento-1-to-magento-2
Learning a Foreign Language? Try Letra: A New Tab Extension for Passive Language Learning ☀️
Tags: showdev, vue, opensource, productivity
Published: 2020-05-02 16:17:05

*...and just to be 100% clear, I'm talking about foreign languages like German and French. Not programming languages.* 😅

**Why not learn something every time you open a new tab?**

Introducing **Letra**. A Chrome Extension (*Working on a Firefox extension as well!*) that serves as a supplementary guide for learning a new language. A new word will pop up in your new tab every day, in your chosen language(s).

### [Go to the Extension](https://chrome.google.com/webstore/detail/cjodkkjokggcaeacdhjliobekbnnmoio/)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1j0ywl575fzvfps1r5kn.png)

### ✨ Features
* New word everyday
* Listen to the word in the chosen language
* New inspirational quote about learning
* Dark Interface

### 🌎 Available Languages
* 🇩🇪 German
* 🇫🇷 French
* 🇪🇸 Spanish
* 🇯🇵 Japanese
* 🇰🇷 Korean
* ➕ More to come!

Launched this on [ProductHunt](https://www.producthunt.com/posts/letra-2) yesterday, too. This is the first side project I created and it has been a crazy ride, but that's a story for another time.

Built with **VueJS** and **NodeJS**. Here's the repository for the extension! Do click on the **Star** ⭐️ button if you found it interesting

{% github jayehernandez/letra-extension %}

EDIT: You can now contribute to this repository as well! 🎉

Let me know if you decide to try it out for yourself. I would love to hear your thoughts!
May 2nd Side Project Checkin
Tags: discuss, sideprojects, checkin
Published: 2020-05-02 16:05:20

---
title: May 2nd Side Project Checkin
published: true
description: Share your sideproject with the dev.to community.
tags: discuss, sideproject, checkin
series: Side-project Checkin
---
It's Saturday, dev.to community! What's everyone working on? Are you in need of assistance? Would you like to work with someone else on a project? Or are you just excited to share your cool idea? Personally, I'm working on a Graphql service that provides the basic rules for Dungeons and Dragons. I'm starting to close in on having it in a deployable state, which has me super excited.