/wdg/ - Web Development General

Post pictures I can edit for future thread OPs edition.
Previous thread: >COMPLETE BEGINNERS GUIDE
github.com/kamranahmedse/developer-roadmap

>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.org
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-1D4x

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

>PHP resources
pastebin.com/gfBPg24A

Attached: wdg_monitor_arch.jpg (500x375, 41K)

Other urls found in this thread:

gist.github.com/wojteklu/73c6914cc446146b8b533c0988cf8d29
getexpressive.org/
facebook.github.io/react-360/
github.com/j416dy/2ch
github.com/rollup/rollup
jsfiddle.net/wvj09sap/
developer.mozilla.org/en-US/docs/Web/CSS/cursor
twitter.com/NSFWRedditGif

So I've been checking out Dart. (I'm learning it for mobile dev with Flutter and not for web dev, but whatever.)

It's a shame it didn't catch on. It's a pretty cool language that's sort of based on JavaScript, but with the bad parts removed and the good parts enhanced. Plus you can use it for full stack web dev, since you can run a Dart VM for your server, and compile to JS for your frontend. I haven't tried it, but that seems to be a big part of why Dart was originally created, so I have to imagine they have a decent story for doing that.

Sup /wdg/. I'm comfortable with both backend and front-end JS stuff, but making things look pretty has never been my strong suit.

Are there any good tutorials/courses out there that focus solely on the UI and CSS side of front end dev?

Attached: runescape-desert-lizard-57c3adb1644ae.png (560x396, 197K)

I'm I using too many comments? Trying to keep the code well documented.

What do you guys think?

Attached: code.png (1638x1079, 167K)

That fucking font is horrendous. WHY?!
>I'm I using too many comments?
Yes, you noob.

If you had to work on this project that I'm building would you be able to follow along with less comments, at the same rate as someone who has these comments?

Also this is a pretty popular font, and I like it so that's all that matters.

Yes.
Lines like new Client and allClients.push(client) explain themselves. You're just adding comment noise between them.
Explain things that might not be obvious so that they explain something important. The goal is to help a person reading the code, to clear up the possible confusion about the overarching architecture or just explain why you wrote something in a weird way when you might not be able to tell why at first glance.

>If you had to work on this project that I'm building would you be able to follow along with less comments, at the same rate as someone who has these comments?
>setState()
>// set state
Kek. Yes, dude.

>Also this is a pretty popular font
That's the only reason you're using it. It's fucking disgusting.

I like it because of the cursive bits. What don't you like about it? What font do you use?

Okay other than that part of the code, I think that a comment is better than no comment at all. That way another dev can just read the comment and not have to follow the code all the way down.

Is this still too much?

Attached: code2.png (1637x1079, 154K)

