/wdg/ - Web Development General

>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
youtu.be/Zftx68K-1D4 - Web Development in 2018

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

Attached: 1524949517072.png (1280x720, 180K)

Other urls found in this thread:

themeforest.net/category/site-templates/admin-templates
a.4cdn.org/' board '/thread/' thread '.json')
i.4cdn.org/' board '/' item.tim item.ext,
i.4cdn.org/' board '/' tim ext)
freelancer.com/jobs/regions/?keyword=wordpress
node.green/
gdpr-shield.io/
twitter.com/AnonBabble

First for angular5

Where's the cheapest place I can register a .moe? I'd love to get it for the novelity, but I can't justify getting a domain for $25/yr when I can get a .com for $8/yr.

most domains are like that, all the "cheap" ones are just 1 year contracts which end up with the $25/yr if you renew it after a year.

no, namesilo has .coms $6 for the 1st year and $8.50 for each year after that.

not talking about .com, .com is cheap and almost every .com is the same price when you include whois protection
It's the meme domains that you see on namecheap for $2 for a year, they try to catch you with the auto renews.

oh well too bad.

Any good validation package for Express? Also what packages should I download if I want to work with ES6 on node? The tutorials I'm reading use babel-stage-0 something but I looked for it and it's apparently deprecated.

Someone redpill me on node.js

Baka. namesilo has .moe for $13.99/yr

then just get a .com

it's not that great, don't do it

Arigato user-sama. They're not listed on nic.moe but it looks like they have them so, awesome!

Ok, well I mean I don't want to pay 3x as much for something that's technically the same but like 1.5x as much is not that bad.

So... what's the best course of action? vue? react?

Node and React/Vue are only related because they're JS. But they do completely different things...

any good hosting provider?
Just for personal websites/projects?

vultr, digitalocean, linode, pick one

github pages
unless your personal project is to set up a server from 'scratch' in that case

get the python humblebundle and use the $50 of digital ocean credit on a new account, 10 months for like $15, best deal possible

You know there are projects that actually involve backend code, right?

how's the windows cloud hosting environment these days? any recs?

Attached: 1420099814802.jpg (250x239, 13K)

What memesite is this?

/dpt/ here, I hear you guys actually work on projects

Attached: Screen Shot 2018-05-04 at 12.28.12 AM.png (2880x1748, 898K)

Learning Express, having an issue that I'm not sure how to handle.

So my server is grabbing a file from another server (that's completely out of my control) every five minutes or so. I'm grabbing this file and piping it to another file on the server that's date-stamped. All that works great.

Now my issue is, the file is technically a JSON file, just in plaintext. I'm trying to get the server to convert the plaintext into a .json file, but using JSON.parse or any of the RegEx options out there on SO tells me that there's an unexpected end to JSON input, and the server quits. If I copy this file verbatim (plaintext) into a JSON validator, it clears.

Any thoughts on what might be causing this, or what else I can try?

Reminder that you can't be taken seriously as a web developer unless you have a Macbook Pro.

Why don't you just see what is coming back after you jsonify the text and see what the error is? Obviously there's some issue to do with spacing, maybe you need to add or remove brackets etc.

I want to make a simple web interface for, say, tracking and updating my Goodreads. Preferably I want it to be in an isolated folder that I can copy paste anywhere.

What technologies should I be looking into?

I wanna build a service on a home server that will ping me via my phone when something happens; now, what method of notice would be easiest and allow me to respond to the service with "now do X"?
>Send notification to a custom built android app
>Send an email
>???

How do I turn this into es6 import?

require("./config/passport")(passport);

is it just me or does CSS seem clunky in react?
out of the box i can't get "import 'styles.css' to work.
and the other option is to just create text objects and inline for every element

import './styles.css';

Error: Couldn't find a compiler for styles.css

oh never mind figured it out.
i'm using electron-compile which makes it so i can put it directly in the html

import createPassport from './config/passport');

createPassport(passport);

Although this looks like node.js, I'd probably stick to commonJS. I think node.js doesn't support es6 modules.

I'm unsure of how exporting and importing works in javascript. I created an express app, my index.js has the const app = express() declaration, but I'm dividing my routes in various folders and files, index.js has app.use("/api", api) pointing the /api route to my main api file, I then want my api file to point to other files in turn because I don't want to clutter my main index.js file. For that I need to import the app into my api file (so I can use app.use), can I just do a export const app = express() then import it? Is there any performance or duplication issues with this or something?

Can someone tell me what the fuck these admin dashboards are for?
>themeforest.net/category/site-templates/admin-templates

What the fuck are they used for? Can I rig one up to control a one page html website without going into the code?

a course of what action? node is a javascript runtime environment while react and vue are libraries for building user interfaces

