/wdg/ - Web Development General

>Previous thread
>Free 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)
developer.mozilla.org/en-US/docs/Web - General documentation for HTML, CSS & JavaScript
freecodecamp.com/
codecademy.com/

>Further resources
github.com/iRaul/awesome-portfolios - Portfolio examples
github.com/kamranahmedse/developer-roadmap - Roadmap
stackoverflow.com/ - Developers asking questions and helping each other

>Tools
jsfiddle.net/ - Use this and post a link, if you need help with your code
caniuse.com/ - Check browser support for front-end web technologies

Other urls found in this thread:

discord.gg/wdg
challenge.gov/list/?type=SoftwareApps
ycombinator.com/rfs/
chiru.no/u/nginx_quickstart.txt
chiru.no/u/letsencrypthowto.txt
gist.github.com/subfuzion/08c5d85437d5d4f00e58
Sup
explorer-aileen-56311.netlify.com/
developer.mozilla.org/en-US/docs/Web/CSS/outline
codepen.io/user/pen/ZaKOwO
vacaran2017.github.io/.
vacaran2017.github.io/TEST.html).
mplus-fonts.osdn.jp/about-en.html)
twitter.com/NSFWRedditGif

firefox is truly the white mans browser

Join the channel, if you need books or a nice bulletin board of useful links.

discord.gg/wdg

