/wdg/ - Web Development General

> WD Purple
How old is that product?
I used to work at WD a few years ago and we only had Green, Black, and Blue as our main product lines IIRC

Also, can someone explain web tokens to me? Ok, maybe not explain because Ive been thinking about them and reading about them quite a bit over the last week.

When you Oauth someone with google, google returns a JWT token but also some tokenID. You can send that tokenID to their API to get back information about whether or not that ID represents a valid token. Is it then expected that this tokenID will get passed around in HTTP headers alongside the authentication Bearer token itself (which is a JWT xxx.yyy.zzz formatted token?).

I thought tokens were supposed to speak for themselves; i.e., carry all necessary information to be validated . Why is there a peripheral ID for checking on a token. Would it be terrible to just use that instead as an authentication token?

Where should servers cache authentication information? When a request comes in, JWT authenticated or otherwise, you need to either run some auth check on the token or look up some stateful cache on it. That is the other thing I dont quite follow on JWT's whole 'stateless' claim. It seems like there will almost always be a compelling reason to do some amount of state management around authentication in the api code.

I hate this post.

JQuery is great. Its a library instead of a proprietary framework. There is nothing wrong with writing Vanilla javascript and JQuery is much closer to vanilla JS than all the shitty frameworks out there.

t. React developer

well you obviously have more autorithy than me to claim that, I only know jQuery, kek

JS is unironically a good language after ES6

then why react if jQuery exists and it's much simpler?

>Be hardcore libertarian
>See tech giants deciding to silence speech due to political agendas
>Be babby's first web developer and make blog platform that lets people speak
>code entire website by hand and got it functioning
>Getting about 200-1000 reads on some articles
>Normal days around 40 people a day checking out the site
I'm slowly building... I'm getting libertarian mods to make sure fucks don't spam out my site. I am still working on it and been mostly writing new articles that garners some attention.

1stAmender.com

Attached: pure-irony.jpg (900x900, 397K)

>Also, can someone explain web tokens to me
medium.com/vandium-software/5-easy-steps-to-understanding-json-web-tokens-jwt-1164c0adfcec

>1stAmender.com
looks ugly as fuck bro
>checking it
consider copying even free web (html css js) templates available around

i don't think this project of yours will ever, ever, be successful

good luck

Still relevant article about modern frontend webdev
hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f

Yeah don't care. I don't want people to be censored. I don't care if I don't succeed.

I have a lot to say about the current state of things and so writing about it on facebook/twitter just gets silenced. My articles don't get removed on my own site.

I'm still learning about react, but running in to some issues.

I have a parent App class, which renders a form class and a result class.

After the form class gets input, I want it to show the result class and hide the form class. Examples on the internet show using a state built into the form class and then rendering the result class within it, but that doesn't seem right because it is on a different part of the page.

Am I supposed to store the state in the parent class? I'm really confused how this is supposed to work.

Attached: 1537874176057.jpg (1280x1500, 142K)

chegg it

Attached: long_way.png (1900x913, 1.02M)

Medium occasionally has good content, but I cant stand there site design. It feels too hypermodern, nothing but whitespace, and it scrolls too fast.

I will eternally judge all content on Medium unfairly for that reason. To be fair, Medium looks good on mobile. Also fuck them for following "mobile first", it just adds to their hyper modern garbage

>Am I supposed to store the state in the parent class?
Yes.

ParentClass extends Component {
render() {
const { showForm } = this.state;
return(
{showForm && }
{!showForm && }
);
}
}

Thanks man, this is all starting to make sense now.

I'm enjoying this, frontend isn't so bad.

>then why react if jQuery exists and it's much simpler?
Because I started working at a company that was moving onto a React stack and it was convenient enough to just continue with that.

I dont like the defeatist "well companies are doing it so we have to" attitude. We can and should do better than to let popculture at tech companies define the industry.

Sure maybe Im a hypocrite, I dont care. I never learned web development in college and no one really ever taught it to me, so Ive been putting the pieces together for the last few years. These frameworks are all memes.

oauth.com/oauth2-servers/signing-in-with-google/verifying-the-user-info/

Try to render a list of elements. Now add a click handler to each of them. And then update their CSS properties when any one of them is clicked using jQuery.

This is honestly a hard question. On one hand, it's super simple to learn, and you'll be able to do all sorts of shit really fast(after a few hours of learning). But the other user's are correct that it's pretty much useless today, with libraries like React. However, there are still job postings daily asking that people have jQuery knowledge. Learning it will also serve as a crutch, and that crutch may be hard to break.

