teleren/devto huggingface dataset:
Design a Website in Minutes with Generator - Bootstrap website builder
Published: 2022-02-25 13:08:07

If you are thinking about building a website, but don't know where to start, the [Generator.ws](https://generator.ws/) is for you. It is a tool that will help you get ideas for your website design and help you get the best possible design.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r3swgdsowu87yl06t7fm.png)

Check out [demo builder ](https://generator.ws/demo/)

When you get stuck trying to structure the design of your website in your head, sometimes it works fine, but then you feel like you’re not really getting anywhere. The idea just won’t progress properly and you feel yourself ‘stuck in analysis paralysis.’ This is frustrating at best and can be a real problem for your business if you don’t come up with a solution.

There are many tools online which claim to help you understand what customers want or to help get ideas for which design or layout is best, but many of the websites online are impersonal and lacking in personality compared to those made by humans, someone like a professional web designer or developer.

{% embed https://youtu.be/cQrjKOZ4rf8 %}



When designing it can be easy to get stuck on an idea when you feel like nothing is coming together. A lot of people just have a hard time visualizing the final design in their head. That’s why we love the blocks framework because it gives you a quick way to make good on new concepts that are still rough around the edges!


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bty6o43tvlrlm3ultn46.png)
[Check out 500+ well coded design blocks](https://generator.ws/blocks)

So many of us think that a good design always needs to start from scratch. This can often stifle our creativity, so the best method to get around this is to utilise pre-made themes – they give you a place to start.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i2b0fs4pm520wo9j28ia.png)


When it comes to the structure of a website, you want to make sure you have everything in place so that your design will be clean and easy to flow with. Sometimes you might feel like things are not working as they should or could be better, but this trick is something most designers and web developers use: using a web wireframe generator tool.


They use this tool because it can really give anyone who is trying to build their own site or their own client’s site a good starting point since in the end, it takes them less time than what they’d spend just on brainstorming alone.


Get [Generator.ws ](https://generator.ws)
#How to create a PASSWORD checker
Published: 2022-02-25 13:01:11

In a world where our privacy is now at risk, where they have been alot of data breaches, knowing if your password is leaked on the internet is more than essential. In this article we are going to creating a password checker with python.  

```
import requests
from hashlib import sha1
```
First we are going to import the request module, and sha1 from the hashlib which we will use to [hash](https://searchsqlserver.techtarget.com/definition/hashing#:~:text=Hashing%20is%20the%20process%20of,the%20implementation%20of%20hash%20tables.). We need to hash our password to be able to securely send it over the internet, and also the api we are working only accept our password request as hash

```
def request_api(query):
   url = 'https://api.pwnedpasswords.com/range/' + str(query)
   res = requests.get(url)
   if res.status_code != 200:
      raise RuntimeError(f'Error fectching: {res.status_code}, 
                         check your api and try again')
   return res
```
The function above will send request to pwnedpasswords.com to check if the password we passed in their database.

But before that we have to hash our password, and pass only the first five letters of our hash.


```
def pwned_api_check(password):
    sha1pswd = sha1(password.encode('utf-8')).hexdigest().upper()
    first5_char, tail = sha1pswd[:5], sha1pswd[5:]
    response = request_data(first5_char)
    return get_password_check(response, tail)
```
 
The above function first hashes the password, then divide the hash into two parts the head(first5_char and tail), we can now pass the head of the hash password to our request_data func.

```
def get_password_check(hashes, hash_tail):
    hashes = (line.split(':') for line in hashes.text.splitlines())
    for h, count in hashes:
        if h == hash_tail:
            return count
    return 0
```
When we send the request it will return all hash_password that start with our first5_char, so we have to check for our exact password, 
now we remove the first5_char from all the hash_password we got from our request, now we are left with only the hash_tail we compare all the hash_tail with that of the password we passed in, this function will return the number of times the password appears
`if h == hash_tail: return count `

```
def main(args):
    for password in args:
        count = pwned_api_check(password)
        if count:
            print(f'{password} was found {count} times ... you shoupld probably change your password ')
        else:
            print(f'{password} was not found ...carry on')
```
`main(sys.argv[1:])`
Our program is a CLI tool so the last function helps us check all the password we passed on our command-line interface. 

Hopefully you learnt a few interesting things, follow me for more of this type of content.
#python #security #hash
Redux Intro
Published: 2022-02-25 12:59:47

## What is Redux?
Redux is an open-source javascript library. Redux is for managing and centralizing application state. Most commonly libraries such as React or Angular are used redux  for building user interfaces. Redux is a predictable state container for javascript apps. It is  Similar to Facebook's Flux architecture that was created by Dan Abramov and Andrew Clark. It can run in different environments such as client, server, and native, and are easy to test. We can use redux with react or any library. It allows React components to read data from a Redux Store, and dispatch Actions to the Store to update data.

## What is the main part of Redux?
Life of the redux are :- 
  1) Action that stores different kinds of function those we 
     need.
  2) Reducer that calls function from the action according to 
     conditional statement.
  3) Store that store full functionalities.

