/wdg/ - Web Development General

Next.js edition

Previous:

>Free beginner resources to get started
Get a good understanding of HTML, CSS and JavaScript.
developer.mozilla.org/en-US/docs/Learn - a good introduction (independent of your browser choice)
freecodecamp.com
codecademy.com
hackr.io

>Further resources
developer.mozilla.org/en-US/docs/Web - excellent documentation for HTML, CSS & JS
github.com/kamranahmedse/developer-roadmap - Frontend+Backend learner-path suggestions
youtube.com/watch?v=Zftx68K-1D4&feature=youtu.be

jsfiddle.net - Use this and post a link, if you need help with your HTML/CSS/JS

Attached: 1517776379762.png (1217x1015, 708K)

Other urls found in this thread:

stackoverflow.com/a/35552420/166612
stackoverflow.com/jobs
angel.co/jobs
remoteok.io/
codeburst.io/an-introduction-to-web-scraping-with-node-js-1045b55c63f7
medium.com/@jgefroh/a-guide-to-using-nginx-for-static-websites-d96a9d034940
ex-parrot.com/pdw/Mail-RFC822-Address.html
twitter.com/SFWRedditImages

I built a golang webapp and ended up caching tons of DB data internally. Am I supposed to be doing this or is this what memcached is for?

How do I make my webapp "scale"?

What frameworks/languages are available for back end workers, like sending emails or thumbnailing photos? Things that I don't want to be part of the request handler.

Also, how do I transfer data to it? Database table? Redis? Some kind of message passing solution?

Help a lost user out

I'm gonna try and fit an image into the header image of a wordpress that is using the theme Jarvis. How fucked am I?

Attached: 1532460333599[1].gif (516x250, 530K)

Gatsby l react-static > Next.js

Change my mind

Don't do this if you can avoid it
var number = 10;
function addOne() {
number += 1;
}

addOne();
console.log(number); // 11


function addOne(number) {
return number + 1;
}

console.log(addOne(10)); // 11


You can shorten this down by using an arrow function expression. If it doesn't include curly braces after the "=>", it is the return value.

const addOne = (number) => number + 1;
console.log(addOne(91)); // 92

I mean the last two you should do, just not the first one.

Depends if the data is cached on the client or server. Any data that takes long to query from a DB should be in memcached or a redis store. Other DB data that is often constant and used by all clients should on the client without having the client request for the data.

How about an example where it isn't retardedly used? I feel like arrow functions are a meme.

>been doing freelance stuff since January of last year
>fell into deep depression the last six months, haven't done any work
>been working more hours at shitty wage slave job to pay rent
>go to do some side projects and can barely remember anything
What's the point anyway?

Attached: visible_disappointment.jpg (960x658, 56K)

Is full stack javascript a meme?
A sort of big company had a small 14 week course in my uni. Short story long, the course was epic. I was getting into web development lately, did some mocking around PHP, and mostly Java backend.

The 3 lecturer (2 backend, 1 frontend) did some amazing work in node and react. From as little as using let, and const instead of var to the structural build up of the code. (Thank god I took notes, and screens.)

I really would like to work there, but I feel all the content I can find is rubbish compared to their levels.
Downloaded ions of udemy and lynda tut videos, but those are rubbish. Read latest book about nodejs I could find, but i felt it was just scratching the surface. (Web Development with Node and Express (just realised this shit is 4 years old))

Any suggestions? I got the basics, but would like to watch, read something fresh

maybe one of you knows - is there a way to select multiple tabs in chrome without entering them? Whenever I select them with ctrl+click I go to that tab and I don't want that

No it is not wtf

80% of the current jobs are with React/Angular/Vue.js/etc. all JavaScript-based.

Don't listen to the Jow Forums "devs" they know jackshit.

I just got a new contract today, once again Angular.JS with a Node.js REST API to build.

This is where the money is, stop fucking around Java as a backend!

PHP is pretty good too nowadays with Laravel/Symfony/Composer but JS is where it's at for both backend AND frontend right now.

