/wdg/ - Web Development General

Web Dev General

Previous thread: >Beginner Roadmap and Overview
github.com/kamranahmedse/developer-roadmap (don't be overwhelmed, ignore the later parts and go step-by-step)
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 (ignore sponsored stuff, look at upvotes)
learnxinyminutes.com - quick reference sheets for the syntax of many different languages
pastebin.com/gfBPg24A - Collection of PHP links.

>Need help with some HTML, CSS or JS?
jsfiddle.net - create an example here and post the link
codesandbox.io - or here if you're using React/Angular/Vue

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

Other urls found in this thread:

github.com/mbilbille/dmak
en.m.wikipedia.org/wiki/Blacklisting
nginx.com/resources/glossary/layer-4-load-balancing/)
stackoverflow.com/questions/41938718/how-to-download-files-using-axios
developer.mozilla.org/en-US/docs/Web/API/Blob
github.com/hsnaydd/moveTo
twitter.com/SFWRedditImages

Ok so Ive learned html and css, i know uber basic javascript for the webpage and i can make and query a mysql database. Whats next to learn to link the two together? Is it node.js? Then after that I learn nginx to push it to the rest of the world?

First for Svelte.

>slow and misses the get
lmao

The old thread was still 20 posts before the bump limit.
Could have easily lasted a few more hours.

learn more JS and learn a frontend framework like Vue or React.

Does anyone know if foo creates instances of the function?
If I change testFunction and call foo['1_id'].function() it will call the original testFunction.
If I change testFunction and call bar['1_id'][0].function() it will call the new testFunction
I tried doing a memory profile and they seem pretty similar with a million entries, bar being slightly bigger, I assume due to the array.
I assumed the function would be a reference but I don't understand why it's still referencing something that doesn't exist.

foo[i + '_id'] = {
function: testFunction
};
bar[i + '_id'] = {
function: [testFunction]
};

I'm working on a personal project in React and there's a JS library I'd like to use. It's not available on npm so even when I link the js file in the script tag in index.html, after runing npm build, I get an error that it's not defined. Is there any way to get around with this? It works great in vanilla JS but I really want to use it with React.

What's the right order to learn MySQL and Rails (RoR)?
You don't need SQL because Rails has Active Record but what's a logical order for learning purposes?

You could wrap it in an export? Then import it normally

how to wrap a function in an export? It's a minified file so I don't know if I can just attach an export in front the function.

What's the library? I did it years ago with snap.svg but I had to change a couple of things

Would anyone recommend learning Java Spring over Node/Rails/Django etc? Why?

Draw me a kanji:
github.com/mbilbille/dmak

Also, if it's too much of work, then don't bother.

wait what even are these? why do i need to learn them? i just want to let my site visitors query a database...

"+ [email protected]
updated 1 package and audited 58487 packages in 19.096s
found 1920 vulnerabilities (64 low, 13 moderate, 1843 high)

what the fuck is going on with this feature.

I've done system administration and engineering for about 10 years now, I have an extensive history with python because everyone else loves it, should I learn django/flask or follow my memes and learn BCHS?

Just had a quick look.
It appears to have two self invoking functions.
One dmak, and another around dmackloader.
Remove the surrounding functions, export both of them. Remove the attachments to window.
Import rapheal

Alright, I will do that. Thank you so much! It really means a lot.

I have a REST api that is implemented via nginx/php/mysql on a debian vps.

How do i make it so clients can subscribe to and listen for events without polling?

Not 100% sure, but I think foo.function copies a reference to the original testFunction memory location? While bar.function is invoking testFunction by name so it stays with the current value of testFunction
Maybe something like this would be what you want to do
foo[key] = {
function: function (args) {
testFunction.bind(this, ...args)
}
}

whoops, should be .apply, not .bind

If you don't need them then nevermind.
Thought you were just wondering what to learn next in the sense of gaining skills in commonly used webdev tools.

If you just want to connect your frontend to an API and the DB, then learn any backend language. Up to you.
Node.js with the Express framework is easy to get in to, but any other language and backend will do. I think last or the thread before there was someone with the exact same line of question and several answers. Might go back and re-read that part.

