teleren/devto huggingface dataset:
5 Tips to Achieve Minimalism in Your Web Design
Tags: design
Published: 2019-08-21 08:35:06

The present online trend has a simple design that makes a website look attractive and appealing. This type of designs is known as a minimalist one that can be informative for every user who visits the website. The following are the five tips that can be used to create a minimalist website design.

##Tip 1. Minimal Clutter and Maximum Focus

Many new websites have their focus on a mix of many things and they even cover up the unimportant elements and information. This kind of problem mostly happens with the first time designers who would like to show their skills by displaying many widgets and other things on the web page. Identify the things that every visitor would search for in a website and work on it to create a minimalist website.

##Tip 2. Stay on the Upper Fold

Many people have the habit of not scrolling down the page to read the whole content. The visitors would always like to read the content on the first page of the website and above the fold. The web designers can improve the overall effectiveness of a website by keeping all the main elements the most needed call-to-action above the fold on a web page. Reduce the height of the header by inserting the sign-up forms and the buttons above the first fold in your web page.

##Tip 3. Bring down the Page Count

If you want your website to be an informative one, then you must bring down the page count so that the visitor would not confuse with the number of pages in your website. Too many pages in your website can mislead the visitors. While writing down the content for a website, always write from your visitors’ point of view, so that you can stick to the point and write the main content short. Also a paragraph of content should be in five or six lines, so that the visitors can read them quickly.

##Tip 4. Minimal colors for the best quality

The most common mistake that many new designers make while creating a website is the colors. The main key to create a quality design is to limit the colors in your website. If you are about to create a texture, then make use of the same color in different shades. Making use of too many colors on a website can hurt a human eye and the visitors can easily get distracted. Always choose two main colors that can be added everywhere in your website. If you are about to bring in a third main color to your website, then you are about to distract the visitors’ eyes from reading the content on your website. Follow different shades of the two main colors to create a minimalist website design.

##Tip 5. The 80/20 rule

The 80/20 rule can help you to simplify the overall website design and pushes the focus on the main content of your website. Identify the content on your website that has the focus on the topic so that the visitors can easily read the content without getting distracted.
Cannot read property 'digest' of undefined
Tags: secureorigin, cryptoapi, chrome
Published: 2019-08-21 08:26:38

I just had the strangest error while trying to generate a simple unique identifier from `SHA265(Date())`.

