/wdg/ - Web Development General

>Getting mad about anime on Jow Forums

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

>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 (embed) - Everything PHP

>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: 1549627222904.png (1280x720, 252K)

Other urls found in this thread:

reactjs.org/docs/hooks-reference.html
developer.mozilla.org/en-US/docs/Web/API/HTMLElement
developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
flukeout.github.io/
twitter.com/SFWRedditGifs

hi friends. i was wondering where the thread was. it's the WEEKEND!!!

i'm gonna be working on my Jow Forums clone this weekend. i hope to have it in some demoable state soon. you can currently post a thread and post a reply but that's it. i probably won't get image uploading working this weekend but it should be pretty much complete outside of that

it's built in react, graphql/knex + postgres. i wanted to play around with graphql and it's been really fun.

Attached: Screen Shot 2019-02-09 at 09.00.58.png (1478x812, 174K)

I need help on a web application

> Friends
Sorry but I'm no friends with faggots

that's good because i'm not friends with mean people

: (

Javascript func question:

function(pic),
console(pic2);

How come revStr come as undefined?

Attached: Capture.png (1029x296, 52K)

if you convert an undefined variable to a string it'll say 'undefined'.
initialize it as an empty string instead.
+= is basically just revStr = revStr + inputString[i];
which is 'undefined' + inputString[i] for you.

this pretty much var revStr;

is the same as

var revStr = undefined;

And see what happens when you type this into the chrome console: undefined + ""

don't you just love javascript

let c
>undefined
String(c)
>"undefined"

You should be glad it doesn't throw and show a blank page instead

Attached: [HorribleSubs] Beelzebub-jou no Okinimesu mama. - 07 [1080p].mkv_snapshot_15.59_[2019.01.02_01.44.21 (1920x1080, 763K)

So I kind of have zero knowledge on webdev, but really want to learn it
I have this project in mind that is a social network platform with money exchange service and want to learn it while building this platform
What do I need and how do I start?

what do you want? JS to do the thinking for you and guess what you want?

thanks for the idea nerd im building and monetizing this

you are at least in the right thread
Read the OP.
Check the video and the roadmap.
Learn HTML, CSS and JS.
After that you can plan things in further detail.

Doing anything related to financial transactions yourself is normally something you'd want to stay as far away from as possible, when creating a site/app.
In almost all cases it's recommended to use some service to handle that stuff for you, because of the massive security concerns, where unlike with other things you have no margin for errors with that.

Jokes on you I only described the very basics
Thanks for the advice, m8

how much will the influx of journalist coders lower the average wage for developers?

This has been implemented 100+ times. That's what webdev and development all in all are all about. You have some idea but 30 seconds of googling shows this is around for 20+ years and either failed or saturated.

0

>journalist coders

?

Attached: 1548771884176.png (680x521, 115K)

>>journalist coders
there is a #learnToCode hash tag trending, encouraging laid off journalists to learn programming...

I remember eyeing an article that claimed the trend of telling laid off journos to learn to code was coming from the alt-right. If that's true, fuck them.

It's a call back to articles, where journalists wrote about laid off coal miners and how learning to code is the solution.
Now a bunch of journalists got laid off themselves, which made some people tweet the same thing to them.

Attached: VlxXXss.jpg (1200x1141, 199K)

There's actually only one semi-successful analogue for my idea and one half-assed site that uses the same core principle. I described it vaguely.

interesting, thanks.

>I remember eyeing an article that claimed the trend of telling laid off journos to learn to code was coming from the alt-right.
Yes goy it's coming from the evil alt-right nazis, you need to report it every time you see it.

Attached: 1517860333692.gif (452x523, 4K)

What's a good way to setup a vue environment and manage the dependency hell of webdev? Wanna make a nice web front end and vue seems like a good framework.

look at this mess
I really fucking wish to use C# again

Attached: 2019-02-09-223654_1920x1080_scrot.png (1920x1080, 424K)

Maybe more /sqt/ than /wdg/ but what's a simple way to keep a bloatless blog?
So far I'm considering to export my .org files to html and log each new entry manually to the index.html but that may be too rudimentary.

vue-cli

you are missing out is the only thing I'm going to tell you

And there's also a reason for that, namely the idea is likely not marketable. There are millions of such websites but you know nothing about them as they are dead

>dependency hell
what kind of dependency hell are you thinking about?
If you want to go manual but still mostly hassle free I would recommend Parcel to bundle your site.
For a boilerplate Webpack setup you can use vue-cli like the other user said.
For a more framework-y approach (with SSR and all that stuff) you can use Nuxt.
A static site generator like Gatsby or Vuepress

just code them manual ffs. stop promoting this shitty webpack/js compiler meme

You still write your components manually.
This way instead of adding a bunch of script tags and just blindly loading external JS, you can manage your dependencies properly and make use of features like single-file-components, minification, tree-shaking, SCSS, using newer JS syntax and transpiling for older browsers, etc.

>tree-shaking
absolute brainlet here, what's that?

>absolute brainlet here, what's that?
that's what web pack does by default, that is organise imports in such a way that there are no duplicates and that unused imports get ignored, to create smaller files..

With the newer ES module syntax, you can have named exports/imports.
Then you can specifically only import the parts you actually need and Webpack can discard the unused dead code and won't include it in your final bundle.

that's sick, I remember some dude doing this manually some months ago

nuxt js

not very good with react but whats the easiest way to go about feeding api data to some text/list element and updating it in x time intervals?

Are you using classes or the new Hooks API?

no i'm using ajax

brainlet.

His question was very relevant. You must not know anything about react to respond in such a manner.

I meant for your React components.
Whether you are using class components or function components with the new Hooks feature reactjs.org/docs/hooks-reference.html

The official docs will teach you how to do, what you want.
Specifically the section about state and lifecycle.

switch to vue

>the idea is likely not marketable
That's the problem, yeah, it will rely on human conscience too much but I'm trying to find a way. It definitely won't work in America, I'm more inclined towards Eurasia

Attached: 1444651622612.jpg (1200x794, 169K)

new computer?

no, just show it to you what a mess PHP 5 is

Did you intentionally set up your theme as poo in loo brown for doing PHP?

yep. The theme reflects it. I am so mad right now, I wish I can drop this shitty job

you're doing freelance?

aye. The client insisted to use shitty PHP 5 hosting for their hotel booking system. At least they paid me quite well desu and they allow me to use VueJs for the UI

that's awesome
how much experience do you have that got you in freelance?

I got a link from someone from IoT competition, we talked and he got many client. After this project done, I'll be soon working into Hospital TPS. I hope we can convince the next client to use something robust and manageable than this.

you write like a ESL
PHP is perfect for the job desu

what would you use instead?

>_model.php
yikes

Yes, English isn't my native language.
C# obviously, since it easy, does validation checking for me, strict data type, great scaffolding system.
I too yikes desu.

so is C# the supreme meme?

yep. Also learning it to create mod in Bannerlord of course :^D

sweet, what do you wanna create?

>not using laravel
>php5 instead of 7

You're retarded.

I know I can use user agent styles to overwrite css styles of other websites, but can I write an extension that overwrites browser styles (notifications specifically)?

If Bannerlord real, I want to make 14th c. Europe mod and experiment with socket stuffs to include co-op system or persistent world between players. For the assets, I will use Atilla 1212, since they're open source anyway.
I don't have option. So no laravel, and I have to query all these SQL and validation manually.

sounds exciting breh, godspeed

no bully pls but is there such a thing as free hosting with database and SSH access? i just want to play around with my laravel website , to see how things like artisan and composer behave when online, cant be same and easy as in local :(

heroku?

have you tried it? whats it like?
i will check it out

Complete javascript noob here. Say I have some strings with a class name, like these:

Apple
Snake
Kiwi


What is the easiest way to grab all these and store them as an array in a variable?

maybe this
var x = document.getElementsByClassName("string");
let arr = [...x];

and why not let x

I only get [object HTMLElement] when I try to print them.

I'd like to be able to print out a nice comma separated list containing Apple, snake and Kiwi from the variable.

[...document.querySelectorAll('p.string')].map(el => el.text).join(', ');

how/where did you aquired such wizard-tier knowledge of js?

>I only get [object HTMLElement] when I try to print them.

that's because you have made an array of html elements. dude take a few minutes are just google htmlelement and then open the first result: developer.mozilla.org/en-US/docs/Web/API/HTMLElement

you might find a function or an attribute to just retrieve the inner text of an element

What browser are you using? Most browsers print HTMLElement objects in a format conducive to debugging, either as HTML or in a format that makes it obvious that they are HTML elements.

Unless you're explicitly coercing each element to a string before you print them, in which case you'll get something like [object HTMLElement].

And this may seem like nitpicking but when you say
>Say I have some strings with a class name
they're not really strings, they're HTML elements. And you can't just do element.toString() to make an HTML element into a string. You have to do something like element.innerText(), to get the actual text currently being displayed inside that HTML element.

I only get ", , " as the result..

Also, is it possible to only get those from the class "string"? So it doesen't grab this:

Red

Thanks for helping me user!

>What browser are you using?

Waterfox

Thanks, I'm reading now. As I said, I'm a beginner so it's even a challenge to know what to google for. But I'm getting there are I am studying all the answers ITT to try and figure out what they do.

>they're not really strings, they're HTML elements.

Thanks for the insight. In my mind, any text was a string no matter where it was located, inside a function or in the HTML. But I guess not.

>And you can't just do element.toString() to make an HTML element into a string. You have to do something like element.innerText(), to get the actual text currently being displayed inside that HTML element.

Hmm, I see. brb I'm gonna try some things.

The "p.string" means only p tags with the class "string", for the one you posted now it would be "p.colors" instead.
Read up here: developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll and try it out in your browsers console.

it should be `const`

>Waterfox
kek

that's because text isn't a property of a html element so the dot map returns an array of n empty elements and you are joining them with ", " so you only get the joining characters in the resulting string. javascript is funny because can access whatever you want on an object and if it is defined, you will, oddly enough, get undefined.

Not the guy you're replying to, but his code doesn't work because .text isn't a real property of HTMLElements. There are different properties that do this, but you probably want el.innerText in place of el.text.

And his code specifically does grab elements with class="string" and element type 'p'. That's the function of the querySelectorAll('p.string').

Query selectors are something you'll learn more about when you learn CSS. After you have the basics of CSS down, CSS Diner is a fun little game that guides you through all the different selectors:
flukeout.github.io/

but why, maybe something chages

just tested this and it works

using innerText instead of text
[...document.querySelectorAll('p.string')].map(el => el.innerText).join(', ');
// "Apple, Snake, Kiwi"

>flukeout.github.io/
>tfw can't select the plates

Attached: 1530277072146.jpg (603x587, 68K)

>The "p.string" means only p tags with the class "string", for the one you posted now it would be "p.colors" instead.

Gotcha! (Also, that's really neat.)

>javascript is funny because can access whatever you want on an object and if it is defined, you will, oddly enough, get undefined.

I see. (Also, that's not that neat.)

>Waterfox
>kek

I also use Brave. I at least want an illusion of privacy when I browse.

Trying this now.

With const you can still make modifications to the object.
You just can't assign a new reference to the const variable, that would point to another object.
I believe in you user

I checked the solutions, that was easy, but it's counter intuitive what they're asking you for in the text area

>whole /wdg/ crumbles and burns down on a simple task on taking contents of 3 html elements and put them in array in javascript

forgot to take your meds?

Alright, cool, but you should really understand how/why this works.

Here's an expanded version of that user's one-liner:
// get all the elements who have element type 'p' and class="string"
let nodeListOfStringNodes = document.querySelectorAll('p.string'); // of type NodeList

// convert to Array type so we can use Array methods like .map()
let arrayOfStringNodes = Array.from(nodeListOfStrings); // of type Array, containing HTMLElements

// the .map() method takes an inline function, which is applied to each array element, and returns an array of results
let arrayOfStringContents = arrayOfStrings.map(function(element) { return element.innerText; }); // Array of Strings

// the .join() method joins the contents of the array using the joiner string which is passed in
let completeString = arrayOfStringContents.join(', ');
console.log(completeString);


His [...list] thing is basically the same as Array.from(), and his (el => el.text) is arrow notation for inline functions.

>just tested this and it works

Wow! Thanks! Also, that's very sexy.

Attached: cwtf.gif (322x225, 2.05M)

Thanks for explaining it!

I had to do some small changes to make it work:

// get all the elements who have element type 'p' and class="string"
let nodeListOfStringNodes = document.querySelectorAll('p.string'); // of type NodeList

// convert to Array type so we can use Array methods like .map()
let arrayOfStringNodes = Array.from(nodeListOfStringNodes); // of type Array, containing HTMLElements

// the .map() method takes an inline function, which is applied to each array element, and returns an array of results
let arrayOfStringContents = arrayOfStringNodes.map(function(element) { return element.innerText; }); // Array of Strings

// the .join() method joins the contents of the array using the joiner string which is passed in
let completeString = arrayOfStringContents.join(', ');

Man, just chain it

Yeah, sorry, I changed some variable names to make them more clear and missed a few.

Context, man. The whole point is to make it more clear and readable, one step at a time.

good "essential" chrome web dev extensions?

uuh, maybe a color picker and the devtools for React or Vue if you are using one of those.

Anyone here familiar with npm errors? I jsut downloaded the latest version of nodejs (in executable ZIP form), extracted it to a folder, added the appropriate env variable in Windows. I globalled installed vue/cli and the installation worked fine. However, if I run:
npm update -g

I get this error:
npm ERR! path C:\Utils\nodejs\npm.cmd
npm ERR! code EEXIST
npm ERR! Refusing to delete C:\Utils\nodejs\npm.cmd: is outside C:\Utils\nodejs\node_modules\npm and not a link
npm ERR! File exists: C:\Utils\nodejs\npm.cmd
npm ERR! Move it away, and try again.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\user\AppData\Roaming\npm-cache\_logs\2019-02-09T23_02_41_358Z-debug.log


Anyone know why a simple command to update all global packages wouldn't work?