/wdg/ - Web Development General

>Getting started
Get a good understanding of HTML, CSS and JavaScript.
MDN web docs offer a good intro (independent of your browser choice)
developer.mozilla.org/en-US/docs/Learn

>Free online courses
codecademy.com/
freecodecamp.com/
bento.io/

>Roadmap
github.com/kamranahmedse/developer-roadmap

>Resources
developer.mozilla.org/en-US/docs/Web - General documentation for HTML, CSS & JavaScript
stackoverflow.com/ - Developers asking questions and helping each other
caniuse.com/ - Check browser support for front-end web technologies

>Youtube channels
youtube.com/user/TechGuyWeb - Traversy Media
youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ - freeCodeCamp
youtube.com/channel/UCO1cgjhGzsSYb1rsB4bFe4Q - funfunfunction
youtube.com/learncodeacademy - codecademy
youtube.com/derekbanas

>in-depth comparison of VPS hosts
webstack.de/blog/e/cloud-hosting-provider-comparison-2017/

Other urls found in this thread:

vuejs.org/v2/guide/single-file-components.html
thehackernews.com/2017/08/chrome-extension-for-web-developers.html
v4-alpha.getbootstrap.com/examples/)
chanstats.info
twitter.com/SFWRedditVideos

First for PHP

Anyone here tried out PHP 7.2? What is it like?

Need help Anons. I want to have a popup of somesort, that works when i click a table cell, but doesn't have any ID's attached and is unique for each table cell, is that in any way achieveable?

i.e.




When i click on the first cell i want the popup to show the content of the first cell, without using any ID declarations, and when i click on the second cell i want the popup to show the content of the second cell, still without using any ID's, simply because i have like 1000 of these cells.

sounds like a job for Vue or React list-rendering