I was thinking about making a library like particles.js (which hasn't been updeted for 3 years now and has really shitty performence), but I'm not sure if I should use html5 canvas or just a div with moving html elements or svgs. Any ideas?

If you make it a div with moving elements, then each of those elements would have to be an svg. That's a bit silly when you could make the entire thing an svg.

What's up niggas? What's everyone working on?

Just more boilerplate wordpress sites for me.

Learning fetch API. Seems pretty comfy and easy to use.

> >63315248
you will never stop spamming your shit server, will you?

>depriving user of his (you)

Started using MDN to get into webdev. Since it's more of an intro course should I go more in depth on the topics using books or move on to learning new things like frameworks using introductory level online tutorials?
I was lucky enough to get a webdev job despite coming from a maths/statistics background. It's front-end for now but I'll be moving to mobile development while helping with back-end in maybe half a year. So I get to work on industry level code daily but at the same time need to catch up to my peers fast.
At this point I'm not sure whether to focus on going in depth or study many topics instead.

In my opinion it's better to go in depth on one thing than shallow on a bunch of things. If you go in depth and really learn one technology, then you've learned two things: the technology itself and how to use the documentation effectively. But if you learn several technologies shallowly, then you haven't really learned how to do something useful with any of them.
I recommend you go through MDN's intermediate and advanced to tutorials in javascript. That'll keep you busy for a while. Then you can spend time learning a framework, probably the one your company is most using.

I really want to leatn angular because it seems like a highly sought after skill. However, none of this syntax makes any sense. Its just so ugly. How do i learn angular?

Thanks! Wasn't sure on how to plan my studies. This should be able to give a strong enough foundation before I'm good enough to ask the senior developers to train me.

Your job will force you to go in depth on things. If you're okay with the direction that leads you, then I'd say use your own time to learn a bunch of different things. That way, you're a week or two away from being competent at any technology your career throws at you. You wouldn't believe how many amazing opportunities have come my way because I was the one in the office who had read a few blog posts and a tutorial on some fancy technology.

Do the hero tutorial, use angular cli for your actual project - wow you are an expert

Where do you host your experimental or test sites?

You mean sites that you want others to see? Cos there is localhost for that. I would just rent a small server out on Digital Ocean or wherever and do all the testing there.

WDG DOES NOT APPROVE THIS FURRY FUCKERY

I approve of it. It's fucking cute.

>can't load local files since 57
into the trash

works for me on 58

use canvas, it's designed for that kind of thing

for work, a react native/typescript app, dev tools have not been as stable as I'd expect on iOS, but it's still a lot faster than native dev

Just found this site
challenge.gov/list/?type=SoftwareApps

Anyone ever tried making money on these challenges?

who can apply to these? I can't find. Seems like hard work with a mediocre roi

also there's this, even for inspo
ycombinator.com/rfs/

Where can i find free websites templates in psd? I went to behance, but there are next to none templates that have logic of an actual website, they're just an experiments.

are psd's even still a thing, now that responsive design is something to always keep in mind?

1. how to show error message on form submit?
E.g. user supplied wrong credentials.

2. is there a way to send a HTTP POST without a form or js?

For anyone who could use it:

chiru.no/u/nginx_quickstart.txt

chiru.no/u/letsencrypthowto.txt

it's not bad you double nigger

>is there a way to send a HTTP POST
curl

gist.github.com/subfuzion/08c5d85437d5d4f00e58

It seems that this user gave you the opposite of my advice but we're both right. According to Jordan Peterson, to achieve mastery you first have to confine yourself and become a disciple of a discipline. Then after you've achieved competence in a discipline, that will open you up to a wider array of skills. In your case you should learn Javascript and how to use one framework really well. After you've done that, you can spend the of your time experimenting with all the different and bleeding edge technologies.
Lets say you wanted to learn a bunch of foreign languages: French, German, Italian, and Russian. People who want to do that often ask if they should master them one after the other or try to learn them all at once. What you should do Is learn one language, lets say French, really well. After you've done that, you've learned how to speak French and how to learn a foreign language. Then you're prepared to learn the other three languages separately or in combination.

(you)s are not upvotes you retarded reddit fuck

you got a nice macbook

Well, that's a block of words I'll never read

yeah, should have been more specific, from the browser with a click, like in navigating the page

you'll never amount anything in life, anyways

Apparently Tor is the white man's browser

>Firefox fork #315

it actually has competent people maintaining it

my captcha was "total pepsi"

how to enable legacy captcha?

every time i changed in the settings it does nothing..

Sup Forums-x.net/

Bunch of retards.

good post

What browser should a nibba like me use?

Give it back Ladarrel

Could I get some constructive criticism, please?
explorer-aileen-56311.netlify.com/

text under the name is too hard to read for granny

I'm pretty new to the Web Dev scene, but the website looks nice. The only thing I noticed is that some of the gallery images were cutting off the page when you opened them. I recommend you make the gallery images center when zoomed instead to the right. Pic related.

like user said, hero text should be easier to read. Just add a subtle shadow.
Double down chevron on the button looks a bit weird, maybe some indication, that it can be clicked. (subtle initial movement after page loaded)
top nav bar should always be visible imo, so people can click on the relevant section right away.
typo on "Were Here to Help"
compress those images man and maybe even make thumbnails for the gallery ones.
tinypng.com

Have you tested this on mobile? Using Chrome's dev tools with the mobile inspector shows that your elements are skewed to the left.

The contents of the navigation bar are not visible when on mobile.

Your background is overbearing, it looks good at the top but it becomes an eyesore the more you look at it while scrolling down the page. If you know how to write JS you can blur or darken the background once you've scrolled past the header section.

Your heading fonts are nice, they match the theme of the site well. Your body text fonts could be better.

I like what you've done so far keep it going.

How the fuck do you scrubs with no experience get jobs like that when it took me 1.5 years after years of schooling to get a basic dev job?

>it was hard for me, it should be hard for you too

No. If it's easy for you, it should be easy for me.

you're new to life, eh?

He hasn't been handed his white privilege pass as yet.

This white divider, what is it called? I know it's an image/svg but for the life of me I don't know what to google to find more like this.

It's a horizontal rule
In web development, we call it the tag

Why the fuck should I use feature queries to check support for grid when it’s not even supported in IE at all while grid is? Do browsers that don’t support feature queries load the css inside anyway?

>web development general
Brainlet general is a better name

That's not an my guy

God, why do autistic liberals screech their retarded shit in every single fucking board? Just leave us alone jesus christ

Sure, you could use an SVG or even a DIV, but the semantically correct tag here is HR. If you want to be semantically correct and SEO optimized, you should really consider using HR in this case.

What do you guys think of the spring framework?

How does translate to what looks like a curved white brushstroke like in the image?

Using CSS, of course. You should really separate your presentation layer from your semantically correct markup. That's the proper way to do web development.

like this

Why are you still using Spring/Django/Laravel/Node.js when Go handles literally everything without third party packages?

I'm always afraid to do things like this because I just imagine there are browsers/screensizes/etc where it doesn't line up right at all and it just looks like a giant clusterfuck

The only industry experience I have is in spring so that's what I understand and what I'm comfortable with. How simple would it be to have a simple web application that's serves web pages and query a database?

I have an input and when I focus it I want it to have a border so it's obviously being selected

Is there any way to do this other than having a border already where but it's invisible until you focus it?

If I only have a border when I select the input it shifts everything around a little and it's triggering me basically

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

codepen.io/user/pen/ZaKOwO

jQuery is the capo of webdev

That just makes it even worse no matter what I try and always blocks out the box-shadow and stuff, but using a border grows it inwards and looks half decent

i am bad at reading
yeah i think you might have to override the browser's default styling

try box-shadow?

hows netlify free tier compared to github?

I'm too lazy to learn Go.

How would I approach randomizing where an image might show up on a page(like say on refresh of the page)? Also how about showing more than one of the same image sometimes too but in different locations on the page? And then what if i wanted one of the image instances to be a link to another page or something like that? How would one implement this? Thanks in advance for any input.

its retard easy my dude

use js to create an and and use css to give it random js-generated coordinates on the page

How is yesod? Also, I am probably going to need to hire someone to do graphics for the first time, I have a project that's way beyond my GD ability. Any tips?

Help me out /wdg/.
1. I tried excising jQuery from vacaran2017.github.io/. It seems to be mostly fine, but there's something going wrong when I try to remove a class from all elements that have that class (vacaran2017.github.io/TEST.html). (not sure if it can be avoided by using nodeList.forEach, but I'm looking for backwards compatibility. tested with Firefox 3.6 for maximum autism)
2. Tell me what you think of it the site. Especially in terms of JS, since I'm an idiot who doesn't practice programming enough.