socket.io or raw websockets or server-sent-events

Bar is an array with the function reference in it. Not to be confused with function['testfunction'].
I'm trying to avoid creating an instance for each property of of foo/bar

What are your thoughts on webbased ERPs?
Do you have any resources?
I basically dont do any webdev, i fixed up some old aspnet webforms in our company.
This was supposed to be a desktop app, as an ERP should, but client is being a bitch and i gotta at least give it an honest shot prototyping.
Im really struggling reasearching.

It works perfectly. I love you man, no homo.

Yeah, im just doing this stuff during some down time mainly. from what i can see vue and whatnot are more for webapp development? Not quiet the stuff i need (i think). What Im mainly wondering is also about security as well, do I essentially give node.js a user with write access only?

/trash/ has some good erp threads

Use inheritance (.prototype)?

Vue or React are for building frontends in a reactive and declarative way.
Very convenient and useful in many cases and if you do more webdev in the future, you will inevitably come across them again.

Not a security expert, but afaik you just create a user for running Node and then there shouldn't be much it can mess with in regards to the rest of the system.

No problem, glad it worked user

Sorry, I think I didn't make the question clear enough. I'll have a think about a better way to put it. Thanks for your help

To add to this, I'm going to start looking for decent jobs in the coming year, and I got my shitty BA in web design a couple years ago. An I fucked even with a good portfolio? Also had anyone delt with blacklisting?

>building frontends in a reactive and declarative way.
youve sort of lost me on how this differs to anyrhing else

>blacklisting
?

en.m.wikipedia.org/wiki/Blacklisting
In this case it would be influential people telling employers not to hire you for reasons.

I know what blacklisting is, I'm wondering why a recent grad thinks he is blacklisted. Did you harass some big time coder on Twitter or something?

Jquery used to be something like: change input - call function - tell function to update #div1 and #div2
React is like: change input - call function - update data - anything using the data is automatically updated

Without going into the long story, I had a falling out with a professor at uni, and they have the type of personality that would blacklist someone they didn't like. He also mentioned a story about him blacklisting somebody during a lecture so that they couldn't get a coding job but some other job; might have a recording of it. I know I'm being paranoid about it and probly might not happen but I just kind of want to be on the safe side.

It's possible that could affect hiring, but it won't stop you from getting a job. It's not like all companies source from some blacklist that random professor from random university can add people to.

I have a few dumb questions about the internet suite protocol/http stuff because I never learned it in school and despite spending hours reading on it am still pretty unclear. I know these are dumb.

Is the OSI model used? The internet is built on TCP/IP, right? Then why are things for like load balancing referred to in the context of layer 7? Which http version are we using? do different sites use different versions?

>OSI model
Yes.
Yes, UDP is used for some stuff as well.
Load balancers can be implemented in different layers depending on how you want to balance them. (nginx.com/resources/glossary/layer-4-load-balancing/)
Mostly HTTP/1.1, but also HTTP/2 in some places.
Depends on the site, some may use both. You can look in the dev tools of any browser and see which version a request was made with.

2 questions for those working as web devs:
>How many hours a day do you work?
>How many hours are you actually working/doing work related things and not using 4ch/social media/reading news

Attached: 1450957325276.jpg (462x500, 46K)

How can I detect when a 'scroll' triggered by an anchor tag click is finished?
I've put it into quotes because it seems like a scroll due to scroll-behavior: smooth but I can't seem to catch any event.

What I want to do, if it helps, is, on a 'back to top' button press, I want the page to scroll to the top, then when it is finished, trigger an animation of an element that's there.

Attached: 1539552417677.jpg (600x574, 57K)

Thank you, this was helpful and helped lead me to a few things that I didn't quite get. Thanks!

7-9 hours, depending on the day.
6.5-8.5 hours, since I usually don't do anything when I'm eating/taking a break.

Is my background-image not supposed to display during a width transition of an element?

>he wastes his interviewers time