I'd say as a final conclusion to just learn it. It's really simple, and wont really take much effort on your end. Build something with it; don't neglect to learn vanilla JS, and always think of how you might be able to translate your jQuery into vanilla JS.

How do you go about contributing to big name github repos? Do you just fork their project and start submitting pull requests?

Like, if I wanted to contribute to paypal's github, do I just do the above, or should I try contacting them?

I have a JavaScript function that draws dots under a user's mouse to track movement.

How do I get this function to work on every webpage? GreaseMonkey, or should I create a browser plugin? New to JavaScript and webdev for that matter.

Here should be a working example with React 16.7.0-alpha.0 (Hooks proposal). Just playing around with it myself. Ignore the typescript stuff.

Attached: file.png (793x668, 100K)

lol complete garbage

Holy shit why the fuck are there so many jobs with ridiculously out of touch requirements or even wrong descriptions?

>"Looking for junior frontend developer!"
>"requirements: at least 5 years of frontend experience, must be a master at node, i/o, web socket, restful APIs, PHP, java and ruby on rails!"

MOST OF THAT SHIT IS NOT FRONTEND, WHY THE FUCK DO YOU GUYS DO THIS

Attached: ryan-gosling-blade-runner-2049.jpg (970x545, 57K)

i have a cousin who went from a vue senior lead to a jquery lead, guy is still earning like 5k a month.

It may be deprecated, but a lot of companies still ask you to know about it.

I cackle a bit every time I see a job posting for a junior FE asking for 5 years of experience.

Who the fuck has 5 years of experience and is willing to do junior work?

>Who the fuck has 5 years of experience and is willing to do junior work?
India

What do they even count as "experience" these days?

I count all my high school and uni shit as "experience".

Some notes:

- Website is too dark. Consider changing the background to something like light grey, just not completely white.
- The GET param: "?articlenumber=1389" should be changed to "?id=1389" or "?articleID=1389" at least
- Consider switching out your Microsoft IIS with a linux server like ubuntu server and nginx. There's really handy guides how to set up LEMP stacks, for example: digitalocean.com/community/tutorials/how-to-install-linux-nginx-mysql-php-lemp-stack-ubuntu-18-04
- Look in to HTTP rewrite rules (with nginx/apache) so that instead of "/article.php?articlenumber=1389" you have "/article/1389"

I'll say it again in this thread:
It's because people think being a junior developer is spending a week learning HTML/CSS and some basic JavaScript. So you have hundreds, or even thousands of these types of people applying to junior positions. Junior used to be like 1 year experience, then 3, and now we are seeing 5. It's going to keep extending because of all the idiots on freecodecamp thinking they're ready for a job.

How do I know when I'm "ready"