>2018
>header files
what did they mean by this? modules when?

also:
>spaces inside function calls, operator[] etc.
>no spaces after if, for, etc.
is this just for the sake of being different? I guess this is a stupid question, you're doing webshit in c++ after all

>What the fuck are they used for?
well, if look at the mockups a bit closer, you can see examples of what they can be used for there
>Can I rig one up to control a one page html website without going into the code?
these are just templates for the UI, if you want the code behind the UI to do something you have to write it yourself

I'm interested in getting a .moe domain for my portfolio, do you think prospective employers would care about it or it doesn't matter?

Can I use one of those dashboards to control a one page html website?

Is that possible? I know jack shit about coding so I'll pay someone else for it. But is that something that I can get done? Buy one of those dashboards, buy an html website template, and have a programmer rig up the dashboard so it can control certain aspects of the html site such as header text / background image / links. Just simple shit so a person wouldn't have to edit code, any changes they'd like to make to the site would be through the easy to use dashboard. Is that a CMS?

Hope you don't mind all the Q's. Thanks for your help.

sure, you can do all that. and yes, that's pretty much a cms

In your `index.js` file you'll have
const apiRouter = require('./src/routes/api')
app.use('/api', isAuthenticated, apiRouter);


But in your API router you'll want to export a router:

const express = require('express');
const router = express.Router();

const usersRouter = require('./users.js')
const postsRouter = require('./posts.js')

router.use('/users', usersRouter);
router.use('/posts', postsRouter);

module.exports = router;


Pretty much routers all the way down.

Nice. Thanks. How much do you reckon a project like that would cost?

I haven't got the slightest idea, sorry.

>tfw I don't know what to do with some code and I feel weak asking to be spoonfed the answer
Would you guys tell me off if I asked to be given the answer to my current problem?

Attached: speng.gif (500x338, 464K)

