teleren/devto huggingface dataset:
How to bypass input filter
Tags: cybersecurity, tutorial, opensource, security
Published: 2021-10-09 18:22:40

Before going into client-side filters let’s understand what client-side filters are. As we know nowadays there are a lot of safer websites available in the market and to make themselves safer they use different kinds of filters also which can be categories in two parts :
1. Client-Side Filters
2. Server-Side Filters

We can also say that when we give input and if it satisfies the criteria then it will be accepted otherwise it will raise an error.

For example: Entering letters in the phone number field or Inserting email without @ symbol
Now let's jump in the client-side filter and understand what is meant by that.

1. Client-Side Filter

On the client-side, the input is being checked on the by browser only which means before sending the input to the server Where on the server-side the input is being sent to the server, and then the server checks whether is valid or not. It is hard to bypass server-side filters as compared to client-side filters but in the end, both of the filters can be bypassed depending on the code and how they are written in the backend and what filters they have used, and whether they do their job completely or not.

We are going to use the burp suite to intercept the HTTP  header response for our current example.

Steps to bypass client-side filters using burp suite.

Open the page where you want to check the client-side filter. I am taking the example of a signup page.

Now I will enter the correct details and click on the signup and intercept that request using a burp suite and note down the response that has been sent to the server by the browser when we enter the correct credentials.

Now in the burp suite, I can try to change or temper the data like dis selecting the selected field (terns and condition) changing the required fields (if age is 18 years or above changing it to less than 18)

After doing necessary changes if we forwarded the request from 

Burp Suite and it is accepted and we are able to signup successfully that means there is no server-side filter or check.

This type of Vulnerability is also known as Improper or Missing Server Side Validation Vulnerability 

To make our web application safer from Client-side attacks we can avoid this kind of vulnerabilities.
CKEDITOR.destroy() does not exist?! How to fix it on multiple CKEditor instance intialization ;) .
Tags: javascript, ckeditor, webdev, tutorial
Published: 2021-10-09 18:07:04

Sometimes you need multiple CKeditor instances in your web app. For example let suppose we have the following html and js:

```html
<form action="#">
  <textarea id="one"></textarea>
  <textarea id="two"></textarea>
  <button type="submit">Submit</button>
</form>
```

```js
$(document).ready(function(){
  let CKEDITOR=[]
  
  ClassicEditor.create(document.querySelector('#one')).then(editor => {
    CKEDITOR["one"] = editor;
  })
  
  ClassicEditor.create(document.querySelector('#two')).then(editor => {
    CKEDITOR["two"] = editor;
  })
  
  $("form").on('submit',function(e){
     e.preventDefault();

      CKEDITOR["one"].destroy();
      CKEDITOR["two"].destroy();

     //Ajax Call or rest of submission goes here
  });
})
```

As you can see, we load 2 instances of CKeditor into 2 textareas. And we destroy them during submission. That can be rather troublesome in case we submit the form, because in either of one of these lines we may get the error:

```
CKEDITOR[...].destroy() function does not exist.
```

This happens because CKEditor may not be finalized in its initialization before submit handler to the form provided, due to javascript's asynchronous nature. 

We can bypass the problem like that:

```js
$(document).ready(function(){
  let CKEDITOR=[]
  let intializeForm = () => {

   if(!CKEDITOR["one"] || !CKEDITOR["two"]){
     return;
   }

   $("form").on('submit',function(e){
     e.preventDefault();
     //Ajax Call goes here
      CKEDITOR["one"].destroy();
      CKEDITOR["two"].destroy();
    });
  }
  ClassicEditor.create(document.querySelector('#one')).then(editor => {
    CKEDITOR["one"] = editor;
    intializeForm()
  })
  
  ClassicEditor.create(document.querySelector('#two')).then(editor => {
    CKEDITOR["two"] = editor;
    intializeForm()
  })
})

```

The main difference in the code above is that we place the form submit handler in the function `intializeForm` then on each CKEditor initialization we call it. This function checks if all CKeditor instances initialized, then places the event handler on form. This function is called upon on each CKeditor intialization, therefore the last editor initialized also initializes the form submission as well.

