teleren/devto huggingface dataset:
4 key principles of web design
Tags: design, python, programming, javascript
Published: 2021-06-07 03:41:14

# 1. WEBSITE PURPOSE

Your website needs to accommodate the needs of the user. Having a simple clear intention on all pages will help the user interact with what you have to offer. What is the purpose of your website? Are you imparting practical information like a ‘How to guide’? Is it an entertainment website like sports coverage or are you selling a product to the user? There are many different purposes that websites may have but there are core purposes common to all websites;

- Describing Expertise
- Building Your Reputation
- Generating Leads
- Sales and After Care


#2. SIMPLICITY

Simplicity is the best way to go when considering the user experience and the usability of your website. Below are ways to achieve simplicity through design.

Colour
Colour has the power to communicate messages and evoke emotional responses. Finding a colour palette that fits your brand will allow you to influence your customer’s behaviour towards your brand. Keep the colour selection limited to less than 5 colours. Complementary colours work very well. Pleasing colour combinations increase customer engagement and make the user feel good.

Type
Typography has an important role to play on your website. It commands attention and works as the visual interpretation of the brands voice. Typefaces should be legible and only use a maximum of 3 different fonts on the website.

Imagery
Imagery is every visual aspect used within communications. This includes still photography, illustration, video and all forms of graphics. All imagery should be expressive and capture the spirit of the company and act as the embodiment of their brand personality. Most of the initial information we consume on websites is visual and as a first impression it is important that high quality images are used to form an impression of professionalism and credibility in the visitors mind.

#3. NAVIGATION

Navigation is the way finding system used on websites where visitors interact and find what they are looking for. Website navigation is key to retaining visitors. If the websites navigation is confusing visitors will give up and find what they need elsewhere. Keeping navigation simple, intuitive and consistent on every page is key

#4. VISUAL HIERARCHY

Visual hierarchy is the arrangement of elements is order of importance. This is done either by size, colour, imagery, contrast, typographically, whitespace, texture and style. One of the most important functions of visual hierarchy is to establish a focal point; this shows visitors where the most important information is

##Hi, if you want share knowledge on my website contact 
priteshbhoi18@gmail.com

Must Read - 
1. https://dev.to/priteshbhoi/4-key-principles-of-web-design-4fne
2. https://dev.to/priteshbhoi/10-best-javascript-animation-libraries-to-use-in-2021-bd9

Thanks
Things Are Really Off the Rails Now!
Tags: rails, ruby, learning, newbie
Published: 2021-06-07 03:32:50

# Rails Project App- MyScene

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

_It's a dumb name, but I couldn't think of anything better on short notice_

###Time for another project

This project was built with Rails, and is by far the most extensive. I tried to use as many features as I know, including layouts, partials, scopes and helpers to name a few.

###About the application

The idea behind MyScene is to help people find local bands and concerts. Artists can create an account and upload information about their concerts and the venues that they play at. Even without making an artist account, users should  be able to see and search for concerts (but not edit anything).

###Building the Models

The app has 4 models: Artists, Venues, Concerts and Addresses. Concerts belong to both Venues and Artists, and Addresses belong to Venues. This means that we can set up many to many relationship for Artists to have many Venues through concerts and vice versa. we also have a one to one relationship for Concerts to have an Address through Venues.

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

Looking at the schema, you can see that the Artist class also functions as the "User" class, since we expect that musicians will be the ones creating concerts. 

All of the models have validations to make sure that they have the minimum amount of information to be useful before they are saved. There are also custom validators on Venues to make sure they have an address instance attached and on Concerts to make sure the start time is before the end time.

###Controller Actions
The controller actions are pretty much what you'd expect, they get the proper model instance or collection and pass it on the the views. One notable thing are the before actions defined in the global application controller that requires a user to be logged in to edit, create or delete venues and concerts, and one defined in the Artist class that only allows editing and deleting of the current artist.

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

###Views
The most important feature of the views is the search bar in the main layout. This is connected to the Concert index action and allows any user, logged in or not, to search for concerts by name, artist name or venue name. 

The views use partials for the forms and collection items, and helpers to generate more dynamic html.

##Complications and Lessons
This was my first full rails app, and It was mostly painless compared to the Sinatra and the CLI app. One thing that kept giving me problems was the views breaking when the controller couldn't find an appropriate model. Doing this project taught me a lot about protecting against calling methods on objects that might be `nil`.
 

##So that's my latest project
Next I'm moving on to JavaScript! 

until then...
Code Smell 76 - Generic Assertions
Tags: webdev, testing, testdev, tutorial
Published: 2021-06-07 03:15:56

*Don't make weak tests to create a false sensation of coverage.*

> TL;DR: Test Assertions should be precise. Not too Vague and not too specific. There is no silver bullet.

