/wdg/ - Web Development General

What's everybody working on?

Also, post some good web-related tech talks, I'm bored and also compiling a list.

Previous thread: >Beginner Roadmap and Overview
github.com/kamranahmedse/developer-roadmap
youtube.com/watch?v=UnTQVlqmDQ0

>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 to HTML/CSS/JS and Node.js or Django
freecodecamp.org - curriculum including HTML/CSS/JS, React, Node.js, Express, and MongoDB
javascript.info - curriculum providing a strong basis in JavaScript

>Further learning resources and documentation
developer.mozilla.org/en-US/docs/Web - excellent documentation for HTML, CSS & JS
hackr.io - crowdsourced collection of tutorials from across the web for learning languages and libraries (ignore sponsored stuff, look at upvotes)
learnxinyminutes.com - quick reference sheets for the syntax of many different languages (generally not sufficient on their own for learning something, but very helpful)
pastebin.com/gfBPg24A - Collection of PHP links. (Maybe someone should check which of these are still relevant)

>Asking questions
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

Attached: wdg_internet_explorer_toolbars.jpg (1024x768, 628K)

Other urls found in this thread:

youtube.com/watch?v=8aGhZQkoFbQ
youtube.com/watch?v=cCOL7MC4Pl0
youtube.com/watch?v=M3BM9TB-8yA
youtube.com/watch?v=HaEPXoXVf2k
youtube.com/watch?v=p-iiEDtpy6I
eloquentjavascript.net/06_object.html#h_z2tOOXM8qO
eloquentjavascript.net/07_robot.html
developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator
developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
github.com/kkuchta/css-only-chat
cow.vg
twitter.com/NSFWRedditGif

What's the best way to build a wireframe guys?

The good old pen and paper? And then pass it to the computer once it's finished?

Attached: 1557256141641.gif (500x281, 474K)

I have a webdev class assignment that is due Friday and I have had two weeks to get it done. I've done nothing yet. I should just give up and smell my own farts for a living again.

Post quality web-related tech talks, here are a few I've watched before or today:

Basic event loop:
youtube.com/watch?v=8aGhZQkoFbQ

Advanced event loop:
youtube.com/watch?v=cCOL7MC4Pl0

Ryan Dahl's Node.js regrets and introduction of Deno:
youtube.com/watch?v=M3BM9TB-8yA

AWS DynamoDB advanced design patterns, and general rationale for NoSQL:
youtube.com/watch?v=HaEPXoXVf2k

Some low-level stuff about the V8 JS engine:
youtube.com/watch?v=p-iiEDtpy6I

And I'll be watching any web-related Google IO talks that happen in the next couple days, so I'll post any good ones.

repost

Has anyone read Eloquent Javascript?

Is it just me or does it feel like it goes from 0 to a 100 in half a chapter? The first few chapters are relatively easy to follow, but halfway through the fifth one, the secret life of objects one, it just goes full abstract, more specifically, this part eloquentjavascript.net/06_object.html#h_z2tOOXM8qO and maybe I'm just a complete imbecile but the next chapter, the robot exercise one eloquentjavascript.net/07_robot.html is way too complex compared to the rest of the book so far.

Attached: 1557272048746.jpg (319x750, 58K)

which nosql database would be best for a not-so-big big database? Like 500gb-1tb.
All I care about is search speed

im trying to read it right now and I feel like its too much garbage. just show me the basics and basic concepts I dont need all this abstract crap

maybe try reading additional material on object oriented programming

Does OS matter? Or is node/js stuff better handled on unixy OS than on windows?

Is it still suggested to learn React over Angular?

Actually, Vue looks pretty attractive even though it's a newer option. I guess I'll try out both Vue and React and see which one I like best.

Is springboot + thymeleaf the patrician option?

Attached: 222E30ED5311487CA98639F00E78A2EC.png (760x760, 426K)

I'm reading it myself,it does not hold your hand.I managed to get to the end of chapter 14.it is a hard book,not for the faint of heart.the async chapter will completely obliterate you,so brace yourself for that one.

You could easily split chapter 6 into multiple chapters. I'm getting annoyed just rereading it and seeing how it casually glosses over things.
I don't like the way this book lays things out or it's examples and projects. I recommend mozilla, w3schools, you-don't-know-js, or exploringjs. Skim eloquent javascript and make a list of things to look up elsewhere.