## What is the use of Redux?
Redux can be used as a data store for any UI layer. It can be used with any UI layer or framework, including React, Angular, Vue, Ember, and vanilla JS. It is used for STATE MANAGEMENT, Fetching And Storing Data, Assigning Data To UI Elements, Changing Data, UNDO, REDO,COLLABORATIVE ENVIRONMENT , OPTIMISTIC UI,PERSISTING AND BOOTING UP FROM STATE, REALLY EXTENSIBLE SYSTEMS, TIME-TRAVEL DEBUGGING, AUTOMATED BUG REPORTS, Downsides Of Redux, STEEP LEARNING CURVE,“BOILERPLATE” CODE, PERFORMANCE PENALTY.  
In a word , Redux can work with any front-end frameworks, such as Angular, Ember.js or even jQuery, or even vanilla javascript.
Redux
Tags: javascript, redux, react, programming
Published: 2022-02-25 12:47:16


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ell71l7cwkl5y73gccqd.png)**What is Redux**
Redux is a predictable state container designed to help write JavaScript apps. It behaves consistently in client, server and native environments. It is mostly used as a state management tool with React. It can also be used with any other JavaScript framework or library. Redux, the state of the application is kept in a store, and each component can access any state that it needs from this store.

**When to use Redux**
Redux lets you manage app status in a single place and make app changes more predictable and recognizable. This makes it easier to reason about changes in the app. Usually when the app scale increases, managing the condition of the app becomes a problem. Redux is used to solve this problem.

**Why use Redux?**
When using React-Redux, the states no longer need to go up. This makes it easier to identify which action causes which change. Using Redux does not require the component's child component to provide any state or method for sharing data among themselves. This greatly simplifies the app and simplifies maintenance.

**Redux makes the state predictable**
In Redux, the state is always predictable. If the same state and action are passed to a reducer, the same result is always produced because reducers are pure functions. The state is also immutable and is never changed. This makes it possible to implement arduous tasks like infinite undo and redo.

**Redux is maintainable**
Redux is strict about how code should be organized, which makes it easier for someone with knowledge of Redux to understand the structure of any Redux application. This generally makes it easier to maintain. This also helps segregate business logic from component trees. For large scale apps, it’s critical to keep apps more predictable and maintainable.

**Debugging is easy in Redux**
Redux makes it easy to debug an application. By logging actions and state, it is easy to understand coding errors, network errors, and other forms of bugs that might come up during production. Redux DevTools also makes it easy to take advantage of all Redux offers.

**Performance Benefits**
React Redux implements many performance optimizations internally so that your own connected component only rerenders when it actually needs to.
Synchronous Invocations For lambda Using cloudshall
Published: 2022-02-25 12:41:58

When you invoke a function synchronously, Lambda runs the function and waits for a response. When the function completes, Lambda returns the response from the function's code.

**Lambda - Synchronous Invocations - Services**

**- User Invoked:**
Elastic Load Balancing (Application Load Balancer)
Amazon API Gateway
Amazon CloudFront (Lambda@Edge)
Amazon S3 Batch

**- Service Invoked:**
Amazon Cognito
AWS Step Functions

**- Other Services:**
Amazon Lex
Amazon Alexa
Amazon Kinesis Data Firehos

Demo:

Step-1:

Go to the lambda function and go to the create function.

Step-2:

Use blue-print and search for hello-world nodejs.

![Hellow-world nodejs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/15p240txfoovwn3cgd3j.png)

Step-3:

Configure the function as follow and create function.

![Create test function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qnhpr9z01akwe9qxhze5.png)
 
Step-4:

Go to the cloud shell service and check aws cli version as follow.

![Cloudshell](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tckepjcgzx7ru98idki8.png)
 
Step-5:

Following command list  all the function.

![List the function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tspx8tq3uj3g348uyhjb.png)

Step-6:

Invoke the function from cli or cloud shell

![Invoke the function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e6x93dcg0d5qf8biw6xj.png)
 

Step-7: 

Cat the response file to view the response from lambda function
Help in creating the most simple Athena UDF
Published: 2022-02-25 12:24:07

Hi, could someone please give me an example in using a very simple UDF. From that simple UDF I could make it a more complex one, but I just need a very simple start in returning a substring from a database field. I have 2 problems:

1. How to define a correct UDF in my query. My query now is:
    USING EXTERNAL FUNCTION test(ID VARCHAR) RETURNS VARCHAR LAMBDA 'test'
    select test(ID) FROM "BibleLinkDynDB"."default"."bible_link_statistics" limit 10;
ID is the database field.

