teleren/devto huggingface dataset:
Why you should think in a feature, not a layout when you create UI?
Tags: ui, ux
Published: 2020-09-25 11:41:45

I've wasted months not just days trying to create an MVP ( Minimal Viable Product ) for an idea. I spent nights and nights refactoring the user interfaces by changing just the places of the components and the layouts. Don't be stupid like me!

When you start designing a new user interface for a web or mobile application, most of the time you think about the structure or the position of your components, so you start designing the Header or the Top Navigation as your first component in your UI. Me too I was doing this mistake!

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

Do you know why it's a mistake? Because you're limiting yourself from the beginning. Because you're seeing the App Design from Top-To-Down or Down-To-Top while the App Design is a collection of features. You're not building a house here using LEGO bricks! But you're building a car and you can start designing the engine or the wheels, right?

Most of the folks try to copy & paste from popular websites and apps, without knowing the Standards or the Design Decisions for each product. This is the easiest way to find themselves frustrated, limited and they figure out that they overthink only on Generic Things.

They focus on the shape of their app but not the core features, and they start asking frequently these questions :

 → Where should I put the Logo?

 → How many items should I have in the navigation bar?

 → Should I have one or two sidebars?

 → Should I have a Grid Layout or a Table of items?

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

But, what you don't know ( maybe ) is UI Components are made to solve certain problems that are related to user interaction, data displaying, or new device screen invention, and you may be noticed that the Hamburger element is started to be well-known in mobile devices.

Obviously, we are not designing user interfaces but we are designing and implementing features, and Top Navigation is just a common feature that helps users to do quick navigation for certain and most important pages.

So, don't care about common features or what I call them Generic features or layouts.

Instead of starting by a layout, start with a feature or specific functionality, and not any feature but the core feature in your product.

Let's say you'll build the next-gen social media app for sharing videos. You could start with this core feature: Share a short-form video.

The UI will need :

 → Field for upload a video

 → Field for the caption

 → Field for the description

 → Button for posting or sharing

 → Button for saving in draft

These are the requirements to design your UI.

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