They're looking for:
>Work experience(has user ever had a job for the position they're applying to?)
>Open source contributions(does user contribute to open source?)
>Personal projects (this is where it gets a little tricky. Every junior has calculators, and whatever else is on the freecodecamp curriculum. What have you built entirely yourself? It'd be even better if you have a userbase)

You don't. I didn't apply to jobs for 4 years because I never felt ready enough, always needing to just learn *more*. I wouldn't make this mistake again, and probably would start applying after the first year.

I knew I was ready after building applications, tools, and what have you. Also, contributing to open source is great. Go fork a websites repo, and get it up and running. You'll be in an alien codebase. It's up to you to figure out what everything does. This is how it's going to be when you do get a job.

How often do you guys steal ideas when designing websites?

I thought about getting into web dev, but I'm not sure what text editor to use. Which one is the best?

Attached: text.png (1366x768, 108K)

This is the worst question to ask. Everyone has a different preference. Try them all, pick one that you like.

reminder

Attached: 7 - 35XdVTe.jpg (2322x4128, 924K)

reminder -2

Attached: 6 - 1BjvC6t.jpg (3096x4128, 387K)

so my isp is a cuck and I've got certain ports blocked, is there any way I could get around it so that I could host my website without relying on 3rd party jewish hosting services like google cloud or digital ocean?

Can I get some feedback on my website?
reportpoll.com

My idea is to have a news feed that is super customizable, right now i just have the basic stuff in place. My next feature would be to have feeds you could create that subscribe to and browse certain groups of articles e.g small conservative sources, tech blogs, whatever.
Mobile should be working now. and let me know if the switch layout buttons are obvious enough.

>im not a pro web dev btw
Grid is centered, but both lists get pushed to the left. Not sure why, but it bothered me for some reason.

pls

Attached: thinkegn cat.jpg (389x398, 12K)

list of categories?

No, the layout of the articles

Attached: ToTheLeft.png (1917x1014, 372K)

that makes sense, it'd look better in the center

This is a different issue though.

The problem you describe is simply that newbies/poorly prepared people are crowding the workplace.

The problem being described in that post, however, is that the recruiter seems to have a complete misunderstanding of what front end means. Why would a front end need to be a master at java programming and ruby on rails? Both of these technologies pay much more than frontend stuff. I could be the best frontend in the world with 20 years of experience and that doesn't necessarily mean I've ever touched java

The descriptions are often made by non technies. They have absolutely no idea what frontend or backend is. Don't worry about it and just apply.

Go on user

Hey, has anyone here ever been able to get freelance work? What's a good place to do it?

Upwork never accepts my application so I cannot take anything. It also seems to be super crowded.

Attached: henlopep.png (657x527, 440K)

Is this a joke? This is trivial in JQuery. Literally 5 lines.

I like this idea. You should have an option to allow users to add more sites.

What do you guys think of this faggotry?

Attached: 2000px-Ionic-logo-landscape.svg.png (2000x2000, 59K)

If you're gonna use Cordova, just use Cordova

How long did it take you guys to learn enough web dev to be taken seriously?

Attached: tara.jpg (1029x578, 66K)

Some notes:

1. So it's hosted on a Node Express Server which is alright but for availability I'd opt for something else

2. Requests to reportpoll.com/api/articles should probably be GET instead of POST

3. I'd probably change the "input type="image" with

4. Add "title" attributes to the layout icons (grid, row, column

5. Since you're using create-react-app, opt in for CSS modules instead of having a global stylesheet

6. Sure you noticed but many of the news sites you've aggregated from have banner images that are 404'd - reportpoll.com/assets/Slashgear.com.png

7. Look in to registering a service worker for offline caching. create-react-app should already come with this but you have to opt in.

Flutter and React Native and even Xamarin are much better than that. The only good thing to come out of that is the icon library. No serious team would work on that.

hmm

Attached: file.png (826x939, 270K)

thanks
yeah, the images are off center too. currently on the shelf since i couldn't figure out how to get it right

I am struggling to implement angled edges on a div.

I am using material-ui with react, and their CSS in JS solution. Right now I have
rectangle: {
background: '#41ade5',
position: 'relative',
zIndex: '1',
color: '#fff',
margin: '50px 0',
height: '200px',
padding: '20% 20px',
textAlign: 'center',
'&:before:after' : {
background: 'inherit',
content: '',
display: 'block',
height: '50%',
left: '0',
position: 'absolute',
right: '0',
zIndex: '-1',
webkitBackfaceVisibility: 'hidden', // for Chrome Windows
},

'&:before': {
top: '0',
transform: 'skewY(20deg)',
transformOrigin: '100% 0',
},

'&:after': {
bottom: '0',
transform: 'skewY(-20deg)',
transformOrigin: '100%',
}},

But it still ends up as just a regular block. Am I doing something wrong?

>angled edges
You mean like this?
developer.mozilla.org/en-US/docs/Web/CSS/clip-path

Isn't support for that fairly lacking?

I want to make a local html page that allows me to edit and save txt files and add images. IS THIS NOT FUCKING POSSIBLE IN 2018? DO I NEED FUCKING NODE.JS FOR THIS?

Attached: 1523475480676.png (1080x1288, 1.36M)

Just use Vanilla JS, dude

how am I supposed to edit the text file and save it? I cant find anything, except for executing server side code just to overwrite a fucking file

local for your own use only? do you mean something like electron?

I mean local, for my own use only. but not electron, that would be in fact node fucking js

any good guide/tutorial/book about css good practices? i mean, i already know the properties and stuff, but i want to know how to apply them correctly, for example, is setting everything with margin left a correct way to position everything? (imagine that in the image all the green lines represents left-margin), or should i choose margin or padding? (to position something inside something)

Thanks for using the image I posted in the last thread

here's an untested guide but will give you the right direction

1. Install node nodejs.org/en/download/
2. Create a folder and name it anything
3. Go in the folder and type "npm init"
4. Download the npm express package
npm install express --save

5. Create index.js and index.html in the folder
6. Open index.js and configure the express server to send the file "index.html" if anyone visits the "/" route on the server
// index.js
var express = require('express');
var app = express();

app.get('/', function(req, res) {
res.sendFile('index.html');
});

7. Configure your index.html file to POST to the server the file contents you desire

8. Configure API routes for reading and updating the file
app.post('/updateFileContents', function(req, res) {
// Get "file_contents" key from form.
const { fileContents } = req.body;
res.writeFileSync('./file.txt', fileContents);
});

app.get('/getFileContents', function(req, res) {
const fileContents = fs.readFileSync("./file.txt", "utf8");
res.json({ fileContents });
});

9. Consider adding in javascript for fetching the "/getFileContents" route or rendering it inside your index.html with a view templating engine

ops forgot image

Attached: ex.png (667x304, 7K)

so, basically running a node server just to read and write to a txt. did u you read op?

Yeah for obvious reasons you can't access the file system with client side javascript unless you opt for a server solution like the one I posted.

>tfw live in a country where there's basically no tech start ups
>only super established companies
>meaning they all ask for either a degree or at least 5 years of experience
>have neither of these
>junior positions are basically nonexistent
>freelancing sites like upwork rejects my application every day
>only have 1 month worth of money left in my bank account

what the fuck do I do

Attached: inferno.png (480x368, 175K)

he's asking for something seemingly nonsensical.
you're going to be using JS of some sort if you want functionality past displaying elements.
HTML isn't intended for that.

I'm making a basic login system just for fun. The login page is looking fine, but this "validation" page is not. It doesn't show any erros nor redirect. I'm trying to find the error or "error" but can't find it. Any idea?

What's wrong with my mutator methods? I'm going trough eloquent JS and this is an exercise.

Attached: Screenshot_2018-11-07_22-31-59.png (485x674, 55K)

You can check for name or email in the same query:

1. You're checking the "clientes" and "profissionais" tables without verifying the user ID. You should select user ID in the first query
$stmt = $conn->prepare("SELECT user_id FROM usuarios WHERE (username=:username or email=:email) and senha=:senha");

2. In the second and third queries:
$stmt = $conn->prepare("SELECT nome FROM clientes WHERE nome=:nome");
$stmt = $conn->prepare("SELECT email FROM clientes WHERE email=:email");

You can simplify this down to one query
$stmt = $conn->prepare("SELECT email FROM clientes WHERE email=:email" OR nome=:nome");

3. The following SELECT shoudn't be executed if $utype is already set (unless the same records exist in both "profissionais" and "clientes"
if($stmt->rowCount() == 1){ $utype = "client"; }
$stmt = $conn->prepare("SELECT nome FROM profissionais WHERE nome=:nome");

eligrey.com/demos/FileSaver.js/

the plus method does not return anything.
so either do log(obj.x " " + obj.y) or have plus return a {x, y} object

best of luck to you user, but here's your problem. a good writer is only going to give u his work for 3 reasons: money, exposure, or because they are banned elsewhere
>money
im sure no ones getting paid, understandable because u arent making any money, but id rather post on my own site and collect my adsense pennies
>exposure
would rather post on a 'socially accepted' hub like Medium which has a built-in audience and system for sharing/going viral
>blacklisted
you probably aren't running your own dedicated server and therefore can be shut down just as easy as any other site which has been de-platformed

The length will be outdated when it's accessed again after plus/minus methods are called, so you should probably add a getter property:

class Vec {
...
get length() {
const { x, y } = this;
return Math.sqrt(x*x+y*y);
}
}

The console.log() is showing the return value of plus & minus. The return is undefined because there's no "return" statement. You should chain on ".length" after this.

Depends on what you want your interface to look like when the browser is resized. Obviously having a huge margin on your text2 is going to look fucky when you shrink your window. You would probably want to make that a text-align: right;

Always think of the consequences of resizing when you're positioning your elements.

Browsers can't access local files directly because that's an issue of security.

I guess you could have a user upload a txt file and upload images, and then when they're done editing, provide a download of a file via a blob url.

Also, you say "add images", but what are you adding them to?

Oh shit, thank you very much user. But sadly, the pages still goes blank.

thanks guys! I fixed it.

Checked this header?

header("../index.php?utype=" . $utype);

You sure it's not the following?

header("Location: /index.php?utype=" . $utype);

How important is testing with Jest?

I'm taking a udemy course on react and I'm at the test section now and I don't understand jackshit about it, it's also like the longest and most boring section of the course.

I just don't see the use of it, when a test fails, it doesn't even mean that the thing you tested for didn't work, it just means that you fucked up the test case, so how is that useful to know? it seems redundant as fuck. Why can't I just stick to looking at the console for errors?

Hell yeah, thank you user. Saved my night!

What are some useful things you can do with classes? I don't know any JS and just use jQuery to do all my shit