How do I do something like
Text1 Text2 is
big
1234 5678

knowing "text" and "number" are brother elements?

PenisFactory penisFactory = new PenisFactory();

Penis penis = penisFactory.buildPenis(PenisType.BLACK);

Help. I've been stuck learning JavaScript for a long time cause I always get stuck when trying to build something cause I feel like I'm lacking something. I know some jQuery and I've chosen to learn React. I've only done basic blog themes, to do lists, etc. What's a good project to learn React and Node? I need a big, decent project I can finally stick to to learn and add to my portfolio.

why the fuck is my flexbox not working?
I'm using wordpress query and for some reason, when I place all elements inside the flexbox, they break their positioning after the 20th element. I'm just rolling with:
.gallery-container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-content: space-around;
width: 100%;
height: auto;
}


and all elements are sized the same. They're inserted through a php loop, such as:
if($query->have_posts()){
while ($query->have_posts()){
$query->the_post();
echo [elements and shit]


I don't think I can codepen/jsfiddle this shit cause it's wordpress

Yeah. Also Svelte, which kicked into the game recently.

But go for React if you want a high-paying job.
People love that bloated shit the botnet made for theme.

Even if I prefer Vue which is much nicer to use and more elegant.

Attached: conformity-since-everyone-does-it-its-obviously-the-right-way-14610903.png (500x397, 65K)

>going to do my aws cloud practitioner cert next week

has anyone done this? i passed all my practice exams easily but i see a ton of comments in comment sections about how people failed their first attempt. were they just brainlets? ive been working in aws for about a year and just need my cert for the job hunt

Ya pen and paper or ms paint for me. Any sort of wireframing tool I just find too slow or restrictive for the very beginning part of the process

I love /wdg/, but why do those threads always focus on Javascript and the front-end parts?

Any skilled backend webdev out there ? Or skilled Devops?

What's your favorite tools to create CI pipelines easily? How do you automate shit between every project you create, so you don't reinvent the wheel and avoid boilerplate?


I'm currenlty using Jenkins which is pretty powerful, with a Makefile containing my docker-compose commands so I don't have to think about what to type :
I just have to enter
make deploy
on every project and boom, deployed ! which is amazing, but I guess I could do even better.

I thought about Python to fill pre-made templates and bootstrap my projects.

Attached: 334732fd7b881c1953dd64654173360a.png (499x309, 170K)

Back-end development is just normal programming, and there are much better places to be discussing them than here.

>Web Development General
But why is this thread called 'Web Development General' then?
And why are PHP/Node etc always included in the OP?

Attached: 5f14a1d258473ccbc38683c6c0458ff2.png (642x624, 86K)

I have almost no idea what you're asking but it sounds like you maybe want a certain type of CSS selector:
maybe
developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator
or possibly
developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

Post the generated HTML, just copy the relevant parts of that from the element inspector in the browser into a codepen/jsfiddle with the relevant CSS, make sure it demonstrates the issue you're having, and post it.

There's only a small subset of people who are using your backend language, with your backend framework, who are proficient in those, and who hang out in /wdg/. There's a lot less fragmentation on the frontend, so you're more likely to find someone who can help with a React-specific issue than someone who can help with a Django-specific issue.

And we do get some discussion of backend. It's some Node, with a decent amount of PHP, and more WordPress than I'd like. But it is discussed some.

Is there any way to speed up Chrome's Debuggin Tools when debugging long-ass few-thousands gigalines JS script?
Or perhaps something attach another debugger/pipe through?

Would anyone give a single a fuck if i used Golang for a backend or is it too nich compared to .net-core or Node?

Attached: 25323525.png (1500x1000, 50K)

Got a php question here. Which of these approaches is the best way to handle form requests?

>form directs to self and commits data if valid
>form directs to specificly made php file calling a superclass formhandling object
>form directs to one general php file that includes matching php files via a switch

The downsides I'm seeing for each are:

>Possible duplication or anomalous record committed to the db if the user refreshes
>results in a lot files that may be difficult to manage and update in the future and will be exposed to users
>Not sure about the overhead. Does include/require happen at compile time or are they loaded into memory during interpretation? Seems like the most secure and manageable way but might come at cost of processing power.

It's all just text data in the forms btw. File uploads are going to be sandboxed to another server so the real question here is if I'd be right in using the last method for form requests.

What things could I look into with making a website more businesslike ?
I already have smooth scrolling on and everything on a single page so it just smoothly scrolls to that part of the page.
The navbar is sticky as well when it hits the top of the screen so you can easily go back and forth between the page.
What other things could I add ?

>Trying to appeal to the suits

Never gonna make it

It's more of a joke website but I'm trying to think of other things all those business websites have.
All I can think of is that everything is on one page and the smoothscrolling.

node is garbage

*was

Yo, I have a problem.
I'm injecting some script through Chrome Extension but getting some race conditions issues.

'use strict';

const element = document.createElement('script');
element.id = 'toggleEmbed_injected';
element.type = 'text/javascript';
element.src = chrome.runtime.getURL('content_inject.js');

const element2 = document.createElement('script');
element2.id = 'jQuery_injected';
element2.type = 'text/javascript';
element2.src = chrome.runtime.getURL('jquery-3.4.1.min.js');

document.head.appendChild(element2);
document.head.appendChild(element);

Apparently it takes quite some time for jquery to be written and processed so while it happens second script is already written and executes.

Now, I know that a degenerate imbecile way would be through setTimeout but that's downright retarded.

Are there any better approaches?

I'm bored of learning vanilla css and js, but I'm having a blast with hugo and creating static websites. What to do?

>I'm bored of learning vanilla css and js, but I'm having a blast with hugo and creating static websites. What to do?
Keep making static websites ?
Not all websites need a database and other dynamic stuff added to them.
Is hugo nice to use ? I'm still in the process of learning javascript and I'm not quite sure what direction I want to go in.

I found javascript.info to be nicer to low iq individuals like me. It will hold your hand and it has exercises that covers edge cases as well. also tripfagging becase I will probably stalk this general, trying to learn js for like the 5th time.

Yeah, hugo is nice. My goal is to create static websites for clients as a freelancer. (I still need to learn css and js to do that properly though)

I don't get it.

Node works for like 2 days then it gets an error and has to restart.

wtf is this shit? How does code work just "most of the time"?

use pm2 or forever i guess...

I currently know html and css pretty well (a lot of things can be done with just plain css and html5) and a little bit of JS, I know all the core stuff but wrapping my head around what I'd need to use to solve a problem as efficient as possible still keeps me busy.

Hello frens

let's say I have a list of items



element 1


element 2


element 3


element 4

how would I, in javascript, have an event listener for on-click on that then selects the parent element? I'm garbage at front end and am really rusty with my DOM manipulation.

I miss IE6

probably because php is also frontend and most node frameworks are also frontend

why would you listen on then and not the parent?
You can also just add a single listener on the element and then check the .target to know which element was clicked.

because the parent already has an event that does something else.

tl;dr it's a post with a reply button, and when I click the reply button inside the post, it has to take the post content and shove it elsewhere. on the page.

alternatively: how do I select the specific element I clicked? Then I can make different conditionals for which part of the selected element I clicked because now I just have an onclick attribute with a function that takes the ID of the element I clicked and passes it as an argument.

Sounds like a good case for Vue or React desu.

Otherwise do a querySelectorAll to get all the correct elements and add an eventlistener to each of them and then grab the parent from within there.
Or when you create the posts, set a data attribute with the post ID on each element, then when someone clicked the postReply#123 reply button, you also know to get the content of postContent#123.
well, when you add an eventListener to and someone clicks on , then the events .target property will the element.
But I would keep it all self contained and probably rather have an eventListener on each button. Seems cleaner than to capture the event a few elements down in the DOM.

>eloquentjavascript.net/06_object.html#h_z2tOOXM8qO

I can actually explain how to understand stuff like this. Back in the
day I was trying to learn how to implement a promise from scratch,
and I just couldn't. I gave up, and instead devoted myself to learning
algorithms and data sctrucutres in python. I went through an online
class and would try to memorize stuff to the point of being able to
rewrite it from scratch the next day in the morning. Obviosly when you get to
binary tree search, etc, it's impossible, but doing this gave me a
much bigger memory capacity for code. So when I came back to
promises two months later, I instantly got it.

You are jumping into the deep end but first start with basic data structures.

To the guy who needed to show 100000 pieces of data in sorted order
with react: the parent of the display components keeps track of scroll
positiion in state. Based on scroll position, unmount children display elements
as they leave the page, and don't render them at all if they are not yet on the page.

Eloquent JS has gotten much much worse due to changes.
Javascript.info + You Don't Know JS are SO much better. Eloquent JS is for the faggot who never codes but endlessly reads, basically a huge waste of time.

If it's your project, who cares? If you're trying to build a team, recognize it's a niche language and it will be very hard to find talent. If you're trying to get a job, also recognize that it's not used all that much yet outside of SV so you're going to get frustrated.

heartbeat()
{
try
{
console.log(chrome.runtime);
if(!chrome.runtime.getManifest())
{
this.hb++;
if (this.hb > 2)
{
this.cancelPatch();
console.log("[Muhext]: content script appears to be orphaned now, disabling monkeyPatch!")
}
}
}
catch(e) { console.log(e); console.log("[Muhext]: exception failure while checking heartbeat?");}
}


Why in the fuck I always get console.log from CATCH blog and nothing in the message besides predefined text? e is empty. Try always fails

debug it then.
see which line the try block fails at so you at least know something

I realized my dumb mistake, I was using outside of context scrip - injected

Here is my post on some things I need help understanding.

Is ruby on rails still worth learning or should I stick with react/node. I'm currently restarting the odin project and I forgot they mainly focus on ruby and ruby on rails.

I see, I was having difficulties with tools.

wasm DOM manipulation when?

Never

If you find an answer let us know

So I injected a script into page from my Chrome Extension. Now, is there a way for these 2 share the same storage? Like, I know that injected scripts can do cookies and some local storage per domain, right? can I access any of that data from content script?

Isn't is PHP?

It*

I command the forces of the dark to teach these secrets.

Attached: 12316-sign-of-the-horns.png (512x512, 18K)

fuck yo' desert cult nigga, long live our original gods

Attached: 1557330556917.png (640x562, 673K)

How do I make money online? Which language/framework/freelancing website to use?
Im from a poor country so I don't need no 100k$ salary like americans
I just want 500$ a month

Get hungry.

>he doesn't know the left hand path
>on Jow Forums

Does anyone else constantly get emails for jobs? They all look the same, with yellow highlighted words, but from different emails/companies. I've been assuming they're all spam/fake, but maybe they're actually real? I don't know where the fuck they've been getting my email from, but it could be anywhere.

Affiliate marketing. Build a website based on something specific. Could be anything. Say, vapes. Make a blog on the site, and write about vapes. Fill that shit with affiliate links to buy the products you're writing about. Now post that shit everywhere.
Here's something. Make a sponsored post on Facebook that says "The Truth About Vapes and Vaping", people will click that shit. Now convince them to click your links and buy whatever it is you have. Older people are quiting cigs and going to vapes, so I think this is a gold mine. I don't know why I'm telling you this, I should do this myself.

I'll use the two hands inyour ass, stupid nigger

HTML5/CSS3 is enough for freelancing
Javascript is a nice addition if you want to make some more fancy things.
Add a monero miner to the websites you make that makes the visitors of those websites also mine monero for you, even after you have been paid for creating the website people visiting the website will use their cpu power to mine crypto for you and give you additional income.
Afterwards you simply have to convert that monero to whatever currency it is you use and transfer it to an account of your choice.
Don't use ads, nobody clicks them and they don't provide enough income.

But this is just a basic idea. You don't need the sponsored post, you could spam it yourself in Facebook vape groups or reddit, or wherever you want. And you don't need to do so with vapes. Generally, it's better to do it with something you know about pretty well. Go sign up for Amazon's affiliate program. It's 10% of the buyers shopping cart of everything in it. So if they have $100, you get $10 - and it could be anything in their cart, not just the vape you linked them to.

This is basically your way to $500/month. It will be much more rewarding than fighting for a job among 100,000 other people. People think they need to learn programming to get a high paying job. They always neglect the idea that they could just build something and make it profitable.

>monero miner
If anyone sees this on a site, they'll never visit it again.

Boomers don't really check website sources, and you can make it run in the background without notifying at all (even on mobile devices).

Also, HTML/CSS is definitely not enough. Not even close. You need to be familiar with Google products. Webmaster/analytics. Most certainly wordpress, as wordpress powers 80% of the web, if I remember correctly. This is still just building static, single-page sites, though. Not many people want these anymore, they just use wix. Also, how the fuck do you expect someone to deploy the website? With just HTML/CSS knowledge, they'd be completely lost.

But others do. It would destroy your website's reputation. No you can't. I'd watch the network and see what is going on, especially if the site started eating resources.

they probably use REST for the api at least
dunno about backend

github.com/kkuchta/css-only-chat

>But others do.
Most people are horribly tech illiterate and are barely able to browse a website (even people below 30 are like this and make me wonder how they function in daily life).

>It would destroy your website's reputation.
Not my website but it's nice to have a clients website paying for me in the long run (after their paid me for the website creation, hosting and domain of course). If you own the domain for their company and have it hosted (pure HTML/CSS websites are tiny and you can host lots on even budget webhosting) they can't really do anything (99% of them dont even care).

>No you can't. I'd watch the network and see what is going on, especially if the site started eating resources.
You can actually run this without giving the end user a popup to enable it, the piratebay does this when you visit it.
The only real issue comes when you have multiple tabs open when this is enabled but if you just make a single page website with a sticky navbar. Most users (this means the ones that possibly could figure it out) will be none the wiser.

Anyone know what reasons there could be for a gif not to play? I'm changing the src of an img tag with js, and one of the gifs just doesn't play. It's a play once gif, not a looped one. The looped one doesn't have any problems. When I just edit innerHTML, the play once gif has no problems.

If it's a really short gif it might play while the page is still loading and just skip playing altogether.
Why not just let it loop ?

>using auth0 for authentication
>somehow i skipped the line in the documentation that says ID tokens aren't supposed to be used for API access
whoops

>HTML5/CSS3 is enough for freelancing
lmao, on what planet?

It's a shitty rocket gif that I made in 3dsmax for a sidescroller. It is the take-off. So it's tied to a function which changes the still png of the rocket and exhaust to a gif of the rocket and exhaust during take-off. When the animation is finished it is again replaced with the rocket and exhaust in flight gif. I just find it weird that by replacing the src it breaks, but if I just replace the whole HTML with innerHTML, it has no problems. I suppose I'll make the gif looped then, to see if that helps.

Actually I quickly checked, if I just use the looped one during the launch, if it will fix things. No it doesn't. The animation doesn't play.

try to reproduce it in jsfidle

Nah, man. I'm done for today. I was just wondering if anyone has experienced something like this. Right now I'm just watching DeepMind own scrubs (pro-players) in SC2. Thank you for your replies.

I have no clue what it is really, but sounds like a browser specific bug, there might or might not be a way arround it

Yeah, it does behave slightly differently on different browsers. On chrome the animation starts just as it is supposed to finish, only the first time though, if I refresh it doesn't show at all, in mozilla or brave you don't see the animation at all. Could it have anything to do with requestAnimationFrame?

I don't understand the point of refresh tokens and I am too annoyed to actually google it and learn their purpose.
I mean I get normal tokens... server gives you the token, you attach the token with your request in order to authenticate.
Then your auth token expires after a while, so you submit your refresh token in order to get a new auth token... How does that improve security?
Your auth token is time limited, alright... but your refresh token isn't?

I mean I am probably just missing something, so it's not like I am shitting on JWTs in general.
Hate this feeling. I think it's the same when people hear about Webpack or React for the first time and wonder why you would need those.

you should reproduce it in jsfiddle for us to be able to analize it

That's not happening today. Thank you in any case.

no problem, do it right away next time, since that way we can see what's going on and we don't have to guess or copy some code, we just have the user case in hand

Rate my site cow.vg

what in the world

Website design: good
Ugly women flashing their saggy tits: not good

wtf is that

Attached: 1396503640116.gif (451x274, 1.16M)

>How does that improve security?
If your authentication token expires, it can no longer be used to prove that it's really you. Pretty self-explanatory. So now we're left with a problem: how do we re-authenticate the user? We could force them to log in again, but users generally don't like that. So instead you have a second token, with a much longer lifespan, to prove that it's really you. They are stored more securely than regular auth tokens and much more difficult to guess, forcing an attacker to continuously either intercept the refresh process (unlikely) or get a hold of the active auth token.

Security is all about making attacks as costly as possible.

hm I get the intent, but then the followup question is, why not always use a refresh-like token, if everything about it is more secure.
And regarding the expiring of the auth token, whether an attacker can use your token for 2 weeks or just 5 minutes, either seems very bad obviously.
Anyway I will read up on it.