(i'm not that user)

>a comment is better than no comment at all
No. First of all it would be useless noise most of the time, you'd be massively devaluing actual comments.

But more importantly, what happens when you (or someone else) change the code under one of those comments? There's so many of them that the chance they'll forget to update the useless comment is high enough to consider how much you would be confusing the person reading the out-of-date comments.
That's like writing some lines of code twice but comments don't get tested for correctness so you end up with either the comment having a bug or what's under the comment having a bug. Twice the bugs!

>I like it because of the cursive bits
I actually hate it for that same reason, but it's all personal preference.

your code should have no comments. only in situations where what you're doing is really weird should it be explained.

e.g "they're in the array set them back to searching
is already documented in the line:
inArray[0].setState('searching')

that's why you named the variables "array" and "searching" to describe what you're doing. all you're doing is repeating yourself and cluttering up the document.

if someone gets to your code and really says "i don't know what that is doing", they need to take a js tutorial or google the function they don't understand.

google web design & UI/UX tutorials, courses, articles, lectures

I see your point that's true. I'm going to start using less/only when they're absolutely needed. Like said.

Font is pretty disgusting.
And regarding comments, as said, if lines are self-explanatory, like
setState('in-game);

They don't need comments. Actually the opposite, comments cause unnecessary clutter in those cases.

This is better.

>your code should have no comments. only in situations where what you're doing is really weird should it be explained.
This is wrong

Code should be as self-explanatory and readable in English, as possible, but it's still good to comment even in cases when the stuff you write isn't "really weird".

>if someone gets to your code and really says "i don't know what that is doing", they need to take a js tutorial or google the function they don't understand.
Nah, the code should be readable to a beginner.
If you take a break from this project and/or coding in general for a year, you won't remember shit. But with readable code you can almost instantly jump back to dev.
It would be retarded to assume everyone who doesn't understand uncommented code just has to read tutorials.

Do you think that these two comments are justified?

Attached: code3.png (1636x1079, 144K)

Is now not enough comments?

Reading your code without knowing what you're making, it's unclear what the variable "inArray" is. I'd use a more descriptive name, so you don't need to add a comment.

I, personally, like to add comments before >5 line loops, describing shortly what the loop does. And if the code inside the loop isn't self-explanatory, I'll add comments before unclear lines inside the loop as well.
That way, anyone reading the code instantly knows if the contents of the loop are relevant, or if they can be skipped over when looking for something specific in the code.

And if an if-statement has more than one condition, I like to add a comment before it explaining the checked thing in plain English.

The current 2 comments are fine.
I'd also add a comment explaining the last 3 lines, with the socket.emit and such.

>using google
shame on you
>using google vaporware
lmao@uu

absolutely not, you are just repeating the code (btw it looks verbose af)
imo the only valid place for comments are regexes ymmv
gist.github.com/wojteklu/73c6914cc446146b8b533c0988cf8d29

>inb4
obviously you should document APIs

>If you take a break from this project and/or coding in general for a year, you won't remember shit.
People always say this, but I can look at projects I wrote 6 years ago and know exactly what everything is doing(99% of the time).

Can people really not read their own code after just a year?

>it's unclear what the variable "inArray" is.
Not him, but are you illiterate? It clearly says allConnectedClients, which is being filtered. I looks like he's building a chat application with socket.io, you fucking pleb.

>adding comments
maintaining those are a pita, chances your coworkers will miss those when refactoring or just shitting into the middle of the codebase

>And if an if-statement has more than one condition, I like to add a comment before it explaining the checked thing in plain English.

why not express it as part of the test suit?

>their own code

bold assumption. Good for you if you work solo but most non trivial projects are teamwork

>If you take a break from this project and/or coding in general for a year, you won't remember shit.
You were telling him he wouldn't remember his own project, you fucking retard. Projecting I only work alone, lel. Go build a calculator faggot

this is a good post, I try to follow the same convention

>his own project

never implied, not even the gender. Still, the point of concise code is to help reducing mental overhead for anyone reading it, including the author. Fretting about who can remember what is missing the point entirely.

>suggesting PHP when Go exists

Attached: download.png (1634x2224, 111K)

lol no generics

dude ive been working with html css and a bit of js for 8 months now. i was reading the complete begginers guide roadmap, and i could not say this enough : some big companies still are working 80% of their machines with IE. And its fucking nuts preparing yourself for the market not knowing flex and grid will not work on IE, and also : learn how to properly test your shit on all fucking mediums. once i wrote a nice js, and then i realized it would never work on IE 11. jquery and babel are your friends.

Yeah, if any of your clients use IE as their main browsers, you have to provide support for it. No big deal, more like a minor annoyance. The real problem is making the whole site consistent throughout all the major browsers. Thanks to Steve Jobs, now we have to provide support for mobile too.

>some big companies still are working 80% of their machines with IE

do you want retards for users?

dumb Q but what are you supposed to do when somebody uploads a file with a special character that windows clients can't handle? '?!#' for example

What's your preferred approach to git commits, itty-bitty commits multiple times per hour or one huge commit at the end of the working day

lol

Supposedly, one feature per commit, one fix per commit. Since I am the only guy handling the whole front end currently, one huge commit by the end of working hours. Plan to stop doing this once the whole system go live.

don't use windows clients

you do not want anyone customize their filename on your system anyway.
save the filename in a database and give the file itself a unique ID when you save it.

When someone is downloading it again set the filename manually from the database.

grabb a web template one of those with everything styled, use that for the looks

for the technology to use I'm not the one to give you advice, sorry

grabb a template and see what they are doing with it that makes it look cool, you'll learn some tricks that way

Here to answer php related questions

i love go, but i wouldn't replace php with it ~ no reason to

Any suggestion for a simple framework to make an API?
PHP doesn't seem to have controller classes like ASP.NET has.

Need to make a simple site for a relative and haven't touched PHP in 20 years and that's the only thing their server supports.
Basically a few methods that take json serialized content and return some objects as json.

Looked into Laravel, but that seems rather overkill and I don't want to waste time trying to figure out how to make my own.

Zend Expressive all the way.
if you are using linux, you can also use swoole with expressive to get a better performance.
getexpressive.org/

Looks good, will try it out, thanks.

what happens if I pull one out?

It will be very painful

Is it possible to grab an address' neighbourhood name at all from google/JS?

Is this in their API?

Something like if the address is from Queens, NY then output "Queens".

Attached: maxresdefault.jpg (1280x720, 65K)

check their api docs?

Looking for some tool recommendations as a JS / Node developer. Would love you guys to help me out.

I would like to hear opinions on:

>an alternative to Webpack as a module bundler
>the best linting tool / JS code standard
>the best CSS preprocessor, something you use and enjoy, which has more to offer than just using vanilla CSS (note that 'variables' are not a selling point anymore and haven't been for a while now)
>anything at all which works alongside Git, like a tool which enforces a standard for commit messages, anything at all which you feel makes using Git more easy and fun

And fuck it, let's just have your VS Code extension recommendations as well. I'm making this post cos I'm at a point now where I feel completely adept in the essentials of JavaScript, both vanilla and with Node and its ecosystem, and I would like to find and settle into the comfiest workflow of all time. Gonna take some weeks to learn TypeScript and other tools, that sort of thing.

marvels of Rome engeneering

also use that as Arch theme next time

A small question.
Everything seemed to be ok but then I noticed that there is more size on the left side of the navigation than the right side even when I have it set to
ul {
list-style-type: none;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
flex: 0 1 100%;
margin: 0 0 0 0;
}
What am I doing wrong ?
Also how do you get rid of the jiggle that stays in mobile view ? I just can't seem to get rid of it.

Attached: left side space.jpg (1263x118, 56K)

And here is how it is when centered instead of space-around.

Attached: when the navigation is centered.jpg (1309x167, 79K)

I think I've fixed it after some fiddling around.
added margin-left: -50px; to the ul tag.

Attached: fixed I think.jpg (1277x190, 86K)

Does anyone actually want to try building something to just see how much money we can make really quickly?

Like, if we could build something fast as fuck and make a few grand each, it'd be stupid not to do so, right?

That seems like a lot of work for not knowing how much we're getting paid.

I wouldn't know either. It wouldn't belong to any one person. If all else fails, you've built something.

The goal would be to just produce as much money as we could. then cash out. What would be a quick thing to do? I'm thinking in the direction of something stupid as fuck for normies to fall for. Ever see that thing on Facebook, where grown men post what they would look like as a female?

Something like this.

Someone told me bcrypt doesn't work when you're developing on windows, is that true?

Sadly I cannot help much beyond just HTML/CSS3 at the moment.
I was actually looking on doing some javascript or php after finishing this course and then maybe go towards unity for video games and the like.

That's good, you could learn as you go, if you want. If game dev is what you want to do, though, then learning javascript would be pretty pointless, unless you were planning on making browser based games.

Anyone else? we're fucking literal wizards of the web, we can generate money if we put our minds to it.

It's mostly since I want to know Javascript and PHP/SQL anyway because there is always a good demand for those skills (especially database stuff but that's mostly because everyone hates working with databases).
Unity I just want to learn because of the influx of VR type stuff and since Unity is a really good free engine that you can use to export to pretty much any platform so it's easy to sell to potential clients that want to make a game/graphically driven app.
I only have to make it in unity and I export it for a lot of different platforms although I most likely will have to learn C#.

Anyone have some good resources for Apache? I'm chunking my way through the official docs but the more the better.

That's true, user. However, now that you mention VR stuff, I too had an interest in it at one point(still dude, but it died down a bit). And I've got good news for you - and this is why I fucking love JavaScript - you can build VR applications in JavaScript(as well as DB/server).

Have you looked into react-vr? facebook.github.io/react-360/
(guess it's called react-360 now?).

It'd probably be better for you to go the route you're already traveling, though.

>still dude
wtf. you know what I meant :/

>That's true, user. However, now that you mention VR stuff, I too had an interest in it at one point(still dude, but it died down a bit). And I've got good news for you - and this is why I fucking love JavaScript - you can build VR applications in JavaScript(as well as DB/server).

>Have you looked into react-vr? facebook.github.io/react-360/
(guess it's called react-360 now?).

>It'd probably be better for you to go the route you're already traveling, though.

Never heard of it but it's nice to know about it anyway. I was blown away not too long ago when I found out you could do graphics stuff with javascript (I can't remember the exact library that was used though.).
This might be interesting in the future, the more little things you know how to use the more prospective clients will be interested in your services.

Also about the hype of VR not being as big as it was. Yes it has died down a bit but that's always the case when you have a brand new but expensive piece of hardware coming out, it peaks for a short while because of the hype and then stablizes.

However if you know how to make applications for it in time for the masses to get their hands on it (think of the same way that smartphones slowly became a standard commodity compared to dumbphones) you're always assured of paying work when it picks up, since every company wants their own little vr app when they know it will reach a large audience. It was the same thing with apps when companies found out they can reach a large amount of people with them, they all wanted their little spot in the app store.

at least you got some dubs out of it.

Please tell me you're going to provide some sort of mask or blurring behind those menu items. It's very difficult to pick them apart from the background.

It's actually pretty cool, I might give it a test later tonight, and see what atrocity I could make with it. Probably wont be so cool without VR goggles though.

It died down, but we both know it's the future of gaming. I don't play, but could imagine a game like fortnite in VR, where you run around, building shit and shooting guns at people? It'd probably make me start playing video games again.

It'll definitely take off once one major game is released. I'm sure there's one in the works right now.

oh damn I didn't even notice that I was missing that.

false;

ul a { background-color: rgba(0,0,0,0.5); }

Is this better user.

Attached: fancy menu background.jpg (1285x204, 89K)

Product showcases and digital storefronts are nice avenues for this tech. Instead of goggles being the limiter, my feeling is that you need a good control scheme. Trying out the demo, I can see it feeling more natural to pan around the environment with a touch screen or analog joystick than with a mouse.

There was one (not so) user that was posting his company's VR paint experience a little while back. I believe he was working in unity, but that sort of thing would be a good fit here as well.
Real estate is an industry currently active near this space. Where I live, most real estate companies have hired 3D videographers to create interactive walkthroughs of their properties, alongside traditional photo galleries.
The tech is already being adopted, just not ubiquitously.

Better for sure, but perhaps add a bit more opacity and use something more in line with the theme of the site, instead of contiguous black space with rounded corners?

In designing for business, it's really important to consider both the mental burden that you put on potential customers and the intended action that you want them to take. I'd even go crazier with the font and color of menu items... if you want them to have their attention drawn there first on the page.

It's just an assignment for a course on html5/css3.
I'm just making sure all the pages are filled before I start putting in the finishing touches in the css that get copied over to all the other pages anyway.

i make simple animated adverts and code them with javascript and html/css all day for my job for some pretty big clients but feel like im getting dumber everyday because it's so mundane only having to think hard if they have a difficult animation style i need to fit into a template

what are some practical coding tasks or reading/learning i should be doing in my spare time to keep up?
i was thinking of working through an algorithms in python just get my logical brain thinking more rather than just fiddling around with changing pixel widths and animation delay timings all day

I'm trying to set up a custom cursor for my web page but nothing will work, even when copy pasting shit from css3 stack it doesn't work, can somebody help me?

I'm a fucking power user, boys. Can't exactly explain how, but I just am. Came here just to brag. Fight me irl bitches.

>shadows
Why? They're horrible.

2ch source code

github.com/j416dy/2ch

perl hell

Attached: 1541207111422s.jpg (107x125, 3K)

Learning Firebase for a project I'm working on. Does Jow Forums have any learning resource recommendations? Already going the YouTube videos on the main right now

Anyone here use vim? I'm using Linux and I want to get into web development but I feel like an actual IDE would be better for all the tags and stuff but I'm used to using vim. Anyone got any recommendations on how to set up vim and/or something for Linux idk.

everything changed when the fire nation attacked

pathogen, nerdtree, emmet, some linter

Rollup is a decent alternative to Webpack.
github.com/rollup/rollup

I use prettier to automatically format my code with airbnb's eslint config.

Checkout Gitlense for VSCode as well.

Nginx

parcel

Engineer here.
I would feel comfortable sleeping under that because I understand how arches work and how heavy CRT monitors are.
That thing isn't going to budge. Especially if you reinforce the CRTs at the bottom.

Is there any way to limit port forwarding to my local network ?

Attached: 1536434983680.gif (575x1036, 19K)

what's the most efficient way of transferring large amounts of text (and later image) data?

I have a bunch of .obj files that I need to send from the server to the frontend and I need to know how to efficiently send them.

Should I just compress the .obj files?

What to do about image data?

>added margin-left: -50px; to the ul tag.
seems like a hacky fix that you shouldn't do
hard to tell exactly what is going on here this seems to make everything even:
jsfiddle.net/wvj09sap/

Most servers already compress files of many types by default, or can be configured to do so. You can check whether your server already does this by looking at the HTTP response in chrome dev tools or something, and checking for that "content-encoding: gzip". If it shows up for e.g. JS files but not for OBJ files, then you may need to add that somewhere in configuration files, depending on your server.

I guess you could compress them all into one file, but then you'd need a library for doing that, or manually parse it yourself, but that might be hassle than it's worth, depending on how many files there actually are.

Image files are already compressed in their existing formats, so trying to gzip them or something will hardly make a dent. If you're worried about size, you could always encode them at a lower size or lower quality setting (for jpegs), especially if they're not usually being shown at their full resolution.

Attached: Screen Shot 2018-11-03 at 2.37.14 AM.png (730x274, 46K)

reading these SEO sites is such a waste of time
85% of the advice is "don't be a scammer with a shady website". 10% is "just have good content bro" and other obvious shit, and 5% is helpful

bump

>guys, just don't be a competition to me
>otherwise you're fine

It doesn't let you paginate the records (well, it may have changed after the last time I used it). Use Firestore for that

>Post pictures I can edit for future thread OPs edition.
Ur a gentleman and a scholar, OP.

Attached: 1518345802687.jpg (960x960, 175K)

Attached: 1504449294536.jpg (625x495, 210K)

Project Euler is always good. They start off simple and get more challenging as they go on. And it's language agnostic, so you can use Python or JS or whatever.

developer.mozilla.org/en-US/docs/Web/CSS/cursor

Are you setting it on body, so that it's being applied to the whole page? Also open dev tools and go to the network tab, then refresh that page to see if the image is actually being loaded.

Is the popularity of this thing a meme or is it actually good

Attached: 24142234.png (800x217, 27K)

Anyone here come their backend in C? I've been looking at h2o but my C is pretty bad desu.

Also this is probably asked all the time but Ruby vs Js vs Python vs etc for backend?