Attached: 1511676617713.jpg (3024x4032, 1.48M)

>How many hours a day do you work?
8
>How many hours are you actually working/doing work related things and not using 4ch/social media/reading news
Depends, but I'd say 6.5 to 7.5h hours average.

>charge them standards consulting fees $200/hr in return

fucking kek
if it became immediately obvious he was underqualified, why did they spend 2 hours on him?

>head developer bills $5 over HR
Come on "Rebekah", get your shit together.

7
3.5

Attached: U0blXP0.jpg (1440x900, 102K)

I'd probably send them some monopoly bucks and a picture of my dick saying that's the only thing they're going to suck off from me.

Whats the difference between querySelector and getElementbyId?

you should read the documentation on MDN for something that simple

querySelector() returns the first element that fits the CSS selector... that can be anything. querySelector("div>p.large") for example.
getElementbyId() should be obvious

I was out of uni for 6 months and had no internships and still got a few interviews and a job, just keep grinding user

>getElementbyId
It's in the name user

NodeJS Question.

Upon getting a GET request from the frontend, I need to make another rest call to fetch a PDF file from a (further) backend and then pass this back with the frontend request.

Here's what I currently have:

nodejs
app.get('/app/getPDF', async (req, res) => {
var response = await axios.get("furtherbackendsys/getpdf")
res.setHeader('Content-disposition', 'attachment; filename=test.pdf');
res.setHeader('Content-type', 'application/octet-stream');
res.send(response.data)
})


frontend
loadData: function(){
axios.get('/app/getPDF').then((response) => {
FileDownload(response.data, 'list.pdf')
}).catch((error) =>{
console.log(error)
})
}


I'm not running into an error. If I log the response contents of both requests, the PDF data is actually there (cryptic moon runes) but in the end I just get an empty list.pdf document.

If I call the second backend system directly (curl, swagger) I get the proper PDF just fine.

Is there a different way to 'transform' the data from the request in the frontend into an actual pdf document?

If the client receives a good response with data in it, then it's likely not a Node issue.
I guess it might be some problem with FileDownload? What is that anyway?

stackoverflow.com/questions/41938718/how-to-download-files-using-axios

found it here, maybe I'm using it wrong. So in response.data on the frontend there is the 'pdf data' looking like this in string representation
"%PDF-1.4
%����
1 0 obj
>
. . .(more)

I think it's some sort of encoding problem. Like the frontend can read that it's supposed to be a pdf and it has 2 pages - but can't read any of the actual content. Since the pdf I get in the end has two empty pages.

If I change the
FileDownload(response.data, 'list.pdf')

to like
FileDownload(response.dataxxx, 'list.pdf')


I can't open the resulting pdf at all.

I can't be a lot of help, but I've used js Blob's before to trigger downloads of dynamically generated images etc, maybe look into how it works with images, probably the same concept. developer.mozilla.org/en-US/docs/Web/API/Blob

PDF files can get pretty big.
Go with streams instead of async/await

Not the user who posed the original question, but if you had to estimate, how much time do you spend actually coding vs. reading docs/etc?

I'm about to start applying for junior web dev jobs and I feel like I can demonstrate decent knowledge of the required technologies, but impostor syndrome makes me think I'll be exposed as a fraud after I get hired.

I need help, /wdg/
Some fucker from my town wanted a website and I said I'd whip him up something simple for 60 bucks, up and running, if he took care of all text and assets. I figure I'd just shove it into some jekyll template and put it on github pages. I did and it looks decent, has a medium sized homepage, contact forms, social media buttons, a simple blog and even a fucking image slider first thing up. Very responsive-ish.
He is not pleased. Wants a lot of assets on full width on desktop, and the modern and bloated website shebang. It looks like a fucking mess to do with jekyll, some retards on stackoverflow recommended negative margins and measuring screens with javascript(!) or remove the whole auto responsiveness. I'm not a fucking web developer neither want to be one, I just want some money and this shit is taking much more time than it should. I'm almost saying fuck you and letting the fucker keep his $60. Is there some easy way to use the static site I generated and use some of those fucking bloated frameworks like bootstrap that are actually appropriate for this kind of shit job? What would you do in this situation?