Is it a tip that can save you from unwanted mess on multiple CKeditor instances ;) .
Concepts to Know To Get A Job as a Django Developer
Tags: javascript, webdev, beginners
Published: 2021-10-09 17:58:50

Database Design

You have to understand the Django models. Have the SQL concepts before learning this. You have to relate to the models and relationships they carry. Master how Boolean fields, integers, Charfield, foreign keys work. There must be a database for any dynamic website.

Authentication for Authorization

The more time you spend in this section, you’re going to learn more staff. Grants different access to clients, staff, and the admin. Please make sure each of them is directed to a specific page upon login. This is like a database administrator. You are the one who controls the whole system. Authentication involves signing in and logging in. Let each category of people have a specific role they play. Play around and see how the session works. Know how validation is important. Then expand to third-party libraries. As you grow, you’re going to understand how social authentication works.

Flow of data

Understand how data is fetched and posted on the templates. Django has more than enough queries. They kinda relate to the SQL, so you will have an edge if you understand the relationship between the two. Learn how to retrieve data. This is where you are going to be creating your views. It’s going to take a lot of time before you grasp the concepts.

Static and media file configuration

Understand the setup in local development and production. They are arranged differently. Locally, the media will be in the actual folder. In production, the files are stored on another server. This is where AWS comes in. Digital ocean spaces are also good. Understand the protocol. Know how they are pushed. White noise is a package that might aid in the production process.

Deployment

I can’t lie. I wasted a certain startup for several days because the deployment process was hectic for me. Of course, I was a beginner. There are various ways you can deploy. You may decide to use Heroku CLI, GitHub, or putting your files in a container. It’s good to know how the Django server is done. By doing this, you are going to understand the architecture of Django. It’s good to work with a team that has already deployed the system. A startup can give you much experience.

Research

The field has a large community that contributes to developing various packages. Do more research and learn daily. Use stack overflow to your maximum. Explore the free staff provided by the Django community. Google is alive and everything you want to learn is available.

Be uncomfortable and comfortable

It’s okay to feel uncomfortable at some point. It is normal to feel in your comfort zone. Sometimes programming is just hectic. A bug might make you feel like you want to be quiet. But that’s normal.
JavaScript Challenges - Strings
Tags: javascript, webdev, programming
Published: 2021-10-09 17:36:18

### Q1. Write a function to validate given email has @ or not
```javascript 
    isValidEmail("test@gmail.com") === true
    isValidEmail("testmail.com") === false
```
### Q2. Write a function check weather given email id is gmail or not

```javascript 
    isGmailId("test@gmail.com") === true
    isGmailId("test@yahoo.com") === false
```
### Q3. Write a function to accept firstName and lastName as param and should return fullName

```javascript 
   getFullName("John","Snow") == "John Snow";
```
### Q4. Uppercase the first character

```javascript 
   upperFirst("john") == "John";
```
### Q5. Truncate a given string with a limit
   
```javascript 
   truncate("What I'd like to tell on this topic is:", 20) = 
   "What I'd like to te…"
   truncate("Hi everyone!", 20) = "Hi everyone!"
```

### Q6. Function to extract currency value from given string

```javascript    
extractCurrencyValue('$120') === 120
```
### Q7. Function mask every A with # 
```javascript 
    stringMask("Its A sunny weather") === "Its # sunny we#ther";
```
### Q8. Function to Count Decimal Points in a given number?
   
```javascript 
   getDecimalCount("43.20") ➞ 2
   getDecimalCount("400") ➞ 0
   getDecimalCount("3.1") ➞ 1
```
In case anyone is looking to learn serverless by doing a hands-on project
Tags: serverless, hacktoberfest, node, go
Published: 2021-10-09 17:14:36

In case anyone is looking to learn serverless by doing a hands-on project, let me know. 


I have a beginner friendly backend requirement. 



1. It will be simple CRUD of three resources.

2. Data will be stored to DynamoDB.

3. For language, you can use golang or node.

4. All code you write will be open source under GPL. 

5. Our repositories are participating in Hatoberfest.