.moe is 15$ at Namecheap. Gandi is a bit more expensive.
Namesilo seems to also be 14$.
Where are you looking?
It's great.
Guess what, whichever backend you mention, people will shit on it.
muh 0.1+0.2, muh {} + []
If you like JS then just use Node. It's really nice being able to do full stack JS with everything in the same language imo.
Simplest maybe via email?
And then in the email you could include links for specific responses that tell the server what you want to be done.
>.moe domain for my portfolio
lol dont
If you have a portfolio make it .com (or .io if it's the right crowd)
or maybe your country domain if you want to stay local
People on here generally like to help others.
Post the specific code and don't just ask in broad terms.

Attached: me.gif (1126x794, 111K)

>Post the specific code and don't just ask in broad terms.
I'll post the entire code. The Node docs are very cryptic for brainlets like myself. I want to learn but it all reads like 4-dimensional chess at the moment.
const fs = require('fs');
const fetch = require('node-fetch');
const http = require('http');
const readline = require('readline');

const rl = readline.createInterface({
input: process.stdin,
output: process.stdout
});

rl.question('What board? ', (board) => {
rl.question('What thread number? ', (thread) => {
fetch('a.4cdn.org/' board '/thread/' thread '.json')
.then(res => res.json()).then(body => {
body.posts.forEach(function(item) {
if (item.tim !== undefined) {
let file = fs.createWriteStream(item.tim+item.ext);
let request = http.get('i.4cdn.org/' board '/' item.tim item.ext, (res) => {
res.pipe(file);
});
};
});
rl.close();
}).catch(() => rl.close());
});
});

The code accesses the Jow Forums JSON file of a thread and, for posts in that thread which have an image posted as well, it downloads those images to the same directory as the script itself. Or, it is intended to do so.

But at the moment it downloads the first image (the OP image) and then ends without continuing further. I assume I have to close the stream so it can open each new time(?). It also downloads the image not as an image file but as a blank file, zero bytes, nothing in it. I feel like this can take me weeks to figure out. I want to be spoonfed an answer so I can reverse-engineer it and understand each step and what it all means, since, as I said, the Node docs are extremely cryptic and hard to understand.

Please help a brainlet /wdg/. I will be eternally grateful.

Depends on what you want to do.
But the only good frameworks are Express, Koa, and other minimalist ones -- and these are horrible for 90% of websites out there (those where the backend is dominated by CRUD behavior).
The frameworks on Node that are good for most websites (e.g. Meteor) kind of suck, and things get fucking hacky quick when you want to do something beyond a simple CRUD action, and you're better off with Ruby on Rails or Django.

babel-preset-env, babel-cli, and babel-lloader should do it for ya.

Pretty close.

You could also use fetch instead of http.get though. And then pipe res.body.

const fs = require('fs');
const fetch = require('node-fetch');
const http = require('http');
const readline = require('readline');

const rl = readline.createInterface({
input: process.stdin,
output: process.stdout
});

const writeToFile = async (board, tim, ext) => {
fetch('i.4cdn.org/' board '/' tim ext)
.then(res => {
console.log('>> Writing '+tim+ext)
const dest = fs.createWriteStream('./'+tim+ext);
res.body.pipe(dest);
})
.catch(err => console.log(err))
}

rl.question('What board? ', (board) => {
rl.question('What thread number? ', (thread) => {
fetch('a.4cdn.org/' board '/thread/' thread '.json')
.then(res => res.json()).then(body => {
body.posts.forEach(function(item) {
if (item.tim !== undefined) {
writeToFile(board, item.tim, item.ext)
};
});
rl.close();
}).catch(() => rl.close());
});
});

can't immediately see whats wrong.
Here is my take on it though with Axios, which seems to work.

const fs = require('fs')
const readline = require('readline')
const axios = require("axios")

const rl = readline.createInterface({
input: process.stdin,
output: process.stdout
})

rl.question('What board? ', board => {
rl.question('What thread number? ', thread => {
axios.get('a.4cdn.org/' board '/thread/' thread '.json')
.then(threadRes => {
threadRes.data.posts.forEach(item => {
if (item.tim) {
axios({
url: 'i.4cdn.org/' board '/' item.tim item.ext,
responseType:'stream'
})
.then(imageRes => {
imageRes.data.pipe(fs.createWriteStream(item.tim+item.ext))
})
.catch(console.error)
}
})
rl.close()
})
.catch(err => {
console.error(err)
rl.close()
})
})
})


Just be aware that the Jow Forums API might easily block you if it sees that you try to simultaneously download ~50 images from a thread.
You might have to include some rate limiting there, like 1 image per second or something.

just go serverless

>If you have a portfolio make it .com (or .io if it's the right crowd)
Way to be boring user.

For you.

Thanks massively guys. I'll get looking into your code pieces now.

>Also what packages should I download if I want to work with ES6 on node? The tutorials I'm reading use babel-stage-0 something but I looked for it and it's apparently deprecated
Create-react-app will do all of that for you.
If you want to see what that is exactly (and you should, at least once) then run "npm run eject" and get the built environment and you can see what it set up for you.

If you feel fancy, make a React-native app or something that uses websockets to your home server. Use DynDNS to tie your home IP to a domain name.

The websockets can keep everything in sync and have your app reopen them from time to time if they drop out (because you went in an elevator or subway or something).

>Nice. Thanks. How much do you reckon a project like that would cost?
freelancer.com/jobs/regions/?keyword=wordpress

That should give you some ideas, obviously these are cut-rate prices because they're literal Pajeets working after hours for beer money.
I knew an actual Pajeet who did these on the bus every day commuting to/from work. He didn't make much but I guess he preferred it to reading a book or something.

none
I have no clue why the other replies mention babel and even React. React has nothing to do with this.

see node.green/ for current ES6 support

I guarantee your personal projects don't actually really need a full backend.

What do you mean by full backend? Because if you want to, say, learn anything other than frontend JS, you need some kind of execution environment for server-side code.

>>header files
I feel they help me stay organized, I can design my code as a bunch of mini-APIs where the interface is physically separate from the implementation.
>>spaces inside function calls, operator[] etc.
>>no spaces after if, for, etc.
what can I say it makes sense to me, probably because I've always used fairly small-sized, tightly-spaced fonts

joi for schema validation

>>spaces inside function calls, operator[] etc.
>>no spaces after if, for, etc.
FWIW: I do the same thing.
If/for etc are easy to identify at a glance. Expressions can get confusing though, spaces between sub-clauses and before outer parentheses makes things slightly more readable, IMO.

From previous research, I thought the app way would require Google Cloud Messaging API. I'm guessing going via websockets would require a decent chunk of low level code writing.
Turbo-retard time: is DynDNS 100% needed?

So it turns out that high-availability is just a meme

>Some chick runs full enterprise reports everyday at 12:30
>Same time everybody is coming back from lunch
>"user IT NEVER FUCKING WORKS GRGRGRGGHGH"
>Change the ajax code to silently retry on a non 200/400 code
>"WOW user you're amazing, I can't believe it actually works now"

afraid.org dns allows you to update your records via API for free. Just have your server update every 5 mins and it won't matter if your ip changes.

Not helping specifically with your problem, but doesn't that level of nesting look difficult to read to you?

Try async/await maybe

this is not what high availability means

I want to put in my notice, but I'm not sure how. I hate working there anymore. I have no clue know what I'm doing most of the time. The other junior on my team is 10x my skill level and he makes me look like dogshit. He's doing all this cool stuff for the company and I'm monkeying around trying to keep up. It's so demoralizing. Not to mention the pay is terrible (11 bucks an hour).
How do I tell my boss I want to quit?

That sounds like it's not a terrible situation. You never want to be the best person on the team. Otherwise, you'll never grow. Share your worries with your boss and ask him what you can do to better yourself.

If you want to quit, make sure you have your next job lined up before you do so. It's a lot easier to get a job when you already have one.

High availability would be making sure the service never fails to respond to valid requests for real data. Silently retrying can make the situation worse if the system isn't responding because it's too bogged down. You might end up hammering the service with a shit ton of failed requests and slowing it down for yourself and everyone else.

Sounds like your solution works in this case though, so good on you for getting the job done.

That solution is just a stop-gap.
As a longer term solution, he should probably implement a queue.
But to be fair, high reliability usually expresses itself as "something crashed so just restart that automatically and keep retrying until it responds again."

>silently retry on a non 200/400 code
so, 300s too?

wtf

how do you even know about this

>New Users Only
Motherfucker.

Learning state management in Angular.

Let say I have NumbersState that has an array of numbers.

I currently have an action that gets me all the numbers.

I need to get a single number in the array. Do I create an action for getting a single number, or can I just get all the number and use filter/map/whatever to get the number?

>has number[] from state
>wants to get the number where it will match x

currently have something like this, but it doesn't work.

this.number$ = this.numbers$
.map(numbers => numbers === this.x)

Just to add, I want an observable single number from the array.

trigger warning: php
I need to be like

if(form class is x && $_SERVER["REQUEST_METHOD"] == "POST"){
#do thing
}


i have multiple forms on the page and one of them has action=" so i need to be specific on the if statement. I feel like this is easy as fuck but im hungover can anyone help me

Attached: 1512099476466.jpg (436x413, 38K)

"[1, 2 , 3].find((val) => val === 3)" is what you're looking for. ES6 maps return arrays.

Maps take in a function, that function is called for every item in the array, the function returns something based on every item, and the map function itself returns a combined array of every single return.

Are you trying to add an identifier to the form?
Usually, we use hidden inputs in PHP. Add a hidden input to the form with the identifier you want to pass.
It's sort of better to use the route URL to do the same thing but whatever works.

Another thing, instead of using you can use a shorthand way:

>11$/h
where are you from?

Or just use your student email and get DO credits from github's student pack. LOL
Also careful with DO's pricing!

>careful with DO's pricing
what about it?

Just getting into webdev, is it fine to only use express and sqlite3 for a smaller site serving a few hundred users a day? Will I really gain a lot from adding more shit like nginx, redis etc?

Just keep an eye out, make sure you go through proper procedures to shut things down and what not. Since a lot of beginners use it, they seem to gloss over a lot of little things and months later when they think they've turned off a droplet, they're still being charged for it.

you may use nginx and redis for a site that has 2 users a day and sqlite for one that has 2000.
It's not a matter of scale, but what fits the job.

And express/nginx aren't really interchangeable like that.

I don't mean interchanging, but rather using nginx for serving static content in conjunction with everything dynamic handled by express. Right now I'm doing both with express, so I'm just wondering when it makes sense to upgrade. This is a small community site that probably won't see more than a few dozen views a day at best.

You could use a text API service. It would use that to send you a SMS message and then you can reply. The API would send to your web service your replied message.

Personally I would always put nginx in front. Even if you don't use it to serve content, but just forward everything upstream to the Node server.

Super easy to handle SSL with certbot that way and do any logging or rate limiting.
Also comes in handy, when you have more than one site or app-backend running on the same server, that can all sit behind nginx and have their routing handled that way.

Thanks, I'll look into it.

>gdpr-shield.io/

>Block EU users from accessing your site

How do they do it, with a line of JS? by IP?

Isn't that stupid?

Attached: test.png (628x402, 41K)

Nobody cares about EU users anyways so it's fine.

>Nobody cares about EU users
Wrong.

>t. EU user
literally barely even human

>t. Amerimutt
literally barely even sub-human

>amerimutt
Try again sweetiekins!
>unoriginal too
KEK EU scum really struggling

>not Amerimutt
>not EU

Then you're irrelevant, sweetie.

GDPR is such a retarded piece of shit and it's never going to go away.
Because EU bureaucrats have to justify their existence with useless shit like that.

It's not making anything more secure.

Yeah, thanks for saving me from those evil cookies you EU fucks.
I sure enjoy those huge ass banners on every single fucking page explaining to me for the 500th time what cookies are, even though I could already disable them in literally every modern browser if I really wanted to.

module.exports = {
key: "key",
key2: "key2"
};


How do I convert this to a es6 export?