Attached: 1499444283683-0.jpg (540x764, 77K)

This

That's way beyond 60$ and if you aren't doing webdev regularly, but have to look up and struggle with all the smaller things, then there is no way this will even remotely be worth your time.

Either don't take anything or take a proper amount.
With this 60$ BS, you basically end up with nothing and probably lose some of your sanity, while the guy thinks he is "paying you" and therefor you should deliver a professional product.

your client expects more than $60 worth of work for $60. tell him to fuck off and use this experience to learn to negotiate.

Holy shit, cut your losses
I've taken 'simple' jobs for a couple of thousand that have ended up earning me 5 dollars an hour. It's never the technical aspect either, it's people thinking they know what they want when they don't, and wanting things that would work against them.
Simple jobs are never simple and quick. Hard jobs are just honest.

>$60
user...I..

For the record, figured it out - or at least a way to make it work.

had to amend both axios get calls with further options

var response = await axios.get("furtherbackend/getpdf", {
responseType: 'arraybuffer',
headers: {
'Accept': 'application/pdf'
}})

>making a website for $60
You've brought this upon yourself you worthless pushover, even a simple website costs at least $1,000 and you're there slaving yourself for pennies. Might as well just make the entire website for him for free.

I should mention I'm in eastern europe. It'd have been just fine if I took $60 for the stuff I already did, I think. I did take a whole day and some more, and was honestly excited for doing jobs like this. But shit, people want the most retarded websites these days. Current one looks seriously decent and has 178 bytes according to some online measurer. I mean actually decent, just not full of bloat. But fuck me, I agreed to change it, thought it would be a worthwhile experience and increase my reputation. I'm simply not cut out for doing this kind of shit.

This is why hourly contracts and minimum billing periods exist. If your time costs nothing, people will always find something they want changed.

>$1000
This is straight up extortion. I could make a website like the one I did in a couple of hours now. AND IT'S GOOD. It's just that, people don't fucking know what they want! I should have said, "you take what I give you and don't complain" and it'd have been a honest deal for both of us.

Whoops I meant 8kb.

You're exactly right. I can't even afford any meat, and it's hard to think straight in some situations.

Since it's a learning experience from me, I don't think it'd be fair.

We've all been there. That's why contracts for every job are good. If a client doesn't want to sign then walk away from the job.

I can't disagree. But I still need help. It's a very bleak situation here and it's not like I have something else to wake up to for now. Should I use bootstrap for stuff like this? It's very likely that I can get more similar jobs, for which I'm obviously making contracts and better deals.

Medium sized homepage, with blog, contact form, and responsive... you did this in a couple of hours? Yeah, sure bro. Unless your website is completely hot garbage without any styling whatsoever, it couldn't be done (especially when you claim you're not a web dev).
Even if it could, a project that takes a couple of hours should cost at least $100. A decent Jekyll website should cost way more than $100. Your story makes no sense at all, and even if it's true, you're a faggot for undercharging anyway.

Well Bootstrap is definitely an easy way to make it responsive in a short amount of time, so if you want to get this done without much further hassle, go with that.

Though if you say, that you are using a Jekyll template, can you easily modify that with your own responsive styles?
How many pages are there?

Hey All, HOW TO IMPLEMENT SUBSCRIPTION / PAYMENT?

I have created a fully custom web app (MERN+Elasticsearch) that is being hosted on an IaaS platform managed by me. Users are currently being authenticated through Google and Facebook (Passport).

I want to start adding subscription-based content and charging money for it. I’m not sure how to word this—but I want to learn what “best practice” would be in terms of handling payment/subscription-based mechanics and overall architecture.

I’m fairly technical, but I don’t want to spend a lot of time creating something that might already exist in a better form (hence this post). I’ve tried searching but I’m just not finding exactly what I think I’m looking for.