# The problem
![Cannot read property 'digest' of undefined](https://thepracticaldev.s3.amazonaws.com/i/01r6ku1wwjgatxvm21du.png)

My code looks like this and worked trouble-free developing on my [Spontaneous HTTP Server](https://dev.to/hoffmann/code-share-my-spontaneous-http-server-3l8k):
```javascript
async function genSessionId () {
  const msgBuffer = new TextEncoder('utf-8').encode(Date.now())
  const hashBuffer = await window.crypto.subtle.digest('SHA-256', msgBuffer)
  const hashArray = Array.from(new Uint8Array(hashBuffer))
  return hashArray.map(b => ('00' + b.toString(16)).slice(-2)).join('')
}
```
(source: [MDN](https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/digest#Converting_a_digest_to_a_hex_string))


# The search
Thanks to the completely meaningless error message I was stunned and had to look really hard to find the reason (I didn't find anything on [the dev docs](https://devdocs.io/dom/subtlecrypto/digest), [or MDN web docs](https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto)). Thanks to [some guy on the internet](https://community.auth0.com/t/angular-sample-project-with-chrome/27497/4) I was directed in the right direction and could finally search in the [right corner](https://www.chromium.org/blink/webcrypto). Hidden the first paragraph, second indent you find the solution.

# The reason
> Access to the WebCrypto API is restricted to [secure origins](http://www.chromium.org/Home/chromium-security/security-faq#TOC-Which-origins-are-secure-) (which is to say https:// pages).

(Source: [Chromium](https://www.chromium.org/blink/webcrypto))

# The call
Websecurity is constantly improving, especially Chrome is not only implementing important web technologies with a breathtaking speed but also tightening security vastly. Making HTTPS the default is e.g. for sure the right thing to do.

But.

But we still need to be able to develop in our own setup without being patronized. This is the second experience that already cost me some time and will cost even more as I now have to find a way around this. The whole CORS rules are also very hindering and I wish I could have a switch to turn them of temporarily. Just for development. To be clear, not for the whole browser, I still need it for browsing, just for my dev servers.

# The update
Google Web Advocate DasSurma [replied](https://twitter.com/DasSurma/status/1164107593041756161) to my call: You can [add your own "secure origin"](chrome://flags/#unsafely-treat-insecure-origin-as-secure) via a chrome flag. ❤️
JavaScript Challenge
Tags: challenge
Published: 2019-08-21 08:25:44

Universal Lucky string:

Write a function(S) to find universal lucky string with following conditions-

1. All characters in S have the same exact frequency (i.e., occur the same number of times). For example, "aabbcc" is valid, but "baacddd" is not valid.

2. Deleting exactly 1 character from S will result in all its characters having the same frequency. For example, "aabbccc" and "aabbc" are valid because all their letters will have the same frequency if we remove occurrence of "c", but "aabbcccc" is not valid because we'd need to remove 2 characters.

@florin pop can you help me for this Js challenge?
Pythonistas, I need some zen!
Tags: help
Published: 2019-08-21 08:24:45

---
title: Pythonistas, I need some zen!
published: true
tags: help
---
I visit dev.to everyday and I learn a lot. The most attractive feature about DEV for me is being able to communicate with everyone and everything.

I realised this morning that If I could find a similar site for Python, I'd probably learn as fast as possible and still enjoy it. 

I'm curious to know what sites you visit daily for Python. I use reddit but most times get sucked into a different subreddit(like r/animalsbeingderps and r/thisismylifenow)

Im looking for a site with more conversation than instruction. Do you know any for Python?
User Authentication for Framework7 using Firebase (Video Tutorial)
Tags: framework, vue, firebase, javascript
Published: 2019-08-21 07:22:03

In this video tutorial I will give you detailed instructions how to signup, login and logout users really easily using Firebase. No backend or database needed! Firebase will take care of this.

Link to video
https://youtu.be/cYlSZLV5qN4

Source code
https://github.com/valnub/framework7-authentication-demo

My Blog
http://www.timo-ernst.net

Find me on Twitter
http://www.twitter.com/timo_ernst
code share: My Spontaneous HTTP-Server
Tags: http, docker, python, bash
Published: 2019-08-21 06:58:58

(Yes, I know, VSCode includes the wonderful [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer))

Here is my gaffer tape and spray foam solution that allows you to start your HTTP server couch potato style:

Ingredients:
* shell,
* zenity
* netstat
* docker (trinitronx/python-simplehttpserver)
* pwgen

Directions:
1. ask for directory
1. check for currently used ports
1. randomly select a nice free port
1. generate a unique container name
1. serve your directory via a HTTP-server
1. show link to address with option to close server

View the [source](https://github.com/HoffmannP/Spontaneous-HTTP-Server)
Why using React Native should be the default way of building Apps in 2020.
Tags: javascript, react, reactnative, 2020
Published: 2019-08-21 03:35:31

---
title: Why using React Native should be the default way of building Apps in 2020.
published: true
description: 
tags: javascript, react, react-native, 2020
---

I am the guy who quit coding several times in life, but deep inside my heart. I always felt like a programmer. I always wanted to be one. Here is the article I have written 8 months ago, describing my journey as a programmer. I described why I started with React.js for front end soon after learning javascript.

https://medium.com/@deol.shubham/why-i-started-with-react-for-front-end-web-soon-after-learning-javascript-fa6cf8f7efcd


In this article, I am going to write about React-Native and why this should be your first choice for building mobile applications.
React Native is growing, and so the community. Facebook just announced version 0.60 of react-native. It includes support for using Hermes with your project, and this is also the time when facebook also made Herms open-source. Hooray!!


https://facebook.github.io/react-native/docs/hermes


This came as a surprise for us, first releasing version which includes support for android x and much more, then open-sourcing Hermes. Of course, This release also contains a lot of breaking changes. All of our dependencies need to be updated to support version 0.60, but this is noting compared to benefits which we are going to get.


With this release, people are very excited and testing out Hermes with react native version 0.60. Performance of app has increased 2 x times, and which I guess eliminates one reason for not using react native apps. Now React native apps are going to be 2 x more performant.


Installing dependencies got easier
This is one more reason to use react-native as your first choice. Now React-Native includes support for auto-linking those dependencies which contain native code.

**This is how this works**
_
_Each platform defines its own platforms configuration. It instructs the CLI on how to find information about native dependencies. This information is exposed through the config command in a JSON format. It's then used by the scripts run by the platform's build tools. Each script applies the logic to link native dependencies specific to its platform._

Now, Mostly all we have to worry about writing javascript and witness the magic which react-native does for us.

There are a hell lot of other reasons to use React Native as your first choice, But the reasons I pointed out here are new additions to previous ones.

Read this blog for more info on why you should or shouldn’t use react-native.

https://bit.ly/31Wla6H

Finally,
Let me know in the comment section what other reasons can be there to use react-native to build mobile apps which are not pointed out previously. Consider this article as the ground for discussion which can lead us to better conclusions. :)
The Hardcoded, Dynamic and Hybrid Approach in Angular Apps
Tags: angular, typescript, javascript
Published: 2019-08-21 05:40:26

I see the problem of balancing hardcoding vs. dynamic UI rendering in Angular apps in almost every project. Here is a dead-simple guide to how to prioritize each in different phrases of an Angular project.

You can read the post here:
https://christianlydemann.com/hardcoded-dynamic-and-hybrid-approach-in-angular-apps/
Best way to avoid accidental modification of the file
Tags: unix, mac, tips, learning
Published: 2019-08-21 04:12:27

---
title: Best way to avoid accidental modification of the file 
published: true
description: 
tags: unix, mac, tips, learning
---
Recently I learned very useful tip to avoid accidentally modifying/editing a original file. This will work in all unix like systems including Mac.

The Idea is to just change file permissions to read only using chmod command as below
<code>
>chmod 444 file_name
</code>
or 
<code>
>chmod 400 file_name
</code>
Debugging a Spring Boot App in Docker
Tags: beginners, docker, spring, java
Published: 2019-08-21 02:04:47


With the trending of containerizing applications, setting up your local environment is now easier than ever. Setup times can be reduced from hours to mere minutes. Saving devs time and frustration.

While setting up one of my apps to run with Docker. I realized there weren't any guides out there that suited my fancy for running apps with debug enabled through docker.

With this article I'll go over what I did to get my app setup with debug using docker-compose. You can view the complete example [here](https://github.com/Danondso/dublin_rest_demo).

First I created the Dockerfile:

```Docker
FROM  openjdk:9-jre # Specifying the base image, I'm using Java 9
ADD target/dublin_rest_demo.jar . # Copies the compiled jar file to the root of the container -- DOUBLE CHECK THIS. 
EXPOSE 8080 8000 # Sets up ports the container listens on: 8080 (spring boots default) and 8000 (debugger port)
CMD java -jar dublin_rest_demo.jar # Specifies the command that will start up the application.
```

Once I had it setup I ran it to make sure everything worked.

```cmd
mvn clean install && docker build -t rest_demo:latest . && docker run -p 8080:8080 -p 8000:8000
```

Then I setup my docker-compose yml file:

```yml
version: '3.7'
services:
  web:
    build: .
    ports:
      - "8080:8080" # Mapping the internal container ports to the external ones.
      - "8000:8000"
```

Then I ran that to make sure everything worked all right.

```cmd
docker-compose up
```

Then I went about trying to get it setup to run with debug enabled. What I got finally was adding a command to the docker-compose file that started the app with debug enabled.

```yml
version: '3.7'
services:
  web:
    build: .
    ports:
      - "8080:8080"
      - "8000:8000"
    command: java -agentlib:jdwp=transport=dt_socket,server=y,suspend=n,address=*:8000 -jar dublin_rest_demo.jar
```

Since I'm not always running my application in debug. I'll usually create a second file and call it docker-compose-debug.yml. Then run that compose file using the '-f' flag:

```cmd
docker-compose -f docker-compose-debug.yml up
```

And that was it, I was on my way to debugging my app!

To confirm it was actually it was setup correctly. I setup a remote config in IntelliJ:

![](https://i.imgur.com/ioswzfP.png)

Then I ran my docker-compose-debug file:

![](https://i.imgur.com/a2NMTlK.png)

Finally, I set a breakpoint and hit it:

![](https://i.imgur.com/HLlbVlk.png)

And there it is, we're running our app via docker-compose with debug enabled.
Learning Rust by creating a terminal clock - Part 2
Tags: rust, cli, tui, github
Published: 2019-08-21 01:17:20

---
title: Learning Rust by creating a terminal clock - Part 2
published: true
description: Learning Rust by creating a terminal clock. 
tags: #rust, #cli, #tui, #github
series: Learning Rust by creating a terminal clock
---

In the last post I had just added the progress bar for the month. I also noted that the code is in desperate need of a clean up but I haven't got there yet. I'm having too much fun adding new features and learning things. Although I will have to get there eventually.

## Adding a CI pipeline
Since that last post one of the main things I accomplished was to add a CI pipeline to the project using Travis CI. This is something I've done before in my various PHP projects but not with Rust. It had also been a while since I used Travis CI but it's so simple to use it didn't take long to figure it out again.

Basically I just needed to enable my GitHub repository in Travis CI and commit a `.travis.yml` file which I've done here:

https://github.com/bmitch/relogio/blob/master/.travis.yml

With that configuration, Travis CI will run the following commands in the pipeline:
```
  - cargo build --verbose --all
  - cargo test --verbose --all
```

## Power of open source
I also had someone contribute to the project which was great. Shout out to {% user ntrupin %} for the help. They made several contributions since my last post which are much appreciated.

## Year Progress
Finally, I added one more progress bar for the year countdown. I think this will probably be the last progress bar. I'm not sure if I'll add the century countdown progress bar or not.

## Next
* I really need to do some code cleanup.
* I want to research other possible tools to use in the CI pipeline (linters, code sniffers, code quality etc...)
* Prototype some UI design ideas.
* Add some more issues for other possible features.


As always any and all feedback is appreciated!
Green Grocer Lab
Tags: ruby
Published: 2019-08-21 00:38:18

## Problem

I have a shopping cart full of items that I need to consolidate with a `consolidate_cart` method. This cart is made up of one `array` and needs to be put into a `hash`. Each index item has a name, price, if it's on clearance and how many of each item there are (count).

For example, this:
```ruby
[
  {"AVOCADO" => {:price => 3.00, :clearance => true }},
  {"AVOCADO" => {:price => 3.00, :clearance => true }},
  {"KALE"    => {:price => 3.00, :clearance => false}}
]
```

Needs to turn into this:
```ruby
{
  "AVOCADO" => {:price => 3.00, :clearance => true, :count => 2},
  "KALE"    => {:price => 3.00, :clearance => false, :count => 1}
}
```

## What I Learned

This was a particularly difficult challenge for me and I needed help because I didn't even know where to start. I wasn't terribly far off, though. I got a more firm understanding of `.each` and what the `|pipes|` mean as well as, obviously, moving nested hashes in an array to a single hash.

While asking for help I was told to install Pry which is a Ruby program that lets you stop your code at a specific line to better debug it. I didn't get to play with it on my own but it does seem like a very useful tool for a Ruby programmer.

## Final Iteration
```ruby
def consolidate_cart(cart)
  output = {}
  cart.each do |item|
    item_name = item.keys[0]
    if output[item_name]
      output[item_name][:count] += 1 
    else
      output[item_name] = item[item_name]
      output[item_name][:count] = 1 
    end
  end
  output
end
```

## Original Problem

The cart starts as an array of individual items. Translate it into a Hash that includes the counts for each item with the `consolidate_cart` method.

For instance, if the method is given the array below:
```ruby
[
  {"AVOCADO" => {:price => 3.00, :clearance => true }},
  {"AVOCADO" => {:price => 3.00, :clearance => true }},
  {"KALE"    => {:price => 3.00, :clearance => false}}
]
```
then the method should return the hash below:
```ruby
{
  "AVOCADO" => {:price => 3.00, :clearance => true, :count => 2},
  "KALE"    => {:price => 3.00, :clearance => false, :count => 1}
}
```
How to speed up ci server with small git command change ? 
Tags: git, devops
Published: 2019-08-20 23:16:34

Last year I was working on enterprise project which has been maintaining for a 3/4 years. In the beginning of the project's repository designed as single repository for android and ios projects but during development of project it split up to separate repositories. But even when i run git clone command took almost 15 minutes. I thought it won't be problem because I won't run that command frequently but what happened ? I started to run git clone commit frequently due to ci server. Because I created jenkins job to run tests and build apk during our pr process which basically do below steps
 - Setup android environment
 - **Clone project** 
 - Run unit test
 - Build apk  

Until today i didn't aware of how to speed up project clone **time**
If I'd run 

`git clone **url** --single-branch **branch-name** depth=1`

instead of

`git clone **url**`

it would have been **7** times faster.


####TIL: [shallow clone](https://git-scm.com/docs/git-clone#Documentation/git-clone.txt---depthltdepthgt)
BFF's Docs
Tags: yesterdayilearned
Published: 2019-08-21 00:35:37

Yesterday, I ran into the documentation on BFF's. You may be thinking, "I have one of those!" and "Do they really have documentation!". You may or may not be wrong and yes if you are thinking in the terms of technology. When I say BFF's, I am talking about "Backends for Frontends". What? If you are thinking what in the world is that you are not alone. I went into the article thinking I was going to learn about having a "Best Friend Forever"(Not Really). 



Backends for Frontends is the concept of creating backend services that are to be used by specific frontend interfaces. So to put it in plainly, if you have a desktop web app and an iOS mobile application you would use separate backend services to handle each frontend application. 



When I was reading this I thought it was a really good idea but I do not have any experience with this to know for sure. If this piques your interest you can find the docs here: https://docs.microsoft.com/en-us/azure/architecture/patterns/backends-for-frontends



Have you ever worked with BFF's and if you have, how has your experience been? What would you consider the pros and cons of this approach?
30 days 30 sites - day 1
Tags: beginners, css
Published: 2019-08-21 00:19:40

The first challenge was to design a portfolio website. I've made one before, but that one was wacky and unresponsive. So on this first challenge, using materialize, I made a presentable portfolio site. It's hosted on [here on github](https://github.com/Vicradon/tdtsc1). You can also check out the [github page](https://vicradon.github.io/tdtsc1/) I made from it.
#What I Learnt
First, I learned how to create a proper navbar with Materialize. I was surprised that I didn't have to write a single line of CSS to make a navbar. Just positioning elements yielded a clean responsive navbar.
Materialize Navbars come in different forms, mine has mobile support. 
![desktop view](https://thepracticaldev.s3.amazonaws.com/i/fz02ku3d962uvwcxa5la.JPG)
The links on the right resize to form the bars on the left
![mobile view](https://thepracticaldev.s3.amazonaws.com/i/khg0c0nt8jht1sdgczge.JPG)
This was done by 
1. Setting the class of the links on the right to 'hide on med-and-down'
2. Setting the class of the bars to sidenav-trigger which is a materialize class...among other stuff
```javascript
<nav>
    <div class="nav-wrapper blue darken-2">
      <a href="#!" class="brand-logo vicradon">Vicradon</a>
      <a href="#" data-target="side-menu" class="sidenav-trigger">
        <i class="material-icons">menu</i>
      </a>
      <ul class="right hide-on-med-and-down ">
        <li><a href="/">HOME</a></li>
        <li><a href="./about.html">ABOUT</a></li>
        <li><a href="./hire.html">HIRE</a></li>
        <li><a href="./add.html">ADD</a></li>
      </ul>
    </div>
  </nav>
  <ul class="sidenav" id="side-menu">
    <li><a href="/">HOME</a></li>
    <li><a href="./about.html">ABOUT</a></li>
    <li><a href="./hire.html">HIRE</a></li>
    <li><a href="./add.html">ADD</a></li>
  </ul>
```
I guess memorizing the process isn't important. What's important is knowing how it works. You could always refer to the docs to get a starter navbar code.

#The Grid System
The grid system used in materialize, similar to that of Bootstrap really abstracts the process of using CSS grid. It's based on conditions given and resizes the grid container accordingly. A good grasp of the grid system helps a lot in layout and design.

#The input-field Materialize Class
This class is used to give some top-notch styling to HTML5 input elements. Even the select element uses the input-field class. One quirky thing is that the label element is placed under the input element and given a name matching the id of that element to enable the translate-y animation that occurs.

[The slide-up animation](https://imgur.com/a/VSUStyS)

So, there're other subtle things I discovered but have forgotten. I'd update as I remember.