2. How to use the input from the UDF in the lambda function. Based on the lambda template my function looks like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5fzx8lgk0q4vvjrmuqwq.png)

I know this is not correct. I don't now how to get and process the input string because I think event is an object.

If someone could please give me a hint or a simple example, then this beginner would be very grateful.

kind regards Reyer
Tailwind CSS Introduction:
Published: 2022-02-25 11:50:03


Tailwind CSS is self-described as a utility-first CSS framework. Rather than focusing on the functionality of the item being styled, Tailwind is centered around how it should be displayed. This makes it easier for the developer to test out new styles and change the layout.Recently, a new CSS framework Tailwind CSS has been released and it has reached relative success among frontend developers. A totally new alternative to Bootstrap where it has dominated the market for a while. Only the future can tell us if Tailwind CSS can be a good replacement for Bootstrap.

Tailwind CSS brings a lot of new concepts to developers. One major concept is the utility-first where you stop writing CSS and only apply CSS classes directly to your HTML file.Another advantage is to write only CSS classes and you'll stop fine-tuning your design by one pixel by one pixel and lose your time with details. For example, you can indicate if the font needs to be small by applying text-sm or you need a larger font size by applying text-lg.Tailwind CSS includes a lot of more features. But, I won't discuss it here and you can check out on their documentation to see the details.
 
Here is the list of Tailwind CSS you can use for your next project. It's only a showcase of what I've done recently. But, in a couple of weeks, I'll share what I have learned in Tailwind CSS but also share about web design. Like for example on how to build a navbar, a pricing table, etc.
The important Part is Flexbox & Grid.Because any website responsible design implement time very very important role play this Grid and flex layout system
Hover, focus, and other states
Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:grid-cols-6 to only apply the grid-cols-6 utility on hover.
Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:grid-cols-6 to apply the grid-cols-6 utility at only medium screen sizes and above.




###Grid Template Columns
Utilities for specifying the columns in a grid layout.

`grid-cols-1
grid-template-columns: repeat(1, minmax(0, 1fr));
grid-cols-2
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-cols-3
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-cols-4
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-cols-5
grid-template-columns: repeat(5, minmax(0, 1fr));
grid-cols-none
grid-template-columns: none;`

Flex
Utilities for controlling how flex items both grow and shrink.

`flex-1
flex: 1 1 0%;
flex-auto
flex: 1 1 auto;
flex-initial
flex: 0 1 auto;
flex-none
flex: none;`

####Breakpoints and media queries
You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:flex-1 to apply the flex-1 utility at only medium screen sizes and above.
So that tailwind css is the most helpful an easily css framework
Redux Toolkit and Mongoose
Tags: redux, mongoos, reduxtoolkit
Published: 2022-02-25 12:21:30

I have learned new technology  Redux  tool kit and mongoose.

## **Mongoose:**
Mongoose module is one of the most powerful external modules of NodeJS. Mongoose is a MongoDB Object database Modelling that used to translate the code and its representation from MongoDB to the Node.js server
Advantages of Mongoose module:
Collection validation of the MongoDB database can be done easily.
Predefined Structure can be implemented on the collection.
Constraints can be applied to documents of collections using Mongoose.
Mongoose module built on the top of MongoDB driver and provides easily abstraction of the query and define a query.
Additionally, it implements validation and other neat features in order to make sure your schema is consistent when inserting/updating/finding documents from collections. It also creates Model abstraction which makes it easier to work with, so it looks like you are working with just objects rather than pure data.
Mongoose is an incredibly popular and well-done library in the NPM universe. It is used extensively by many excellent programmers based upon its Model-Schema structure.
So I have practiced with Mongoose to keep my required validation strong.


## Redux Tool Kit:

When working on a Frontend project that has to make use of a state container, the go-to library for most engineers is Redux. This is a very good library for managing your states. It  is described as SOPE which stands for Simple, Opinionated, Powerful and Effective. While working with the standard redux library, there are many issues we encounter which include
Redux requires additional installation of other libraries to make it more effective, an example is the reselect library, which is a selector library for redux.

Redux requires a lot of boilerplate code, which most developers don’t like doing, where you find yourself writing action creators over and over again for example.
Complicated configuration setup.

Redux Toolkit package was built in mind to so solve these cases by abstracting the setup process and also handling redux common use cases, to best illustrate this, I would be comparing a use case using the standard redux library with using the redux toolkit library. It also provides the automatic support for Redux Dev-tools Extension and for immer.js library which is a great tool to deal with immutable objects. You can also use the various predefined functions of Redux Toolkit which not only speeds up the process but also saves time.
Dependencies that comes along with Redux Toolkit:
Immer, redux, redux-thunk, reselect

I am still learning and practicing  those technology, because I believe practice makes a man perfect.
React Native
Published: 2022-02-25 12:15:13