For example, in my head I might have to do something like:
1. Setup 3rd party portal with Paypal (or something else? Help?)
2. Once user pays, flag their account in the back end as having paid for the month
3. When user tries to access paid content, their state is verified and they are allowed/denied
4. Anything else? Is there a book on this?

If anyone has any thoughts, comments, or anything else, that'd be great.

Thanks for reading thus far, I really appreciate it.

Attached: mLFvxry.gif (256x192, 1.64M)

Like I said, did it in one day and some more. And took all assets and text already done, which makes the size not a problem and blogs are stupid easy in jekyll. And I'm jobless in a hellhole.

Just three pages, home, blog index and post. Not entirely sure on the modifications, all I can figure out is some dumb hacks or a pretty extensive rewrite.

I have an android app that only lets me use the front screen. I have all the files for it that I can edit it. How can I change which camera it uses? I dont need it to be toggleable I just want to make it use the one camera instead of the other. Is there something in the code on android apps usually that decides which camera to open?

The best skill any budding freelancer can learn is how to set and manage client expectations. These expectations should be written down, even if it's just confirming details in an email exchange before work begins. You need to ask yourself, does the client understanding what he's getting for his money? does he understand who is responsible for updating the site after you've finished? does he understand how he will update the site on his own? Has he agreed to payment terms of any kind? how and when will he sign work off? All of these types of questions should be answered up front.

I can answer more specifics if anyone has any questions. I freelanced for a while and will be doing it again once I leave my current job.

Question about throwing errors. I'm writing a js library and doing some sanity checks in the constructor on supplied config etc. One of the checks I'm doing is whether the browser supports a specific feature as my library won't work without it, I'm assuming I throw an error in same way I would with badly supplied config? Feels a bit odd but don't know how else to bail out in that scenario.

Bump

>

In India I was walking the street when a man wearing only a head gear and waist cloth walked straight up to me and poked his boney finger into my forehead between my eyes he said I can tell by the lines on your forehead that you are a man of great fortitude and reason and I have something for you Intrigued he asked me to buy him a cup of tea which whilst drinking he explained that for two hundred rupees he would tell me a secret that would be Benefit me for the rest of my life He pulled out a dirty old photo and told me to pic one of the monks on it which I did He now asked a thousand rupees for me to know the secret I never paid and never found the secret but I had the most enjoyable non threatening experience lasting for the rest of my life for the cost of that tea In summery thats why HTML is not a programming language.

I hope there is a special place in code hell where all the dick heads that constantly say, "HTML iS nOT A PrOGramMiNg LaNGuaGe" where you are forced to use a most miserable programming language to try to structure a gui layout.

There are so many bids on freelancing projects. How the fuck do I compete

this is gonna sound like a silly question, but im a desktop developer who has occasionally been poisoned by having to fix up aspnet webforms projects.

Is the general way to build a real webapp to just write html/css and javascript, filling my tables/comboboxes etc with simple json data from ajax calls to the backend? responding to stuff like combobox changed events on the client side, rather than back in aspnet codebehind in some convoluted way?

I do not want to fuck with react or something like it for my first noncancer webapp.

Anyone plase?

This would be the final touch for a website I'm building.

After making a 'simple' website for a friend from scratch, I realized I could have charged 300 bucks easily for this.
And when I have 9-10 templates and making a new one would take me two days at most, I'd happily charge 200 bucks.

Use something like github.com/hsnaydd/moveTo
and trigger your animation in the callback function.

It would be pretty easily done in vanilla JS as well, but eh...

Yeah, I could do that using scrollTop, I had done it that way before.
I'm just getting autistic about semantics and accesibility so I'd want that scrolling to be triggered by an anchor tag with the proper href, and I mean actually 'going' to #whatever, not just scrolling with JS.

Is there any 'standard' approach for creating a sticky navbar through JS, escaping its container?

>Build a GUI with Duke3D's CON scripting language

yeah, that's a fairly common way.
Send JSON back and forth and have the client modify itself in the way you described.

Good on you for doing it the manual way first to see how it works.

And frontend frameworks are really nice as they give you a well structured way to define your layout in a declarative way.