The project: [simplq.me](https://www.simplq.me/) is an open source queue management software. The backend is written in Springboot and we want to migrate it to serverless as it's more economic given our traffic volume.

https://github.com/SimplQ/simplQ-frontend
https://github.com/SimplQ/simplQ-backend
What-is Flask decorator
Tags: python
Published: 2021-10-09 16:55:47

A function that takes another function as a parameter and returns another function.

A function can be used as a parameter, a return value, and can be assigned to a variable.

> Definition : 
A decorator is a function that takes another function and extends the behavior of the latter function without explicitly modifying it.

> Mechanism :
```
@decorator
def f(argument):
```

1. `f` is replaced by `decorator(f)` 
2. `f(argument)` is equivalent `decorator(f)(argument)`

## @wraps as a decorator
Decorators work as wrappers. 

Modifying the behavior of the code, before and after a target function execution. 

Allow to augmenting the original functionality, without the need to modify the function itself.

Thus decorating it.

## Composition of Decorators
Function decorators are simply wrappers to existing functions.

Let's consider a function that wraps the string output of another function by p tags.
```
def get_text(name):
   return "lorem ipsum, {0} dolor sit amet".format(name)

def p_decorate(func):
   def func_wrapper(name):
       return "<p>{0}</p>".format(func(name))
   return func_wrapper

my_get_text = p_decorate(get_text)

print(my_get_text("John"))

# <p>Outputs lorem ipsum, John dolor sit amet</p>
```

## Decorator Composition : syntactic sugar 
There is a neat shortcut, mention the name of the decorating function before the function to be decorated. The name of the decorator should be perpended with an @ symbol.

```
def p_decorate(func):
   def func_wrapper(name):
       return "<p>{0}</p>".format(func(name))
   return func_wrapper

@p_decorate
def get_text(name):
   return "lorem ipsum, {0} dolor sit amet".format(name)

print(get_text("John"))

# Outputs <p>lorem ipsum, John dolor sit amet</p>
```
> This is a short resume of this coders awesome articles
1. https://medium.com/@nguyenkims/python-decorator-and-flask-3954dd186cda
2. https://www.thecodeship.com/patterns/guide-to-python-function-decorators/


## common @wrap example
This example show how to implement jwt check.

```
from functools import wraps

def get_token_auth_header():
  if 'Authorization' not in request.headers:
    abort(401)
  auth_header = request.headers['Authorization']
  header_parts = auth_header.split(' ')
  if len(header_parts) != 2:
    abort(401)
  elif header_parts[0].lower() != 'bearer':
    abort(401)
  return header_parts[1]

def requires_auth(f):
  @wraps(f)
  def wrapper(*args, **kwargs):
    jwt = get_token_auth_header()
    return f(jwt, *args, **kwargs)

@app.route('/taget')
@requires_auth
def target():
  print(jwt)
  return 'welcome to target'
```
PWA Summit 2021
Tags: pwa, discuss, webdev, devjournal
Published: 2021-10-09 16:49:17

PWAs are picking up steam and to learn more about the recent advances I'd recommend the PWA summit 2021 event. It was held on 7th October 2021 and was nearly 7 hours long. 

Here are a few of the talks that I found interesting about the conference.

1. Make your PWAs look and launch beautifully - Önder Ceylan
https://youtu.be/qbh_u2hvIjg?t=8910 

Önder showed up some of the latest features that can make a PWA launch beautifully. Starting off with maskable icons. From the talk it is a square icon with the main logo in the center so that different devices mask it differently to circle, rounded square etc.
I am also looking forward to playing around the the new screenshots property on the manifest.json. This looks like an app download by showing some screenshots of the main app screens.
I personally think Önder's talk was the best with a look at many of the cool features to play with.

2. I also enjoyed Ire Aderinokun's talk on PWAs today. https://youtu.be/qbh_u2hvIjg?t=884

She spoke on the progress that PWAs have made over the last few years and ran through some of the interesting APIs that are beginning to be adopted along side some cool use cases.

Here is the link for the full summit: 
https://www.youtube.com/watch?v=qbh_u2hvIjg&ab_channel=PWASummit
PGP Proof for Keyoxide/Metacode
Published: 2021-10-09 16:38:17

This is an OpenPGP proof that connects [my OpenPGP key](https://keyoxide.org/im@austinhuang.me) to [this dev.to account](https://dev.to/austinhuang0131). For details check out https://keyoxide.org/guides/openpgp-proofs

[Verifying my OpenPGP key: openpgp4fpr:f4c5be258540e91ab01b448584c23aa04587a91f]
My Coding Bootcamp Journey - 1 week to go 😅
Tags: webdev, beginners, codenewbie, todayilearned
Published: 2021-10-09 16:16:34

My highlight of the week was taking part in the OS Map & Hack hackathon (my first). I wrote up my experience [here](https://blog.webdevri.ch/os-map-and-hack-2021), good and bad.

Other than that it was a short reading list, introducing regular expressions and functional programming

## Regular Expressions
This, I was not looking forward to. From what I had seen it was like a foreign language so I was a bit apprehensive.

It actually turned out kinda OK. Like all programming languages (I know it's not a language) there is rules, structure and logic and the tutorial and tools like [regexr](http://regexr.com/) demystified it a lot and I now feel ready to embrace it and learn more. It certainly looks to be very useful in some circumstances.

## Functional Programming
### Why?
- Less bugs - easier to read
- Less time - re-use code

### Functions are values
So can be assigned to variables
```javascript
function triple(x) {
  return x * 3;
}
```
or
```javascript
let triple = function(x){ return x * 3; }

triple(3) // gives 9
```
### Higher Order Functions
Are functions that take other functions as arguments or return functions. Gives **composition** - bundling smaller functions into a larger function. Easier to debug smaller functions and less code. e.g.
- [forEach()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)
- [filter()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)
- [map()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)

This is all good stuff and looking forward to PRE-3 next week before the bootcamp gets underway.
OS Map & Hack 2021
Tags: beginners, webdev
Published: 2021-10-09 16:11:47

I signed up for the OS Map & Hack as I'm interested in mapping and geo-stuff. I also wanted to apply some of the basic web dev skill I have picked up myself and as part of the [Northcoders coding bootcamp](https://northcoders.com/) precourse and prep work in something approaching a real world environment.

I was put in a team of 5 including: a bootcamp grad who has started his own business, two people already working/studying in the geospatial area, and someone working on Electic Vehicle (EV) chargepoint strategy for a local authority.

We had 2 days (Oct 6/7) to come up with an idea and present to judges through 2 rounds of judging - all online. Our idea was to empower local communities to gather evidence of the high-level feasibility of siting EV chargepoint in their communities and connect them with other local organisations that may have better facilities.

We worked on a working prototype and came up with this:

![Screenshot 2021-10-07 at 15.09.41.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1633790232670/Q2miKE9YA.png)

Our EV strategy expert was key in helping us figure out the main things that affect siting of a chargepoint from a demand and supply persective. So a local community could take our app and pitch their local authority/charging network for infrastructure or grants.

We actually had a great mix of skills: strategy, geospatial, business & development. I was surprised how relatively little coding we did - I wrote one function to make an API call and update the DOM with some data. Most was discussion (on Discord & voice) about the purpose and audience for the app. That was fine - I learnt a bit about EV infractructure and collaboration remotely.

## The Good
When it came to the judging we were the only team that could demo an app and we got through to the 2nd round. Ours also was a bottom-up approach where the others were all top-down so we thought we had a good idea. Some other teams were obviously geo-experts and had some whizzy-loooking slides and had obviously spend far more than 2 days on their solution!

## The Bad
Come the second round we were left out of the presentations 😞 Although we had complied with all requirements the organisers maintained we were too late to be included due to the strict timetable - not fair!

An offer of a virtual meeting with an OS Product Manager next week did not mitigate the diappointment of playing with the big beasts!

Anyway, overall it was a great experience and a pleasure working with my team. I am definitely up for more hackathons in the future.
My Coding Bootcamp Journey - 2 weeks to lift-off
Published: 2021-10-09 16:07:22

With 2 weeks until the start of the [bootcamp](https://northcoders.com/our-courses), it's starting to get real. This week I thought I would do a little interview with myself.

## Who are you, Rich?
I am a married man, living with my wife in the East Riding of Yorkshire, UK. Until recently I was a part-time customer delivery driver for Waitrose. I have a degree in Mechanical Engineering (from a couple of decades ago) but did not pursue a career in that area. I first started using the Internet & web about 20 years ago.

## What interests you?
Coding, of course! Also Tech4Good, mapping/geolocation, climate change, protecting democracy. I'm interested in how I can apply my coding/tech skills to these areas.

## What do you know now?
Basic JavaScript, HTML & CSS, a (very) little about making a map on the web.

## What have you learned so far on the precourse?
The importance of having a solid grasp of the basics and problem solving.

## What's been hard?
Not over-thinking things. Keeping it simple and then refining - I tend to jump ahead too much.

## What has been fun?
Connecting with my future bootcampers on Slack and actually completing the problems we have been set.

## What are you doing next week?
The PRE-2 section of the precourse which introduces regular expressions 🤯 and functional programming.

I've also signed up to the [OS Map & Hack](https://www.ordnancesurvey.co.uk/business-government/developers/hackathon) but not sure how much time I'll have for that!
Java 8 : Why static Method introduced in interface  .
Published: 2021-10-09 16:03:21

Before java 8 whenever want to write any common functions that will be used in multiple places in application then in most cases, create the utility class and write the common code in this utility classes. But from java 8 can write this common code in interface with help of static methods. 
Due to that no need to write common code in utility classes and interface can be use for utility functionality with the help of static methods.
Promisify setTimeout
Tags: javascript, webdev, programming, node
Published: 2021-10-09 15:44:17

### Code to promisify `setTimeout`

```javascript
const delay = (time) => new Promise((resolve, reject) => setTimeout(resolve, time))
```

#### Usage

```javascript
delay(2000).then(() => console.log('Hello i will get logged after 2 second(s)'))
```
CTA Buttons...but with penguins
Published: 2021-09-27 04:06:51

# What is a CTA?
A CTA button, or Call to Action button, just tries to get the user to do something. An example would be the like button for this article, or the Spotify Listen Now button. These buttons aren't anything complex or asking someone to act to save the world, but they must ask the user to do something. 

# Our CTA
So...we modeled our CTA off of the reprogrammed [Club Penguin website](https://play.cprewritten.net/) We ripped the Create  a Penguin image and based our button to be an image button without a text tag. It's...something.

# Issues
Putting text on top of images is difficult, but not impossible. I used another web component, meme-maker, to overlay text on the image. It doesn't offer any text color change, but it does allow us to change the text size. We also included an icon in the button, but at the moment I have no idea what we are going to do with the icon. I also had some issues with tab-order. Since we have a meme-maker, a, and img tag, we have multiple tags that get tabbed through while it appears to sit on the same element. I had tried `tab-order: "-1"`, but it was not working for a while. The fix was that Safari has a weird option by default that it doesn't tab through all of the elements on a page. 

# GitHub
penguin-state-button
{% github PenStat/PenStat-CTA no-readme %}
Firing up that coding journey
Tags: beginners, programming, codenewbie, tutorial
Published: 2021-10-09 14:44:04

Have you found yourself interested in programming or are you in another field or career and have been considering to switch into coding?
Well, I had a similar experience some years ago (2016) and while at it made a decision to embrace coding which wasn't a big part of my job then.
I used to write some short code snippets in Python and JavaScript and play around with HTML and CSS (they are not programming languages but equally important in my view). Browsing through the internet and checking out the projects that other people were doing inspired me to start the coding journey.
I started by doing some HTML, CSS and JavaScript tutorials on https://www.codecademy.com/ where I learned some cool basic stuff on the subjects.
I then embarked on FreeCodeCamp which one can visit at https://www.freecodecamp.org/ where I also proceeded to learn on HTML, CSS and JavaScript. 
For beginners and newbies, I would highly recommend the platforms and you are not limited to them since currently there are many others including YouTube channels.
Well, happy coding and keep sharing your progresses and project paths.
Service classes A Primer
Tags: laravel, webdev, architecture, cleancode
Published: 2021-10-09 14:41:33

Do you ever heard about service classes ?
Do we need actually need it ?
We can code with or without service classes.But when we use service classes,It all matters when we code with intention of good readability,We don't want to code that just works,Our code must be beautiful enough to read by other developers, especially our senior dev.

Service classes allows us to write business logic in one place and app logic in another place,What is actually business logic 
?
Business logic is nothing but, how we verify the registered user, or how we calculate our shipping cost.