var paragraphs returns nodelist, not a true array.

use array.prototype.slice.call(...) before looping

also dont use generic for loop when adding listeners. use forEach.

so use the array.prototype.slice.call(paragraphs) then use forEach

what font is that?

That's why .svg's are now a thing.

Doing it on this line instead seems to have fixed my problem, thanks!
It seems like this would make no difference to me. If it isn't too much trouble, could you elaborate?

M+ 1m Thin from the M+ FONTS (mplus-fonts.osdn.jp/about-en.html) family. I'm only using it because the Latin letters in MS Gothic are shit and fonts like Consolas don't cooperate with the CJK fullwidth-halfwidth dichotomy though. I like Lucida Sans Typewriter.

not too bad, only use it if you are comfortable with haskell though.
Ready made talent pool is scarce if you want to hire later. Skills are not transferable, your resume wont be as nicely padded as with some memeframes if you want to be hired.

>touching anything google
>ew
sell me on go, why should I use it over Openresty?

Use WebGL If u have dignity

So does PHP

maybe this is a dumb question but if i call a c++ api from node, do i actually get a performance benefit or am i really just calling c++ translated into javascript? because i have a somewhat large amount of data that i need to process so i'd like to do it by writing a c++ api and then calling that from javascript.

How do you juggle new project ideas with finishing old ones?

finish old ones before you start new ones
put ideas in ideas.txt

>do i actually get a performance benefit

if you mean ffi, most probably yes
definitely not translated into javascript

why do you want to call it from javascript though?

Looking for help.

Interested in seeing my hellish mickey mouse spillage re-written into clean, neat code.


uploadBook(book) {
const { uid } = this.props;

database.ref(`users/${uid}/books`).push(book);
}
uploadCover(file, callback) {
const fileName = file.name;
const uploadTask = storageRef.child(`users/${this.props.uid}/${fileName}`).put(file);
uploadTask.on('state_changed', (snapshot) => {
const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
callback({ progress });
}, (error) => {
callback({ error });
}, () => {
const { downloadURL } = uploadTask.snapshot;
callback({ downloadURL });
});
}


handleSubmit(e) {
e.preventDefault();
const { uid } = this.props;
const { title, author, description } = this.state;
const book = {};

book.title = title;
book.author = author;
book.description = description;
this.uploadCover(this.state.file, (res) => {
if (res.progress) {
this.setState({ progress: res.progress });
} else if (res.downloadURL) {
this.setState({ progress: 'Done' });
book.cover = res.downloadURL;
this.uploadBook(book);
this.setState({ editCover: !this.state.editCover });
}
});
}

Need some primers here.
Can anyone re-write this well?

this + cry everytime someone gets bought out by making one on the list

is outside of , read about alt attributes for images, you're using them wrong