How would I do this? I wrote a single page app using basic JS,HTML and CSS that calculates some values according to what the user inputs. I want to move the number processing server side to hide all the calculations.

From what I understand I would have to send all user input as JSON but where do the calculations happen? Can I copy paste my calculations code from the single page app?

Attached: dumdum.png (645x729, 50K)

setTimeout(() => {
this.setState({
ratingVisible: false,
});
}, 5000);


vs.

const self = this;
setTimeout(function() {
self.setState({
ratingVisible: false,
});
}, 5000);

render() {
const positiveComments = comments.filter(comment => comment.upvotes > 0);
return positiveComments.map(comment => (

))
}


vs.

render() {
const positiveComments = comments.filter(function(comment) { return comment.upvotes > 0 });
return positiveComments.map(function(comment) {
return (

)
)
}

The data set is stored in the golang app (serverside), not a redis store. The app reads the SQL DB every minute to regenerate it's caches on a background thread.

Isn't this technically faster caching than memcached? What would be the purpose of adding memcached in between the webapp and DB at this point?

There is no real client-side, the intent is to produce javascript-optional HTML.

You'll need a Wojak with a tinier brain.

Server isn't just a machine to redirect your requests, there's plenty of code for validation, authentication, communication with the DB, HTML pre-renderization, error handling.
Yes, you can paste your code in the server, as long as your server runs in JavaScript.

Bundle everything within an object:

`var o = { input1: "", input2: "", input3: "" }`

and use `JSON.stringify(o)` to convert it to JSON.

Use XMLHttpRequest (XHR) to transfer the user input object to the server.

Use Node.js (using express.js will make it quicker) to make a server-side API.

Use that API with your static page. Convert the returned JSON to an object with `JSON.parse()`

Use the data like you did when it was all static.

PROFIT.

Stop bashing like an asshole.

Yes he can paste the calculations.

`(x - y) * z / 100`

will still parse in any fucking language you tinier brain faggot

One new tripfag to the filter.

drop the trip fucking retard

Don't tell Bob what to do.

Thanks senpai. Learning everything as I go along and this is really helpful.

Attached: 4qkQKVC_d.jpg (640x449, 21K)

It isn't vertically centering correctly. What am I doing wrong?
.middle-box{
position: absolute;
margin: auto;
border-style: solid;
left: 400px;
right: 400px;
top: 150px;
bottom: 150px;
border-color: #CCC5C5;
background-color: #CCC5C5;
}

Attached: they are.jpg (1586x871, 32K)

Glad I could help, keep it up!

Attached: 1485833185413.jpg (3816x3592, 1.21M)

FOR THE 50TH TIME:

LEARN FLEX BOX AND CSS GRID

You also may want to look in to "fetch" in place of XmlHttpRequest for a simpler API. It's supported in most modern browsers nowadays

All the guides said I didn't necessarily need it.
Will flex box guarantee?

I agree! I did not start using it yet. I'll try to remember next time I have to make a request.

The API looks clean and there's some pretty cool advantages.

stackoverflow.com/a/35552420/166612

anybody else just winging it? I learn a little there, a little here, but mostly I'm bumbling around. I don't make much either (38k) so I'm not exactly feeling too terrible.

Former NEETS who have successfully broke out through freelance, how did you do it? What kind of projects did you showcase? Did you market yourself as an agency/studio or an individual?

LOL that's how I started my whole career 10+ years ago. Everybody does this most of the time, tech is going so fucking fast, nobody knows all the things all the time except for some crazy university scientist mother fucker

How old are you and how much do you earn?

Wait, wrong code.
I meant the text isn't vertically centering correctly.
h1{
color: #F1F1F1;
font-family: DejaVu Sans, Book;
position: absolute;
text-align: center;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}

What me do wrong?

If by money you mean basic codemonkey pay for CRUD shit, then yes, by all means go fullstack JS and compete with bootcamp grads


Webshits are so delusional. Java is king for any serious distributed system architecture

I've been programming for a year with babby C++ and Python but lately the web pill has been tempting me.

I just need to be sure of one thing: will Javascript allow me to make any web page my bitch? Like can I use it to easily make scrapers that run right in my browser, or silly things like clicking every button in a page?
Automating things right in my browser is what appeals to me.

I used to work in boring offices, underpaid since I live in a non huge city.

Some day I learnt that my employer was charging 115$/hour for what I was working on and gave me 15$/hour. That pissed me off so much that I did everything I could to make a shitty job and got fired a few months down the line.

Right there I was convinced of one thing: I want to be the one who's charging 115$/hour.

So I started on shitty websites like E-Lance, Freelancer, oDesk, etc. I marketed myself as a single freelancer. Started at 30$/hour, got a few cool clients, a few from other countries which got interesting since that gave me lots of knowledge about different cultures and helped me reaching new clients next.

I never once made more money here LOCALLY than I ever did REMOTELY. So keep that in mind. Hunt for what's paying at the moment, learn it, build a project with it to help show how good of a programmer you are (because yes you gotta be somewhat good at this) and then people will email you non-stop. Then you can showcase the projects you worked on when you reach for new clients.

Once good enough and with enough achievements to brag about: hunt for the startup world. That's where you'll dig up the real money.

I'm still freelancing after ~6 years, alone in my apartment office. Which is kind of boring but the money I make and the freedom I have makes me laugh at my friends who hustle like crazy to get minimum salary.

I'm 30 years old and in a good year I can make around 125k USD$ and in a shitty year I can make 40k USD$. It really all depends to how I feel in the end. If I have a great life and lots of energy I hunt for bigger challenges and make even more. A few years ago my father died which slowed me the fuck down but I'm back on track and working for a Colorado based startup atm that pays real good.

I highly suggest people to learn how to manage their lives, manage themselves, manage a business and clients and most importantly learn FINANCES.

You definitively don't work in the industry nor know what you're saying.

Java is an old bunch of shit. Nobody cares for it anymore, everybody hates the shit out of it.

I see 10 times more C#/VB.NET projects than Java ones.

- stackoverflow.com/jobs
- angel.co/jobs
- remoteok.io/

Suck a dick.

NodeJS?

Python is pretty cool desu
Keep using it, it's fucking awesome for web crawling / scraping.

Yes it's totally feasible with Node.js for example but I'd keep using python for that since it's so efficient.

I'd build a web interface around a python-backed script if I had to do a web scraper.

Stick with one framework for you projects. Make things harder for yourself and try to optimize, write unit tests, etc. You will start to remember. As long as you remember the general scaffold and setup for a project, you are fine. Stackoverflow will guide you to victory

fucken nice

Love reading success stories from people.

>started from the bottom now we here

Attached: 1512844661576.jpg (3840x2400, 561K)

I already did a bunch of web crawling with python but for interacting with the javascript parts of a web page I have to literally run a browser through Python (using Selenium) so might as well learn Javascript and do it through my browser.
That way I'd also have the comfiness of not having to worry about headers and cookies to give with the request.

I disagree. JS is can make for a decent backend depending on the situation. I've been using C# for a while and enjoy how easy it can be to work with. It depends on the industry, but mine calls for a lot of .NET backends

>Java is an old bunch of shit. Nobody cares for it anymore,
Wrong.

Just because you see React/Vue/whatever only, it doesn't mean it is the norm.

Go enterprise, and suddenly it's all Java, C++, etc

Node JS is fucking disgusting. Stick with PHP. It's not 2009 anymore, you can use PHP now.

Help me guys. I am working with book Configuring Full-Stack with Node.js, Express.js, MongoDB, Mongoose, Falcor, and Redux. Now i should start server to see my work but there is weird server

node server/index.js
internal/modules/cjs/loader.js:583
throw err;
^

Error: Cannot find module '/home/nedlo/fullst_react/server/server/index.js'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
at Function.Module._load (internal/modules/cjs/loader.js:507:25)
at Function.Module.runMain (internal/modules/cjs/loader.js:742:12)
at startup (internal/bootstrap/node.js:236:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:560:3)


Its probably because versions of dependencies are not the same as in book?

*weird error

Kek, you got no clue. Java is in demand where performance and maintainability is in demand. Go and try to work for banks, fintech and big corps with your node.js skills in the backend lmao.

Node.js doesn't scale, JS doesn't scale.

>Node.js doesn't scale,
>what is vert.x

In this case I agree using CheerioJS would be fucking awesome. See: codeburst.io/an-introduction-to-web-scraping-with-node-js-1045b55c63f7

I'm talking about the market NOW, especially the start up market (see my earlier posts).

Enterprise-wise, then I agree it's all Java/C++/.NET/C/ASM.

About performance: most of netflix, linkedin, trello, uber, paypal, medium, ebay and more now runs with Node.js backed solutions. That's convincing enough IMO. Even fucking Microsoft of all business is pushing Node.js everywhere.

Welcome to 2018 and suck a dick!

Glad you liked the story user! It's not all shit and giggles though. Sometimes I do dumb moves, but it's all about learning in the end. I never regretted going freelance.

Really activated my almonds there, webshit. Your brain is rotten, your skills are nonexistent and all you will ever do is be a data monkey plumber.

Attached: delusionalwebshits.jpg (363x585, 35K)

The better version of node.js, written in Java

There's nothing weird about that, your server just isn't finding the index.js file.
I'm pretty sure you have to write those paths as if you're accessing them from your starting JS server file, so if your text editor gave you a hint while you were writting a path from another file, it may be wrong.

>this small example proves the rule

lmao

Node.js is only used in these companies to display the frontend to users, not to do any heavy lifting whatsoever.

Go and try to run an optimization algorithm or message queue infrastructure in node lmao

What's your point? You're confirming what I just told. There's way fucking more JS jobs then C# or Java or whatever else dumb fuck.

I wasn't specifying JavaScript in that post because it was so fucking OBVIOUS.

See

For every company you named theres 10 bigger/more important ones that use Java/C++

Ah, so you are a pajeet that has no clue what number is bigger. Let me guess, you also struggle with linear algebra?

>webshit that doesn't know what a sample size is

Attached: dont build your career on dpt aka cs undergrad general.jpg (1872x3650, 1.81M)

>been studying for 8 months
>got an interview for a job
>they said my shitty liberal arts degree didn't matter and i showed more willingness to learn than the other interviewees
>got da job
I-I made it bros, all thanks to you guys telling me I was shit and to not give up. Thanks for the 50k starting gangerino, I love you all.

Anyone know if you can add Javascript to an embedded Google Calendar iframe. Want to add a custom onclick event. Any better approaches?

Is Spring still a good backend framework?

the point? PHP devs use $ for vars because they make no cash?

I find it funny that I make the same salary doing JS than somebody who's messing with C++ pulling his hair out.

Call me pajeet all you want, I'll keep cashing up the checks.

You know what's the thing about "new" techs? They're new and not widely used yet, that's why they're used in START UPS. Check again in 10 years when every fucking thing is javascript driven.

Congrats user! Willingness is all you need, employers just want people who WANTS to work and learn. Keep it up, now you gotta learn and deliver.

Thank you now there is another problem. Here is server.js code:

import http from 'http';
import express from 'express';
import cors from 'cors';
import bodyParser from 'body-parser';
import mongoose from 'mongoose';
mongoose.connect('mongodb://localhost/local');


const articleSchema = {
articleTitle:String,
articleContent:String
};

const Article = mongoose.model('Article', articleSchema, 'articles');
const app = express();
app.server = http.createServer(app);

// CORS - 3rd party middleware
app.use(cors());
// This is required by falcor-express middleware to work correctly

//with falcor-browser
app.use(bodyParser.json({extended: false}));
app.use(express.static('dist'));
app.get('/', (req, res) => {
Article.find( (err, articlesDocs) => {
const ourArticles = articlesDocs.map((articleItem) => {
return `${articleItem.articleTitle}
${articleItem.articleCon tent}`;
}).join('');

res.send(`Publishing App Initial Application!
${ourArticles}`);
});
});
app.server.listen(process.env.PORT || 3000);
console.log(`Started on port ${app.server.address().port}`);
export default app;

Here is error code:

node index.js
/home/nedlo/fullst_react/node_modules/babel-register/node_modules/babel-core/lib/transformation/file/index.js:558
throw err;
^

SyntaxError: /home/nedlo/fullst_react/server/server.js: Unexpected token (29:13)
27 | Article.find( (err, articlesDocs) => {
28 | const ourArticles = articlesDocs.map((articleItem) => {
> 29 | return `${articleItem.articleTitle}
| ^
30 | ${articleItem.articleCon tent}`;
31 | }).join('');
32 |
at Parser.pp$5.raise (/home/nedlo/fullst_react/node_modules/babylon/lib/index.js:4454:13)
at Parser.pp.unexpected (/home/nedlo/fullst_react/node_modules/babylon/lib/index.js:1761:8)
at Parser.pp$3.parseExprAtom (/home/nedlo/fullst_react/node_modules/babylon/lib/index.js:3750:12)
at Parser.parseExprAtom (/home/nedlo/fullst_react/node_modules/babylon/lib/index.js:7238:22)
at Parser.pp$3.parseExprSubscripts (/home/nedlo/fullst_react/node_modules/babylon/lib/index.js:3494:19)
at Parser.pp$3.parseMaybeUnary (/home/nedlo/fullst_react/node_modules/babylon/lib/index.js:3474:19)
at Parser.pp$3.parseExprOps (/home/nedlo/fullst_react/node_modules/babylon/lib/index.js:3404:19)
at Parser.pp$3.parseMaybeConditional (/home/nedlo/fullst_react/node_modules/babylon/lib/index.js:3381:19)
at Parser.pp$3.parseMaybeAssign (/home/nedlo/fullst_react/node_modules/babylon/lib/index.js:3344:19)
at Parser.parseMaybeAssign (/home/nedlo/fullst_react/node_modules/babylon/lib/index.js:6474:20)

where the fuck do you live?
Cause I've seen more jobs asking for C#/Java Developers than PHP/JS meme framework developers

>python is so efficient

You really are the most idiotic person in this thread. Everything you post reeks of being substandard.

>node.js
>new

Jabbascript is popular at startups because JS devs are cheap and ubiquituos, you can hire low skill bootcamp grads to get the prototype of your product to market fast. As soon as the startup has grown the webshits get kicked out and the real boys move in to fix the architecture.
t. Java/C++ consultant who's done this dance for the last 5 years and bills 400$/h

It's ok. Too bloated desu, vert.x is better. It's ok if you want something that just werks

>SyntaxError
>articleItem.articleCon tent
Read the error message. Also
const articleSchema = {
articleTitle:String,
articleContent:String
};

Are you passing the String constructor here? Are you sure that's how supposed to work?

Front End dev here.

Fuck you all of you other Front End devs who think you're hot shit with all your JS, who can't write actually good HTML and CSS too. Like holy fuck there are a lot of you!
I feel like i'm the only fucking one on this planet sometimes who actually understands CSS. God fucking damn.
Also if you think you don't need design skills in front end, then you're god damn retardedly delusional. Have fun being pajeet-tier without even knowing it.

/endrant sorry guys long day.

Attached: 1516858327586.jpg (474x473, 12K)

>don't need design skills in front end
literally what
cringe roleplay responses

How do you allow the users to highlight and move through the entire string?
Im using text-overflow but it doesnt let you move throughout the string

Attached: 123.png (666x215, 12K)

front end is for brainlets and you don't even know Haskell

there's alot of front end devs out there who either aren't interested in or don't care to learn any web/ui design skills, and thus either have to A: rely on bootstrap css, or B: code websites and UIs that are incredibly ugly or sloppy at best, visually.

How center text inside a div in CSS?

How the FUCK do I create an SQL database? Do I always have to pay someone like Microsoft or MySQL to make a .dbo file?

Attached: 1524610998659.jpg (1209x1116, 377K)

Wait, can I just create a file with a .dbo extension and use Node-SQLite to write to it?

they really call themselves front end devs? i expect back end devs to pull that shit, full stack too, but really front end devs? jesus christ what hellhole are you working at?

Attached: 1423923646210.png (252x256, 3K)

I'm serious.
I don't mean horizontally, I mean vertically. Should've clarified.

Use Photoshop

To add to this, I could turn it into an input element which would give me the desired behavior, but this would be very bad form I think.

This seems simple but I can't see any combo of overflow / text-overflow that would work.

Attached: gt435h35.jpg (1000x1000, 63K)

help guise. yesterday I was using webpack v3x and everything works ok. today I decided to upgrade to version 4x and now I'm fucking stuck on extracting the css file.

The sass-loader,css-loader,style-loader all works ok. But when I included the"mini-css-extract-plugin" I keep getting
Cannot read property 'thisCompilation' of undefined

here is my minimal webpack config:
const path = require('path');
const webpack = require('webpack');

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
context: path.resolve(__dirname, './src'),
entry: ['./index.js'],
output: {
path: path.resolve(__dirname, './dist'),
publicPath: "dist/",
filename: '[name].bundle.js',
chunkFilename: '[id].chunk.js'
},
module: {
rules: [{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,

"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS
]
}, ]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
],
};


To those who made the extract css to work could anyone pls share their webpack config.
This is the only bullshit preventing me from getting productive already

I'm just gonna disguise an input as a div and call it a day, I think that's the best solution.

An intern at my company just updated my react component. He added a prop. He added a componentDidUpdate to check whether that prop has updated and set a state variable to a COPY of it. Then he calls that variable in render() as this.state.-variable- when I have neatly dereferenced prop and state at the top

> mfw

Attached: 1487834875294.jpg (722x349, 46K)

Wat? Just connect to the server and create it. Yoy don't need to manually create any files.

Update npm, remove node_modules and run nom install again. Or use yarn. You haven't installed all required packages due to bug in package resolution.

How should I go about learning backend in Haskell?

web dev needs to be easy like the TV so folks in the community can get good jobs

Is it legal to use wfuzz to scan a website to find all directories?

hello web devs, c/c++ dev here who has never made any web stuff

i have a vps i want to use to stream audiobooks to my browser

is there anything out there that i can setup for that

if not can someone point me in the direction of what to use to make that (i know js and html/css so no tutorial pls)

thanks! :0

Attached: 1200px-Mindcontrol.jpg (1200x800, 94K)

What format?

I'm guessing not mp3?

Top 50%
Transform translatey(-50%)

most of them are mp3

Attached: dancingbaby.gif (220x200, 223K)

Literally just setup up ngnix and then cd into var/www/ (whever the root actually is I forgot) make a dir called media and dump your books there.

then when you visit http:myip/media/filename.mp3 you should be streaming the audio file medium.com/@jgefroh/a-guide-to-using-nginx-for-static-websites-d96a9d034940

So how much web dev do I need to know to land a job? I'm a 3rd year uni fuck up who doesnt want to go back, I just want a regular job in web dev, I've built a CRUD app in django that's deployed on my VPS and get basic CSS and flexbox. Should I just built a react app or 2 and start applying? am I fucked? is the only way to get a job to go back and finish school?

should i use this for email verification or is there a smarter way? ex-parrot.com/pdw/Mail-RFC822-Address.html

why would you use webpack when everyone on this planet uses npm

Any CSS guru here?

How do I center this shit in discord chat area?

I tried vertical-align but no dice. This is not padding or margin - there is 5px padding on whole group element on top and bottom and 0.2em margin-bottom under each message line t space them out but this is not what makes the chat lines to be at the top position here.

Attached: 1506907551237.png (1570x320, 56K)