Is there any other way to pull it off, with pure JS or jQuery? I don't know, maybe onclick and opens a child div with certain class, is that possible? I'm a total webdev newb :(

How are you creating the cells currently?
Are you looping through some array, creating the elements and setting their content via JS?
In that case you could add the click eventhandler in the same step.

I would still recommend a view library for this though.

Pleaae stop using that dinosaur

Does an event listener exist in JS for when a particular element has incremented to a certain number value?

I make them by hand, and don't want to put ID's by hand for every cell as well, and the site is pretty big and i don't want to break it, so adding additional libraries is kinda not what i want to do.

i'll soon take enroll in a bootcamp and PHP will be in the courses
it's still out there stop acting like Node.js is taking over it's not. PHP is still the most popular

>I make them by hand
You are causing yourself much more work than necessary in the long run I would say.

In regards to the problem though, if all the cells share the same class, you could get them all via getElementsByClassName, add their content to an array and set an onclick eventhandler with an index as its argument on the cell element.
When the cell is clicked you then retrieve the content from the array at the specified index.

let elements = document.getElementsByClassName("your-class-name-here")
let contentArray = []

let showContent = (index) => {
console.log(contentArray[index])
}

for(let i = 0; i < elements.length; i++){
let element = elements[i]
contentArray.push(element.innerHTML)
element.setAttribute("onClick",`showContent(${i})`)
}

>when a particular element has incremented to a certain number value?
DOM elements don't have numeric values, so I have no idea what you're asking.

This is a pretty retarded way of doing this.

document.querySelector('theContainingTable').addEventListener('click', ({ target }) => {
console.log(contentMap[target.getAttribute('data-idx')]);
});

Addendum after having actually read OP's retarded requirements:

const contentArray = [...];
const elements = document.getElementsByClassName('cellClass');

document.querySelector('theContainingTable').addEventListener('click', { target } => {
const index = elements.indexOf(target.closest('td'));
if (index === -1) return;
console.log(contentArray[index]);
});

Attach click listener to td. Listener will have trigger td as context (this).

Still popular? Yes.
Steadily declining in popularity? Also a yes.
Obsolete in the forseeable future? No. There will be lots of pajeet-tier legacy codebases that will need work. I don't know why you would willingly get into PHP now.

Is learning Node in 2017 still a good idea?

I played with Ruby and PHP (eew) and feel like learning something new, but I can't decide which technology to learn. Is Node + Vue a good idea?


Mang, just put some "if (x > value)" at that point where the increment happens.

>.closest
huh, never knew that was a thing
you seem to know what you are talking about, but at least make sure your examples work

document.querySelector('table').addEventListener('click', (event) => {
console.log(event.target.closest('td').innerHTML)
})


for (let element of document.querySelectorAll('td')) {
element.addEventListener('click', (event) => {
console.log(event.target.innerHTML)
})
}


yes

There is no stopping the Javascript hype train, it's here to stay, go for it
I'd recommend React instead of Vue though, the latter generally is considered babbys first framework and has not managed to gain as much traction as React

>at least make sure your examples work
Why would I do that? I'm not going to give a line reading to these greedy plebs. And why did you remove my destructuring?

Adding click listeners to a thousand elements in a loop is full-on retarded.

because there is work out there for it

not so much for node.js
( even though i'm dabbling into it on my own time )

If 'there is work out there' was the only criterium you should probably specialise on Wordpress
I'd rather look around for a job than work with PHP though.
(being a special snowflake and only looking for Haskell work or some shit is the other side of the spectrum, that's not any better)

i tried to (wordpress)

i felt like a fraud

>the latter generally is considered babbys first framework

It's true though, that React and Angular are way more prevalent. Definitely the better choice when it comes to finding a job.
Personally don't like JSX though and Vues single-file components are really nice to work with.

Is it normal for devs to never come in on time.

I work 8-5 at this dev job and my past dev job. Both times only one other person arrives within 10 minutes of it being 8. People always show up 30 minutes to an hour late.

Wtf is going on? I got to work 5 minutes ago and the lights were off.

perfect job for me

i'm always 5 to 10 minutes late

Back when I worked in an actual office I was between an hour and two hours late pretty much every day. Still work for the same company, but fully remote now.

i always come late but i try to catch up during lunch break and stay a bit after hours

So this is the power of White Collar?

Vue is generally considered superior to React. Also for both of them the popularity curve will be similar to Angular- be unknown, become known, become popular, become overcome by superior competitor. React is near the top of it's popular phase while Vue is that superior competitor still growing.

It depends on company but at smaller not corporate ones that kind of flexibility is pretty normal.

If you are at work and you are reading this then clear your throat.

Pretty sure someone here is lurking right now.

Is it actually superior though? I use it and like it, but have yet to use React.
My beef with React was the way you had to write the Mark Up. Seemed like it was reinventing the wheel.

I'm learning by making a simple site, i set the menu to fixed position, but i can't make the content below stop overlapping, if i use padding or margins i cant get it to work on different resolutions.

Any tips?

if you prefer oldschool jQuery, try $('td').click(function() { var texthere=$(this).text(); $('.popup').text(texthere); $('.popup'>>or however you named it).fadeIn(); });
might have some errors, didn't work with this in a while. also id your table if you want this to happen only to this table.

Dont use absolute positioning for container elements.

Thanks for the replies..

I had a brief look at React and Angular and React look kinda nice. But from what I've heard Vue is more easy to get into and that you can learn in in a few days. Meanwile React seems to have this completley new (and probably challenging?) philosophies like Flux/Redux and is more of a completey ecosystem of it's own.

My point is:
I'd like to learn a simple but complete stack based on JavaScript. MEAN was the thing a few yaers ago, but I really don't feel like learning Angular.

So what should I learn?

Vue + Express + Node ?
React + Redux + [...] ?
Something else?

>So what should I learn?
I like and use Vue, so obviously that's what I would recommend, but you could easily be as happy with React.
>React + Redux
The equivalent would be Vue + Vuex, though I would leave state management libs aside, if you are just starting with the view library itself.
>stack based on JavaScript
Node, like you said

So "Vue + Vuex + Node" would already be a complete stack?
Or are there other components I would need to include?

I'm just trying to find out what specific things I need for "the whole package".
I can imagine doing a Vue project and then learning React later. But I just don't get how all those tiny things are connected. AFAIK today stuff like Babel and Webpack are mandatory for a JS stck, right?

Are we all weird?

I've only met 1 normal web developer before.

Which is more futureproof, Python and Django or Node.js?

Redux or Vuex are more like extension to React and Vue. Not related to the stack.

A "stack" would be something like (database + webserver + view-library or template-engine + backend)
With Node as backend, popular choices are MongoDB, express and Angular/React/Vue, doesn't mean, that you have to pick those.

>Babel and Webpack are mandatory for a JS stck, right?
You can use Webpack to bundle your code and automatically transpile with Babel, but it's by no means mandatory.
But it's necessary if you want to use Vues single-file-components.
vuejs.org/v2/guide/single-file-components.html

React fucked up development process in several ways making it PITA to learn and develop in React.

think about it
staring at a screen all day is really weird
and I'm pretty sure it fucks with your brain

how could Vue be superior when it's basically Angular 1 all over again?
Even the Angular people finally understood that two-way bindings are shit for mostly everything. Especially when your app grows beyond following some tutorial you'll be glad you went with a highly scalable solution as React instead of Angular 1.5

Also why bother learning some shitty custom directives? Just write ES6 with React.
One day both React and Vue will be obsolete (the latter probably earlier), but as the React interface is basically non-existant you will have no problems adapting to whatever comes next.

You don't have to use JSX if you don't want to.
I see litte reason not to once you're used to it, though

It shouldn't take you more than a few days to grok React, it's simple.
You don't need to learn anything else in the beginning, you can write perfectly fine React apps without Redux/Thunks/Sagas/whatever.

I work on a large React SPA (20k LOC) and 90% of the code is stateless/functional, which makes it super easy to debug and reason about the code.
Good luck managing that when you've got two way bindings shitting everywhere

Any recommendations for learning Rails other than the Odin Project?

Been working through Odin and while it's been alright so far I still feel like there's gaps in my knowledge due to how sparse some of the lessons are.

vanilla JS isn't going anywhere anytime soon,
python is the same.
can't go wrong, python has more use cases outside of webdev, node/JS will be more important in webdev

learn both better

I found "Rails 4 in action" pretty good, they cover many topics in an easy way. There isn't a "Rails 5 in action", but v4 and v5 are more or less the same.


Thanks a lot for clarifying.
I always thought FLux/Redux is a methodoly which is mandatory for writing good React apps..

But I have still problems to map the classical MCV modell (of something like RoR) on the JS tools.

I know what databases are, but for the rest, is this correct? :

Vue-router or React-router --> Routing
Vue/React --> View/Templating (chainging the DOM of the website)
Node --> Bare Backend
Express --> Backend extension to make it usable

Any other core component I forgot to build something like an image board?
(I'm not planning to build one, just as example)

Thanks.

>Express --> Backend extension to make it usable
You can still use Node as backend together with some other webserver if you wanted.

Those parts together will let you build whatever you want pretty much, but there will always be certain solutions more geared towards specific projects.

Oh my...

>Hackers Hijacked Chrome Extension for Web Developers With Over 1 Million Users

>Now just yesterday, another popular Chrome extension 'Web Developer' was hijacked by some unknown attackers, who updated the software to directly inject advertisements into the web browser of over its 1 million users.

thehackernews.com/2017/08/chrome-extension-for-web-developers.html

Most people either enjoy working with people (teachers, psychologists, physicians, etc), or working on concrete things (say, designing buildings, making cars, etc, etc). We do either. So that's put us in the other camp, with those who like working on abstract things, like ideas, art, or software.

That was some deep shit right here..


Cool, thanks!

Yeah, basically we're are in the same "3rd way" camp as artists and philosophers.

>get node
>get the react starter app
>takes no knowledge so far since any info is provided
>try to add an express server as backend
>hint: use proxy in package.json of your react app

With express running you can do your first crud api app.

Anybody who installed that shit is retarded anyway.

Guys, where should I buy my domain name? I've already chosen my VPS provider, thanks to the OP, but I have no idea of what to do for the domain name. They are so diverse, I have no idea of who should I trust.

namecheap

I've got 4 domains from Gandi and I have zero complains, they give you free SSL for a year and their prices are pretty competitive.

I've been buying mine through AWS route 53, but I think they actually just resell Gandi. So Gandi is probably a good option.

Wish I had mates irl into web development.

Installed Morgan to log http requests, It worked fine yesterday on a PC but now on a Mac it is doing everything twice, what's wrong?

I am doing a filterable Sup Forums frontpage in react. It grabs json from Sup Forums api of a set of predefined catalogs. Json gets fetched using express api. I can display the data, the images tho won't show in the browser only their alt. I use:

Is there something I'm not considering? Oh, I also tried Iframe only pictures that where cached showed up while they didn't show up while using img tag

i have an app that started doing that yesterday...

had the same issue

referrerpolicy="no-referrer"

I am using mozilla console and spreadshit for learning js. Is there better text editor to use that will simulate a console without bothering any browser?

Give your honest opinion on Bootstrap. Are you guys contrarians who continuously rebel against what is popular or do you appreciate Bootstrap and its intuitiveness?

Just stick to your millennial fgt shit bitch boy.

I could listen to Brad Traversy's brutish-but-smooth Boston accent all day

Are databases as service a meme or the future? I'm currently testing Mongo DB Atlas and it is pretty nice.

Thinking about C#. Should I use .NET Core 1.0 or is 2.0 mature enough already?

>Are you guys contrarians who continuously rebel against what is popular
Weirdly enough seems to be completely opposite to regular Sup Forums, or else people here would give a shit about making stuff work without JS. Basically /wdg/ is full of relatively normal people, combined with the Sup Forums-ingrained deep hate for pajeets.

>Basically /wdg/ is full of relatively normal people
Which is why it's actually shittier than the rest of Sup Forums, an already low-tier board.

Apologize for making web 2.0 crap.

thx that was the hint needed! have a waifu

its okay, it allows to collect ez cash

Im finishing codeacademy Html&css course, where should i continue to study html and css?
Im intenting to start studying JS on codeacademy, but honestly im still feeling like just above begginer level, like i know some stuff, but i dont feel confident in my html and css skill at all.

>tfw using templates from various YouTubers for web design portfolio since you can't be bothered to make your own designs and just want to get some money through Upwork

Just start building shit. Learn bootstrap. You can take those bootstrap examples (v4-alpha.getbootstrap.com/examples/) and just build your own portfolio etc. This is what i did before i got comfortable with css and html.
also codepen.io is a nice site if you wanna see how other people might've done something

What is the most complicated thing you made in basic JS?

I worked a bit more on that Sup Forums stat site I posted here before.
Started calculating board activity and added a timeline to compare boards over the last week
The board-list also contains more boards now. Basically everything that isn't outright nsfw or image generals like /c/, /wg/, etc.

Would be interested in some feedback, especially regarding the layout and usability.
Not fully happy yet with the buttons above the timeline graph, but I couldn't think of something better so far.

chanstats.info

what type of personal information should i put on my github portfolio?

What's the difference between posts per minute and activity?

My email obfuscater. :^)

I wrote an explanation on the bottom of the page.

Activity is the current posts-per-minute rate relative to what the board usually gets as max during the week.
So if a board usually tops out at ~20ppm and is currently at 30 because of some happening, then that would be an activity rate of 150%.

i miss XML

what are you using for the graphs?

chartjs

I looked at D3 initially, but figured that it's too much, compared to what I actually needed and went for something more basic.

I can't be bothered to read your post, but keep up the good work my man.

>Basically /wdg/ is full of relatively normal people, combined with the Sup Forums-ingrained deep hate for pajeets.

I think /wdg/ is good because it's people who actually program, as opposed to a large chunk of Sup Forums who just argues about Intlel vs Ayyymd.

It's hard to pinpoint why it's better than /dpt/, but I think /wdg/ is a more specific and smaller group, so people here have more in common to talk about.

Probably a scraper I built in Electron for a streaming site.

Why did I always figure Sup Forums was the second largest board by a significant margin?

this is actually very usable and looks real good
good job

I'm trying to grab a JSON object from a server with jQuery, but Chrome gives me:
> No 'Access-Control-Allow-Origin' header is present on the requested resource.

I'm using:
$.ajax({
type: "GET",
url:"exampleurl.com/data.json",
xhrFields: {
withCredentials: true
}
}).done(function(data) {
console.log(data);
});


I was trying to use $.get before, but same issue. All the fixes found on Google do not fix the issue.

What do I need to add here?

>it's people who actually program
No it's not.

At least eighty percent of the posts on /wdg/ are from wannabees trying to cash in, about to wash out of their first app after the tutorial hand-holding session ends.

Another ten percent are just web developers (as opposed to actual programmers), and not even decent ones. They stick around because answering questions asked by the wannabees makes them feel important, big fish, small pond.

The last ten percent are actually decent programmers who are just here to tear apart the garbage code samples of the former group, bitch about the industry, debate any actually interesting topic which (rarely) comes up, and shitpost.

It's actually a pretty accurate cross-section of the whole web industry.

use a CORS proxy

This is a cross-origin issue. Your hostname is different from the hostname you are sending the request to, and you haven't configured cross-origin resource sharing.

>make api call to your server
>let your server fetch the data
>let your server return the fetched data to you

I did this and removed the xhrFields from the function, all good now. Thanks nice user.