# Problems

- False Negatives

- Lack of Trust

# Solutions

1. Check the right case

2. Assert for a functional case.

3. Don't test implementation.

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/6712052beddeaac0d959785726fa82ca)
```python
square = Square(5)

assert square.area() != 0

# This will lead to false negatives since it is too vague
```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/d9f05a81f7689e86c353ccd6a29e8306)
```python
square = Square(5)

assert square.area() = 25

# Assertion should be precise
```

# Detection

With [Mutation Testing](https://en.wikipedia.org/wiki/Mutation_testing) techniques we can find these errors on our tests.

# Tags

- Testing

# Conclusion

We should use development techniques like [TDD](https://dev.to/mcsee/how-to-squeeze-test-driven-development-on-legacy-systems-8m9) that request concrete business cases and make concrete assertions based on our domain.

# Relations

{% post https://dev.to/mcsee/code-smell-30-mocking-business-3glm %}

{% post https://dev.to/mcsee/code-smell-52-fragile-tests-18o6 %}

# More info

- [Test Driven Development](https://dev.to/mcsee/how-to-squeeze-test-driven-development-on-legacy-systems-8m9)

- [The Only Design Principle](https://dev.to/mcsee/the-one-and-only-software-design-principle-3086)

- [Mutation Testing](https://en.wikipedia.org/wiki/Mutation_testing)

# Credits

This smell was inspired by Mario Cervera and used with his [permission](https://twitter.com/macerub/status/1401209540436283397).

Photo by <a href="https://unsplash.com/@yer_a_wizard">Fleur</a> on <a href="https://unsplash.com/s/photos/measure">Unsplash</a>
  

* * *

> A program that produces incorrect results twice as fast is infinitely slower. 

_John Osterhout_
 
{% post https://dev.to/mcsee/software-engineering-great-quotes-26ci %}

* * *

This article is part of the CodeSmell Series.

{% post https://dev.to/mcsee/how-to-find-the-stinky-parts-of-your-code-1dbc %}
Abstraction Concept
Tags: javascript, java, oop, tutorial
Published: 2021-06-07 02:52:01

Data abstraction is the process of hiding certain details and showing only essential information to the user.

***An abstract class may or may not have abstract methods but if there is an abstract method then all the child classes have to override it.***

You can also do the partial implementation of Abstract Class methods

Abstract class A -> with 30 abstract methods, now you know all the child have to inherit 30 of them but you can also make it work like this:

- class B (child of class A) -> implement 20 methods.
- class C (child of class B or Grandchild of class A) -> implement 10 methods.
- So, it completes the abstract methods.

***The abstract class gives features to child classes. So, we restrict object creation because the class is too generic.***

Assume we have an Animal class

`class Animal { }`

when we create an Animal object we can not guess which animal?

`Animal animal = new Animal();`

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gvcx7wx75vkap6pdfcbf.png)

*cc- does it make any sense?*

So, to restrict this, we use abstract keyword.
TikTok
Published: 2021-06-07 02:42:18

Aplikasi yang populer diseluruh dan tidak asing ditelinga kita yaitu aplikasi Tiktok. Tiktok adalah aplikasi jaringan sosial dan video musik yang diluncurkan pada bulan September 2016 oleh Zhang Yiming di Tiongkok.

Aplikasi ini dilaporkan oleh Stastia, yaitu pengguna Aplikasi Tiktok ini pada bulan Februari 2021 diperkirakan mencapai 32,28 juta pengguna aktif diseluruh dunia baik di IOS maupun di Android.

https://kuyakepo.blogspot.com
How to Contribute in open Source ?
Published: 2021-06-07 02:41:53

Before knowing how to contribute let me tell you what is open source. Although Open source word is it predefined, but i will tell you a bit about this. It is some code base which is open for anyone to use or to contribute in that.

One of the most popular place for open source is GitHub, its a code hosting platform for collaboration and version control.
But before learning about git and github i belive you should first know how to find the open source projects and for that [**Google Summer of Code**](https://summerofcode.withgoogle.com/) can be a really good website you can go there and can find lots of projects (Here is a video about how to find it: [Beginner's Guide to open source](https://www.youtube.com/watch?v=BI_tudfBxJI&list=PLyzHIYrZBplqcJXQ0XWA4gRs0sdh6zWfD&index=2)) ©_CodeForCause_

And for contributing to open source you need to learn git and github ([Git and GitHub Tutorial] (https://youtu.be/8pjxegUW7lQ)) ©_CodeForCause_

If have watched the above two videos then you must have got a better understanding about Open Source and contributions. Now fast forward to when you have found a project then go in issue tab, ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xzslvmgg7rragc3r25ev.png)
there you need to click on lables and you can search for good first issue.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79ixqws4uot7gvjziu12.png)
After finding an issue now you can comment below that issue. The community is really helpful and they will be more than happy to help a new contributor in starting out and then you can directly see which folder has the issue, after that try to understand thing in that folder, don't worry much about other folders and run that project in your local environment(_in your computer_).And that is pretty much about it. For more guidence you can watch [**Code for Cause**](https://www.youtube.com/c/CodeforCause) Youtube Channel.
New Programming Blog
Tags: blog, programming, laravel, postsrc
Published: 2021-06-07 01:32:03

![PostSrc Hompeage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5j5odb5obhudwtwv3yrq.png)

I have been wanting to to have my own programming blog for a while now and since I have finally got the time, I have dedicated to spend it developing and maintining it. Please welcome [PostSrc.com](https://postsrc.com) :blush:.

[PostSrc (Post Source)](https://postsrc.com/) - a community of programmers sharing all things programming that includes a how-to tutorial, guides, and step by steps tutorial.

You can learn web and mobile development, programming guides, and tutorials ranging from topics including VueJS, NuxtJs, Laravel Framework, TailwindCSS, Flutter, and More.

If you have some free time do give it a visit and share it with your friends. #programming #blog #journey
The most important "agile" principle
Tags: agile, learning, productivity
Published: 2021-06-15 07:22:42

---
title: The most important "agile" principle
published: true
date: 2021-06-07 00:00:00 UTC
tags: agile,learning,productivity
canonical_url: https://jhall.io/archive/2021/06/07/the-most-important-agile-principle/
---

I recently came upon an online discussion about the most important agile principle to teach to a new group or team.

There’s one agile principle that isn’t found verbatim in the [manifesto](https://agilemanifesto.org/), but I think is pretty clearly present:

**A culture of learning.**

Without this, any agile framework, process, or workflow will stagnate and ultimately fail.

With it, even without a framework, process, or workflow in place, your team will begin to converge on well-known best practices.

After all, the Manifest for Agile Software Development didn’t invent anything new. It only recognized what had already been discovered by a number of experienced software developers, who had been (and continue to) demonstrate a culture of learning.

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
How to check if a string is a valid hashtag in JavaScript?
Tags: javascript
Published: 2021-06-07 00:00:00

---
  title: How to check if a string is a valid hashtag in JavaScript?
  published: true
  tags: JavaScript
  date: Mon Jun 07 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/check-if-string-valid-hashtag-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-054583e77d4b34876f8a8303ee516c5b.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/check-if-string-valid-hashtag-javascript)
  
To check if a string is a valid hashtag, we can use a regex expression to match for a string that starts with a `#` (hash symbol) in JavaScript.

### TL;DR

```js
// Regular expression to check if string is a hashtag
const regexExp = /^#[^ !@#$%^&*(),.?":{}|<>]*$/gi;

// String with hashtag
const str = "#helloWorld";

regexExp.test(str); // true
```

This is the regex expression for matching almost all the test cases for a valid hashtag in JavaScript.

```js
// Regular expression to check if string is a hashtag
const regexExp = /^#[^ !@#$%^&*(),.?":{}|<>]*$/gi;
```

Now let's write a string with valid hashtag like this,

```js
// Regular expression to check if string is a hashtag
const regexExp = /^#[^ !@#$%^&*(),.?":{}|<>]*$/gi;

// String with hashtag
const str = "#helloWorld";
```

Now to test the string, we can use the `test()` method available in the regular expression we defined. It can be done like this,

```js
// Regular expression to check if string is a hashtag
const regexExp = /^#[^ !@#$%^&*(),.?":{}|<>]*$/gi;

// String with hashtag
const str = "#helloWorld";

regexExp.test(str); // true
```

- The `test()` method will accept a `string` type as an argument to test for a match.
- The method will return boolean `true` if there is a match using the regular expression and `false` if not.

See the above example live in [JSBin](https://jsbin.com/jifowiruge/2/edit?js,console).

If you want this as a utility function which you can reuse, here it is,

```js
/* Check if string is a valid Hashtag */
function checkIfValidHashtag(str) {
  // Regular expression to check if string is a hashtag
  const regexExp = /^#[^ !@#$%^&*(),.?":{}|<>]*$/gi;

  return regexExp.test(str);
}

// Use the function
checkIfValidHashtag("#helloWorld"); // true
checkIfValidHashtag("#%hello98123!"); // false
```

That's all! 😃

### Feel free to share if you found this useful 😃.

---
How To connect Laravel Application to MySQL Database.
Tags: laravel, database, mysql, php
Published: 2021-06-06 23:34:21

### Introduction
Here is a simple guide on establishing a connection between your database(MySQL) and Laravel application.

#### Step 1 : Creating the database
This can be done either by a database manager eg phpMyAdmin or the Command Line Interface (CLI).

* Database Manager(phpMyAdmin)
![Creating a database on phpMyAdmin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/278cugzfuo2esh9dvnt9.png)

* Command Line Interface(CLI)
 A database can be created with the following command:
```bash
CREATE DATABASE db_name;
```
> __P.S: You have to log in to MySQL before you can create a database via any of these methods.__

#### Step 2:  Update .env configurations

Laravel default environment file `.env` contain some common configuration values that differ based on if your application runs locally or on a production server.

> __P.S: This configuration values are based on my local machine , 
 yours may differ, do well to confirm.__

Update the `.env` with the database name you want to connect to,as well as the other environment variables if they differ from the default.

```php
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=test
DB_USERNAME=root
DB_PASSWORD=
```

__Hurray! 🎉The laravel application is now properly connected to the database.__

#### Step 3: Migrations(optional)
Laravel migrations simply allows you to easily perform certain actions to the database without going to the database manager (eg. phpMyAdmin). They can also serve as a version control for your database. They create tables, columns as well as modify them etc.

Migrations are found in `database/migrations` directory.
Laravel application comes default with `user` migration and it looks like this:
![users default migration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0lhvqe48rds9sxserv9h.png)

It can be executed to the database with the following command:

```bash
php artisan migrate
```

> __P.S : Refresh your database , it has been updated with users' table and its properties.__

![users table om database](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kyuoqptyo06oneutvkqg.png)

I wrote an article to explain more on migrations [here](https://dev.to/roxie/adding-and-removing-columns-from-existing-tables-using-laravel-migrations-389g). You can also visit the laravel documentation [here](https://laravel.com/docs/8.x/migrations#introduction).

You're all set to continue building!😎
Thank you for reading🤝
Count frequency of characters in a given file in python
Published: 2021-06-06 22:53:02

In Python, the collections module used as container datatypes. By providing alternatives to Python’s general purpose built-in containers, dict, list, set, and tuple, it implements specialized container datatypes. This module has a dict subclass for counting hashable objects which is known as counter. With no restrictions on its keys and values, the counter class itself considered as a dictionary subclass. The values are intended to be numbers representing counts, but you'll store anything within the value field. Including zero or negative counts, this counts are allowed to be any integer value. The Counter class is analogous to bags or multisets in other languages.

**Count frequency of characters in a given file**
There is no got to split words, at all; directly passing a string to the counter updates the counts per character. Use the flag “r” for input file and the flag “w” for output file. You furthermore may got to collect all counts first, and only then write them bent the output file:

from collections import Counter
```
def count_letters(in_filename, out_filename):
    counts = Counter()
    with open(in_filename, "r") as in_file:
        for chunk in iter(lambda: in_file.read(8196), ''):
            counts.update(chunk)
    with open(out_filename, "w") as out_file:
        for letter, count in counts.iteritems():
            out_file.write('{}:{}\n'.format(letter, count)```
It should be note that, the inputfile is processed in 8kb chunks instead of in one go; you'll adjust the block size (preferably in powers of 2) to maximise throughput.

If you would like your output file to be sorted by frequency (descending), then you could also use .most_common() rather than .iteritems().
Stop using relative paths in your React Native imports. Use Aliases instead.
Tags: reactnative, react, javascript, babel
Published: 2021-06-06 22:16:43

## Use Aliases in your imports with Babel

Instead of doing this in your imports i.e:

> `import Component from '../../../components/shared/Header';`

You could do something like this from anywhere in your project i.e:

> `import Component from 'components/shared/Header';`

Or you could even go as deep as you want i.e:

> `import Component from '@/shared/Header';`

You get the point... no more relative paths (`'../../../../../../'`) to import any of your components.

## How?

- Install required dependencies

```
npm i babel-plugin-module-resolver metro-react-native-babel-preset
```

- Head over to your `babel.config.js` file in your project root directory. (If it doesn't exist, create it)

- Add the `module-resolver` plugin to your plugins array like this:

```
module.exports = {
    presets: ['module:metro-react-native-babel-preset']
	plugins: [
		[
			'module-resolver',
			{
				root: ['.'],
				extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
				alias: {
					'@': './src/components',
					'constants': './src/constants',
					'##': './src/examples',
				},
			},
		]
	]
};
```

> Make sure to provide the path you want to reference with an alias, and the alias name itself.

According to the example above now you're able to import files or modules like this

```
import MyComponent from '@/MyComponent.js'
import MyConstantFile from 'constants/myConstant.js'
import MyExample from '##/MyExample.js'
```

_I would love to engage with other developers like you. Get in touch on Twitter!_ [@dev_astador](https://twitter.com/dev_astador)