React Native is a JavaScript framework that allows us to build natively-rendered mobile apps for iOS and Android. It’s based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms. It is used for writing real, natively rendering mobile applications for iOS and Android. The framework is based on Facebook’s user interface (UI) JavaScript library, React.

 **

### React Native Implementation
**
React Native are written in JSX, a combination of JavaScript and XML. Once the code is complete, the framework acts as a bridge that connects native APIs with mobile UI components. Native APIs may be in Objective-C or Swift, for iOS, and Java, for Android. However, since JSX is compatible with both platforms, application code only needs to be written once.

**

## Advantages of React Native
**
A growing open source community of developers with lots of documentation and tutorials.
Teams save time and money with faster development.
Developers can reuse code across channels and platforms.
A single database is used for both iOS and Android.
Application performance and efficiency is increased.
Companies have the ability to hire one developer for multiple projects.
The user experience (UX) of a native app is provided using familiar tools.
**

## React Native Users
**
Facebook, Facebook Ads Manager, Facebook Analytics, Instagram
Oculus,Coinbase, Shopify, Tableau,FlipKart, Mercari, NerdWallet, Discord,Skype, Bloomberg, Pinterest,Tesla, Ubar Eats, Walmat, Wix.com, Sales force, Words with Friends, Call of Duty Companion App, Foreca, LendMN,Tencent QQ, Artsy, Chop, adidas GLITCH, Delivery.com, F8, Gyroscope, JD, SoundCloud Pulse, Vogue, Townske
How to Hire JavaScript Developers
Published: 2022-02-25 12:10:56

Finding and hiring the right JavaScript developer can be challenging. The JavaScript community is vast and continues to grow every day with new libraries, frameworks, and emerging tools. There are also a lot of developers with varying levels of experience who use JavaScript.

You may see two candidates with similar experience but they could have completely different skill sets or even very different ideas on how to implement a project.

JavaScript developers are in high demand. However, there are many ways you can make the hiring process easier. One common point that will be included in all the methods is Interviewing the candidates.

**You can find the candidates worthy of interview in a variety of ways mentioned below:**
1. Hire full time employees from Job Portal
2. Hire freelancers from freelance portals
3. Hire Dedicated JavaScript Developers from Agency

Being a consultant I would prefer **hiring a dedicated JavaScript developer** from an agency because it is easy and comes with the responsibility of successfully delivering the project on time.

**You can get the candidates for interview in three easy steps:**
•    Share your requirement with the agency
•    Get a call from an agency for further clarification on your requirement
•    Get a list of candidates for interview

I hope the post helps you in hiring a dedicated JavaScript Developer.
Sending Emails with Email Js
Tags: javascript, emailjs, react, express
Published: 2022-02-25 11:57:31

## Sending Emails with Email Js in React. 
This service allows us to connect our email service, build an email template and send it from JavaScript without any server code. Let’s check out the scope.

- Create an account and choose an email service to connect with. There are the popular transactional services options available, such as Amazon SES or Mailgun, as well as personal services like Gmail or Outlook. You can also add a custom SMTP server. That’s what we’re going to do since we use Mailtrap. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1132vskrtjzppow393qe.png)

- Create an email template using the built-in editor. The editor provides plenty of options for content building and other useful features, such as auto-reply, reCAPTCHA verification, and more. It’s also necessary to understand the basics of coding your own HTML email template. For this, read our Guide on How to Build HTML Email. Once this is done, click Save.

One of the major benefits of EmailJS.com is that the typical email attributes are hidden. The template includes the recipient field and it cannot be overridden from JS, so you send the template you have configured previously.

- Now you need to install EmailJS SDK. This can be done with npm:

```
npm install emailjs-com --save
```

The actual email sending can be carried out via two methods: emailjs.send or emailjs.sendForm. Here are the code examples for both of them:

## emailjs.send
```
var templateParams = {
    name: 'James',
    notes: 'Check this out!'
};

emailjs.send('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', templateParams) //use your Service ID and Template ID
    .then(function(response) {
       console.log('SUCCESS!', response.status, response.text);
    }, function(error) {
       console.log('FAILED...', error);
    });
```

## emailjs.sendForm

```
var templateParams = {
    name: 'James',
    notes: 'Check this out!'
};

emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', templateParams) //use your Service ID and Template ID
    .then(function(response) {
       console.log('SUCCESS!', response.status, response.text);
    }, function(error) {
       console.log('FAILED...', error);
    });
```

Run it in the browser and check out the Mailtrap Demo Inbox. It works!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wtihwu2p0z85iqv6o2cv.png)

## Pricing 
EmailJS offers a free subscription plan that allows you to send up to 200 emails per month using only two templates. In addition, you’ll have a limited list of contacts and email size (up to 50Kb). Higher quotas are available for paid subscriptions: Personal ($5/month), Professional ($15/month), and Business ($50/month).