Star the project on Github: [You Don't Know UI](https://github.com/MenaiAla/You-Dont-Know-UI)
Can you use Ruby in Bug Bounty?
Tags: bugbounty, ruby, security, automation
Published: 2020-09-25 11:41:24

Hey guys👋,

So I am a security researcher, and I was wondering if I can use Ruby to make automation tools and tasks? I mean without implementing bug bounty, it could be useful. I know I can use python to do such things, but I want to improve my ruby skills.

Thanks and happy hacking💜!
The Best Magento 2 Modules for B2B: Don’t Miss Out to Know More
Published: 2020-09-25 11:38:50

Magento is known as a popular ecommerce platform suitable for almost any type of business, including B2B. It offers a number of great features and options for scaling and customization as well as readymade extensions. These tools can help you to make the website you want and need.

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

We’ve created the list of the best Magento 2 modules that you should be aware of:

**Tier Price** 
It is one of the best modules that offer great opportunities for price graduation customization using the number of items units. You can also keep your customers aware of the best price offers using email.

**Reward Points**  

This module will help you to make the customers loyalty higher via rewarding special points for making purchases. The chances to turn one-time purchase clients into regular customers will be significantly higher.  

**Private Sales And Flash Sales**  

This extension enables the option of closed sales that you can offer to your registered users. It is a great way to encourage new customers to become regular clients. 
 
**One Step Checkout**

One more useful extension for your e-store. Multiple steps required to make a purchase is an annoying factor and often customers prefer not to finish their order. This module will help to avoid this situation. Launch it and you will be happy with the results. 

It is just the shortlist of extensions and we’ve collected much more [in this overview](https://dinarys.com/blog/list-of-the-best-magento-2-modules-for-b2b). We really hope that this list will help you understand how to improve the functionality of your B2B Magento e-store.
Digital Teacher | English Language Lab
Tags: englishlanguagelab, digitallanguagelab, spokenenglishsoftware, languagelabsoftware
Published: 2020-09-25 11:26:09

Digital Teacher English language lab not only enhances vocabulary, but also focuses on the finer shades of language like grammar, pronunciation, intonation, modulation, phonetics, MTI and syllabic division.

Digital Teacher English Language Lab has been conceptualized and developed as per the CEFR (Common European Framework of Reference), and Cambridge English Teaching Framework under guidance of Cambridge English Trainers.

Our effort is also to ensure that the Learners learn without any fear or any sort of embarrassment which will in turn help them build their confidence levels along with the proficiency in the language and skills to not just survive but excel in today's competitive world.

We've successfully partnered with 7500 schools already and confident of many more in the near future.

https://www.englishlab.co.in/
How to draw flowChart(diagrams) in markdown using Mermaid!!
Tags: markdown, diagrams, flowchart, algorithms
Published: 2020-09-25 11:18:59


# Table of contents
- [Prerequisites](#prerequisites)
- [Getting Started](#getting-started)
- [Render Mermaid diagram in Webpage](#render-mermaid-diagram-in-webpage)

# Prerequisites

1. VS Code
2. Install the following extensions in VS Code
   1. Markdown Preview Enhanced
   2. Markdown Preview Meramid Support
   3. Meramid Markdown Syntax Highlighting (optional)

# Getting Started

Create a file with markdown extension (abc.md)
Then copy this code and paste it there

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;   
```


Open the file in VS Code and right click and select Markdown Preview Enhanced. Then you can see this diagram there

# Render Mermaid diagram in Webpage


For this you have to use two script tags, they are :

```
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
```


```
<script>mermaid.initialize({theme: 'dark', startOnLoad:true});</script>
```

**For light theme you can replace that theme to light**

Then you can write the mermaid diagram code inside div with class mermaid

Example: 

```
<html>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
    <script>mermaid.initialize({ theme: 'dark', startOnLoad:true});</script>

    Here is one mermaid diagram:
    <div class="mermaid">
     pie title Some Title
         "FRIENDS" : 5
         "FAMILY" : 2
    </div>
  </body>
</html>
```




You can see more examples of diagrams [here](https://mermaid-js.github.io/mermaid/diagrams-and-syntax-and-examples/examples.html)
#100DaysofMLCode Challenge
Tags: 100daysofcode, machinelearning, python, opensource
Published: 2020-09-25 11:10:55

100DaysofCode challenge is the best way to start building consistency in your Dev journey and share your experience in the community.

I performed the #100DaysofMLCode challenge earlier this year and it became my highest starred repository.

Since joining the Dev community earlier this month, I thought of sharing this repository with this amazing community and take their feedback.

Please review it, share feedback and contribute because there are many improvements that can be made to this. Cheers :heart:

{% github https://github.com/NishkarshRaj/100DaysofMLCode no-readme %}
Code and Pixels Interactive Technologies Pvt Ltd
Tags: econtentdevelopment, elearningservices, learningmanagementsystem, lmshyderabad
Published: 2020-09-25 11:06:35

"Code and Pixels Interactive Technologies Private Limited is an E-Learning service provider based in Hyderabad (India). We provide end-to-end E-Learning solutions and specialized in the innovative use of technology. 

We strive towards creating exciting and innovative e-Learning products. What differentiates us from competition is our ability to handle unstructured situations with ease, give life to ideas and concepts that have never been implemented previously, and manage large and complex projects without slipping on delivery deadlines; all the while maintaining the highest standards of quality and efficiency. 

The reason behind our success is our emphasis on understanding and analyzing the real needs of the client's business and providing solutions that are cost-effective in the long run. Clients come to us because they have heard good things about us from our existing relationships. They recommend Code and Pixels to others for the value addition we provide in the form of ideas and insights.

“Experience and professionalism, the two essential aspects for making a successful content development solutions, are in abundance at "CODE and PIXELS”
How to log all JavaScript events to the console for debugging
Tags: javascript, chrome, events, analytics
Published: 2020-09-25 10:57:29

Let's look at how to debug all JavaScript events and log them to the console with a nifty trick.

It's for example important when debugging a web page to see how many submit events a form element sends out.

With this debugging method you prevent sending and tracking  [browser events](https://developer.mozilla.org/en-US/docs/Web/Events)  multiple times.

## Listen for all events in JavaScript

There is a handy API in  **Chrome developer tools**  that makes this easy.

The  [monitorEvents](https://developers.google.com/web/updates/2015/05/quickly-monitor-events-from-the-console-panel)  API allows you to log any occuring JavaScript event to the console in Chrome. You just have to give it an element and optionally the event you want to listen to:

`monitorEvents(element[,event])`

If you want to stop listening for events again, you simply use:

`unmonitorEvents(element[,event])`

**Example**: Log all  **click events**  of the  **window object**  to the console

![monitorEvents api in chrome](https://cdn.hashnode.com/res/hashnode/image/upload/v1601446727799/nlSxdS8fC.gif)


Now with this helpful debugging tool in our toolbox, we can for example select a form element in Chrome developer tools to start monitoring  [submit events](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event).

After you select the element in the elements tab, Chrome Dev Tools will show a little  `$0`  sign next to it.

If you keep the HTML-Element selected, you can now use the  `$0`  to quickly reference the element in the console - without needing a CSS selector. Now together with the  `monitorEvents`  API you can quickly and easily listen to all ongoing JavaScript events and print them to the console for debugging:


![monitor form submit javascript events and log to console](https://cdn.hashnode.com/res/hashnode/image/upload/v1601446856657/5ErTC1Epi.gif)

This is helpful for all kinds of  [event tracking](https://bluerivermountains.com/en/event-tracking)  because you can debug every JavaScript event in the console without having to run the  [GTM Debugger](https://www.analyticsmania.com/post/google-tag-manager-debug-mode/).

So there you have it. By using Chrome Dev Tools' API, it is the quickest way to monitor all JavaScript events that I know of.

Let me know on Twitter if it worked for you and if you liked this. ✌️
a wrong indent in yaml make comment invalid
Tags: ansible
Published: 2020-09-25 10:54:46

```
  - name: set name resolve                                                                                                                                                                                         
    blockinfile:                                                                                                                                                                                                   
      path: /etc/hosts                                                                                                                                                                                             
      block: |                                                                                                                                                                                                     
        {{ hostvars[master-1]['ansible_facts']['eth1']['ipv4']['address'] }} cluster-endpoint                                                                                                                      
        #loop: "{{ groups['master'] }}"  
```

ansible gets an error says

> The task includes an option with an undefined variable. The error was: 'master' is undefined

the line with `#` indented wrong, so the `#` cannot comment on the line, it is treated as a directive 

it seems though the indent is wrong, the real problem is I should quote the hostname `master-1`
Vue 3.0 now arrives in TypeScript
Tags: vue, typescript, javascript, webdev
Published: 2020-09-25 10:37:42

After almost a couple of years in development, Vue 3.0, which happens to be a significant upgrade to the well-known JavaScript framework for developing web UIs, is obtainable as a production release right now. The highlights consist of smaller bundle sizes as well as better performance.

 
Performance of Vue 3.0

Launched on 18th September, Vue 3.0 plans to enhance performance as compared to Vue 2 when it comes to updating speed, render speed, bundle size, and memory usage. As part of the project, updates happen to be up to 130% quicker, render is 55% faster, and the memory usage up to 53% less. Apart from this, the bundle size is going to be as much as 40% lighter along with tree-shaking which happens to be a technique used for minimizing the size of the output file.

 
Vue Internals

Vue internals is being written once again into an assortment of the decoupled module, which provides an architecture providing minimized runtime size as well as better maintainability. Lower-level APIs are exposed by modules that unlock advanced usage cases like the compiler, which supports AST transforms intended for customizations. An API is provided by the core runtime for developing custom renders for various targets like WebGL, terminals, or native mobile. Moreover, the @vue/reactivity module is responsible for exporting functions providing access to the reactivity system of Vue, which is possible to be employed as a standalone package.

The Vue 3.0 launch milestone is accountable for marking the overall readiness of the framework even though work might still be required for several subprojects. According to Vue project developers, it was safe to commence greenfield projects. Also, library authors can upgrade their projects.

 
Some other innovative capabilities in Vue 3.0 consist of the following:

    A codebase is composed of TypeScript. The Type definitions are updated and bundled.

    A Composition API which makes it simpler to make use of Vue when it comes to large-scale applications.

    Experimental features like <script setup> providing syntactic sugar for being use of Composition inside SFCs as well as <style var> providing CSS variables which are state-driven within SFCs.

Vue.js builders are going to emphasize on IE11 support, migration builds capabilities, as well as further enhancements to template type inference.

Learn more here: https://www.rlogical.com/blog/vue-3-0-now-arrives-in-typescript/
for of, for in or forEach?
Tags: javascript, help
Published: 2020-09-25 10:31:26

---
title: for of, for in or forEach?
published: true
description: 
tags: javascript, help
//cover_image: https://direct_url_to_image.jpg
---

I've been going over a few array methods to refresh some of them and this is one thing I've never fully grasped. There are for of loops and for in what is the use case for these? 

In addition, you also have forEach what are the key differences? Is it performance or personal preference? I don't really understand the difference between them could someone point me in the right direction?
Deutsche Geschichte
Tags: testing, history, powerpoint, speaches
Published: 2020-09-25 10:07:06

Berühmte Reden im Präsen-Format. Nicht zum Nachhalten, sondern eher als Leseform. Ich hatte da mal so ein [Projekt](https://drikkes.com/?p=14237) angefangen.

{% speakerdeck abdae29c29f4475d8ede345bc2e621e4 %}

Aber dann hatte ich keine Zeit mehr. Und ich wusste auch nicht, welche bedeutsame Rede aus der deutschen Vergangenheit ich als nächstes hätte nehmen sollen. Nazi-Zeit wollte ich nämlich nicht.

{% speakerdeck b817f43dd2c9449386f0bc654431da4e %}

In der engeren Wahl waren damals Herzogs "Ruck"-Rede und Walsers Auftritt in der Paulskirche.
TypeScript Essentials - Part 2
Published: 2020-09-25 10:05:57

TypeScript is a strongly-typed superset of JavaScript in which means it adds some syntactical benefits to the language while still letting you write normal JavaScript if you want to. It encourages a more declarative style of programming through utilizing features such as:

- Static typing
- Interfaces
- Modules
- Classes

## Variables

```javascript
let name = "Sam"

let age = 40

let enjoysCoding = true
```

```javascript
let name: string = "Sam"

let age: number = 40

let enjoysCoding: boolean = true
```
There isn't much of a difference here. The difference is we are explicitly telling our program what type each variable is. Telling our program such specific information gives our system the opportunity to catch errors that we may have down the road.

If were to reassign our age variable to another type:

```javascript
let age = 40

age = 'forty-five'
```

TypeScript would have a red underline on the reassigned variable expressing an error:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ecyh1n5jeibh7yv8c8gh.png)


## Interface

```javascript
interface Person {
    firstname: string;
    lastname: string;
}
```

Interfaces are used to define the structure of objects. In our example above, we are expliciting that any variable of type Person will be an object comprising of a firstname and lastname property in which are both string types. You can think of this as we are creating custom types for our object.

Why is this useful? It explicits to the compiler in addition to your future self and other developers what type of data to expect. We are modelling the object properties allowing us to reference them in case we need to debug them. It's a common practice to put your interfaces at the top of TS files. This gives the developer an idea of the data types used for each property.

## Functions

```javascript
function greeter(person: Person):string {
    return "Hello, " + person.firstname + " " + person.lastname;
}
```

Our greeter function passes in a person parameter in which we are expecting it to be from type Person from the Interface. This promotes us to use the interface Person's first name and last name and prevent headaches as passing in the wrong Interface would throw error right away. Further, the :string after the function parameters states the data type we expect this function to return when we invoke it.


## Installation:

1) Typescript Playground: 

https://www.typescriptlang.org/play/

2) Local setup

```javascript
npm install -g typescript
```

```javascript
# greeter.ts

function greeter(person: string) {
    return "Hello, " + person;
}

var user = "Will User";

document.body.innerHTML = greeter(user);
```

On the command line, run the TypeScript compiler:
```javascript
tsc greeter.ts
```

Output:

```javascript
function greeter(person) {
    return "Hello, " + person;
}

var user = "Will";

document.body.innerHTML = greeter(user);
```
Intro to Generative Adversarial Networks (GANs)
Tags: python, gans, machinelearning, tutorial
Published: 2020-09-25 09:58:27

[A 1080p version of this video is available on Cinnamon](https://cinnamon.video/watch?v=390993078330066941)

In this workshop we will be learning what a Generative Adversarial Network (GAN) is and where they are used. We will be building and training a simple GAN to colour black and white images.

For this workshop we will be using [IBM Watson Studio](https://ibm.biz/Bdq3xj), an interactive online Python notebook.

In this workshop you will learn:
- What is a GAN
- What GANs can be used for
- How to use IBM Watson Studio
- How to create a GAN using PyTorch
- How to train a GAN and evaluate it’s training

The code and python notebook for this seminar is available at:
https://github.com/IBMDeveloperUK/Colourise-GAN-Workshop

Slides from this workshop are at:
https://www.slideshare.net/hammertoe/intro-to-generative-adversarial-networks-gans

And to register for a free IBM Cloud account to run it, go to:
https://ibm.biz/Bdq8LW
Chipping Away to Eventually Get to Where I Want to Go!
Tags: devjournal, react, codenewbie, womenintech
Published: 2020-09-25 09:33:27

_This post was originally published on September 25, 2020 on [my blog] (https://alexlsalt.github.io/blog)._

And another Friday rolls around again! It's been a pretty productive week, although I did take a break with The Ladies Code Collective Podcast, which actually felt pretty nice!

I'm continuing on with React hooks today, and I think I'll move on to useEffect this afternoon. I'm confident that it'll all start really clicking after I get a broader overview of the larger ecosystem of hooks and React, in general. 

That being said, I'm trying to not get too caught up in needing to know it all immediately (or just after learning it for the first time).

The internal battle of where to store my French city guide data continues, because as I was working on my app yesterday and storing the data in objects within the JS files themselves, I started thinking more about scaling the data and making it more efficient for large amounts of information.

Argh! I'll keep playing around with it. I'm excited to get a minimum-viable product up and running, so each little bit of time spent chipping away at that will eventually lead me to where I wanna get!

----------


P.S. Did you know I have a podcast with new episodes each Wednesday? Go listen [right over here >>] (https://www.ladiescodecollective.com/podcast)

![The Ladies Code Collective Podcast cover art](https://dev-to-uploads.s3.amazonaws.com/i/e9bnxljvfrdjeti7fvbr.png)
[Reset Password Link Send] Email Using PHP - Step By Step
Tags: laravel, php, html, css
Published: 2020-09-25 09:10:04

Sometimes security reasons, you may want to send a reset password link with expire time of your website in PHP MySQL.

So, this PHP generates and send a password reset link with token, we will guide step by step on how to generate reset/forget password link with expire time in PHP MySQL and send to link in email using PHPMailer.

[[Reset Password Link Send] Email Using PHP - Step By Step](https://www.phpcodingstuff.com/blog/send-reset-password-link-email-php.html)
What is the most beautiful Linux distro?
Tags: webdev, discuss, linux, ui
Published: 2020-09-25 09:10:03

---
title: What is the most beautiful Linux distro?
published: true
description: 
tags: webdev, discuss, linux, ui
cover_image: https://i.pinimg.com/originals/ef/a3/ca/efa3cacbf9cd942aa1b2ab074b9a8c3c.jpg
---
By research I've done Elementary, Solus and Mint came up often.

Experienced Linux developers, which Linux distro did you find to have the best UI? I'm not talking about opportunities through customization and settings, but distros out-of-the-box.