/wdg/ - Web Development General

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 - 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: wdg2.jpg (1200x720, 180K)

Other urls found in this thread:

npmjs.com/package/ng-static-site-generator
github.com/jorgebucaran/superfine.
jsfiddle.net/1nytkebs/
pastebin.com/UVju6ZKr
github.com/johndatserakis/koa-vue-notes-api
expressjs.com/en/api.html
twitter.com/SFWRedditImages

Static site generator for Angular when

I would like to have a website so I can embed a third party chatbot. It's for learning purposes, so I would like to avoid registering domains and anything that costs money. Even if it's just for a week or two, it would be ok.
Which are my options?

npmjs.com/package/ng-static-site-generator

Hi I'm just getting into webdevs the and after getting a hang for the basics of html, CSS and JS I have a question regarding all the frameworks and shit like jQuery, what and why should I learn after the first 3 languages ?
I know it's a broad question but still, what the fuck do I do now other then getting better at vanilla JS , html and css ?

Attached: aXm1800xjU.jpg (650x650, 54K)

>Inb4 just read the roadmap
I read it many times but it only tells what to do and not why to do and what it entails ; very two dimensional

>last updated 2 years ago

wew

learn react, heaps of react jobs out there right now

isnt angular dying anyway

So... where can I learn about SEO? My fucking boss wants me to learn that shit but the info I gathered from google makes me dizzy.
Also, why should I learn that shit? isn't that supposed to be the job from the marketing department?

your boss can't afford a marketing department so he gave the task for you to handle

Not neccesarily. Think of it this way, if you know how SEO works and what search engines look for in websites, you can code websites that are well searchable and indexable - like using semantic HTML etc.

netlify, github pages, surge, zeit now
2nd for a frontend framework
If for a job, google whats popular in your area (cant go wrong with React like the other user mentioned).
Otherwise Vue is a great option as well.

>netlify, github pages, surge, zeit now
Thanks

Damn, how long will it take meto learn this crap?

What would be a good javascript project for a complete beginner?
I've only been at it for about 2 months now but I want to try and use what I've learnt to make something (simple).

SEO is a meme, there's nothing to "learn".
You hit the checkboxes google wants you to hit for better rankings.
You improve the site using lighthouse and other similar tools like accessibility and page load speeds
You hit a niche keyword or two so you come up first when people google those things

That's basically it. Everything else comes down to shilling your shitty app on social media

I am trying to understand the small view layer library 'superfine' from the same guy who created 'hyperapp'. Here is the link to the library: github.com/jorgebucaran/superfine.
They somehow use the concept of recycling what I don't understand. The term is not used very often because I could not find a lot via google.

In the documentation they say:
"Recycling: Superfine can patch over your server-side rendered HTML to enable SEO optimizations and improve your sites time-to-interactive. All you need to is create a virtual DOM out of your container using superfine.recycle, then instead of throwing away the existing content, superfine.patch will turn it into an interactive application."
import { h, patch, recycle } from "superfine"

const container = document.body

let lastNode = patch(recycle(container), nextNode, container)


I would be thankful for any hint explaining how this concept works.

Web development newfag here, searching for some good waveform visualizer for the browser.
What's the deal with these new libraries requiring to install packages using npm and what purpose does it serve? Javascript is run clientside anyways and you got to include these things using the tag.

Attached: 1546882667526.jpg (960x953, 127K)

jsfiddle.net/1nytkebs/
I am getting the error
>TypeError: directory[i].files is undefined
On line 46 of list.js; however the console shows that i = 2, and console.log(directory[2].files) returns an array of objects.

>Web development newfag here
>Javascript is run clientside anyways and you got to include these things using the tag
>he is teaching us what is what while being total clueless entitled faggot noob

Because almost everyone uses more than 1 JS file, and almost everyone uses things like webpack and babel to minify files and let you use all the latest features.

When you import a file for example, if you have some massive library that's 1gb in size but you only import one function to add 2 things together, you obviously don't need the whole thing. So with tree shaking it will basically only import that single function when you bundle your app in the end.

because you are doing i++ in the second loop instead of x++, so you have an infinite loop.

for (var x = 0; x < directory[i].files.length; i++)

It's fairly common to have a build step now and NPM is a good way to manage your dependencies, that you pass to your bundler or build-script for further processing.
Probably a similar thing to Reacts hydrating.
You render usable HTML on the server-side already and then let the client-side library continue from that already existing content.

Shit, I'm a retard. Thank you.

Yes, """link building"""" is just shilling your shit on reddit, twitter and shitty medium posts, like I said.
""""on page SEO"""" is just having pages with content on it, holy fucking shit. No way?

Who are you trying to fool? """SEO""" is one of the biggest scams I've ever seen. You can fool 50 year old boomers that don't understand the internet, but what's the point in trying to fool other developers? Makes no sense.

What's the correct way to call a WebAPI via http?

Doing a request with the parameters as part of the url or is there a different way to pass parameters?

Any guide for that?

what's the best way to detect a mobile user? I know I can use screen width and shit, but I was wondering if I could do it some other way with jquery

>jquery

here you go

Attached: xxxx.png (945x473, 94K)

I'm actually amazed someone did this
wouldn't this require constant updating, tho?

that's a file from the WebGL release of a Unity export (UnityConfig.js)

Every time you export a Unity game (C#) to webGL, it generates a huge ass JS file and browser detection is included in the export

I've uploaded to pastebin the pic i posted

pastebin.com/UVju6ZKr

but nobody has told him a good waveform visualizer library yet

Please can you try to run this app locally?
github.com/johndatserakis/koa-vue-notes-api
I do everything according to manual, i run redis-server alogside with it and i run app with: npm run watch
Problem is: there is always error: EADRINUSE 4000 even tho i closed every other terminal, so its not because node running somewhere else! Please help. Do git clone and install redis or whatever and run npm run watch inside directory. Please help!

>You'll need to make sure you have redis running

nigga i'm not running a redis db just to run your app

can't you just check which other program is using port 4000 via the commandline?

Front end from new to old: Vue, React, Angular.
Back end: Go, PHP, Node, Java

Go for what's being in high demmand and good pay in your area, see the ammount of people applying as well.

Attached: 1543540202405.jpg (577x1024, 71K)

>that image
kek

muh /wdg/ folder doing the work

then how do i make CRUD with web interface and 2 tables in mongo?

>muh /wdg/ folder
heh

Attached: t_pajeet.jpg (1920x1080, 219K)

After trying out Angular and Vue for a couple of weeks:
Is there anything positive about Vue other than it being lightweight

>
The absolute mad man!

Attached: 1546033164051.jpg (603x324, 105K)

What's with all the veiled condescending opinion posting this thread?

I think very few people have used more than one framework and of those even fewer tried Angular.
Only tried Vue and React so far. A long time ago I tried checking out Angular, but it didn't play nicely with WSL from what I remember and since then I didn't have a reason to revisit it again.
If you used both Angular and Vue, maybe post your impressions and what you like/dislike. Could be very informative.

Working on creating the perfect lead generation page

WIP

Attached: 1549995240902.png (2880x1800, 996K)

Can someone tell me why the Instagram plugin in Gatsby.js doesn't show the posts in chronological order?

>A long time ago I tried checking out Angular
Angular or AngularJS?
Whenever I see a post about AngularJS it looks absolutely ugly.
I started using Angular in version 6 and have now used it in at my job up to version 7.
>maybe post your impressions and what you like/dislike
I have not actually completed a project in Vue because at some point I always got frustrated with some quirks in Vue.
E.g. inside a Vue component and it's methods, you can only use 'this' to get the Vue instance if it's written as a regular function
>pic related
methods: {
exampleFunction: function() {
console.log(this) // works
},
otherFunction: () => {
console.log(this) // undefined
}
}

as someone who uses arrow functions basically everywhere, this one bothers me since at this point it's engraved into my brain. There might be some way to get this working, but everywhere I looked it just said "use function instead of arrow".
Apart from this (ha), I feel like the communication between parent and child components in Vue does not work as clean as in Angular.
My major concern with Angular is it's bundle size. I hope this gets fixed with the upcoming Angular Ivy compiler.
Angular projects have a lot of boilerplate pre-generated, which might be scary for newer developers, hence a lot of new people trying out Vue nowadays, but right after completing Angulars official "The Tour of Heroes" tutorial, it becomes a lot less frightening.
I keep reading good stuff about Vue and I still want to try out VuePress for static blog rendering.

So what's the deal with React?

Attached: Screenshot from 2019-02-14 20-09-17.png (619x249, 26K)

Not to be mean, but it looks sooo shit, copy shit for now is my advice. Even colors. Other than the red, the red is fine.

dude that's not a problem with Vue, but how JavaScript works, you are supposed to use arrow function if you want the function to not have it's own this value

I love not doing homework, risking it at exams is where it's at ;^(

Hey guys I just got an internship at my school to make a website using drupal. I have some experience with html javascript and css. I've used other CMS like square space, tumblr themes and wordpress. What should I expect with drupal? they just want me to make links for other pages and make the layout look nice.

this should be easy right?

NaN = 5;
console.log(NaN); // NaN

undefined = 5;
console.log(undefined); // undefined

Yes it is a JavaScript problem, but when working in e.g. Angular you never hit this problem because you'll always be inside a class and 'this' will always expose properties and methods of the class (instance) you're working in => great for workflow.
So when I'm inside of a Vue component and write 'this', I expect it to behave similarly but it obviously doesn't.
My opinion of this is obviously also highly subjective, so you don't have to agree, but this is one thing that makes writing and working in Angular more fun for me than what I've done in Vue so far

If you have to make a simple page Drupal is great.
Just hope you never encounter a point where you'd have to write your own Drupal extension because, even if there already is an extension for your case, it will be outdated and for an earlier version of Drupal.
And you'll learn to fear updates.
Have fun!

Attached: 1549543070168.jpg (540x720, 31K)

>this should be easy right?
You'll run into some troubles, but since the task is quite easy I think you should be fine. I addapted some js program to drupal once, not so dificult.

you should look up how "this" works n javascript, not trying to school you, but it might help you to understand JS a little better, since you didn't seem to have encountered the "this hell" in Angular,

Okay cool, any tips for learning drupal?

I was just going to watch some youtube tutorials

heresy

how do sites with objectionable material stay up forever? Can nobody do anything technically?

not saying you should go there but such as 155chan(dot)gr

define "objectionable material"

go to the site in that post and look around, it's been up for years

hell it's even indexed by bing for images

Generally it depends on whether you're making a GET request or a POST request. POST requests have a body, where you can put parameters. With GET requests you only have the URL.

Which type of request a given endpoint uses depends on what that endpoint is doing semantically, as well as what data you're expecting to pass to that endpoint. (If you need to pass a large JSON object, you need to put it in the body of a POST request. And that situation is usually semantically a POST.)

lmao. The /heaf aside, that code is nonsense. There's no body, and the head seems to just be in the middle of the page.

An advantage imo is that you can get started with less boilerplate.

as good as a penis enlargement ad on a porn website

>join company after years bouts of depression and unemployment
>Bring companys new web project up to 20th century during the 2 years
>Am now offered position of architect or lead dev
What should i prepare myself for?

Attached: maxresdefault.jpg (1280x720, 99K)

Noo, this is WIP,

external lead pages are meant to be concise to the point and with the main point of conversions and generating leads.

>Noo, this is WIP
ok then

Holy shit, congratulations user, what did you do for the company exactly?

Fullstack devving, converting shitty aspnet beginning of a site in to spa app with webpack and bells and whistles. Implementing identityserver, completing all tasks on time

How long would you think it would take to be proficient enough in JS for employers to hire you ?
I don't want to be out of a job forever and even though I already understand some very important things in JS I just don't want to make an ass of myself when I try to apply with my 2 months worth of knowledge in JS.

Am I missing something here or is React's syntax/way of doing things an absolute mess compared to how nice Vue is? Why would anyone choose React? Is there some things that only React can do because of it's syntax/way of doing things?

It just came before vue and gained more momentum. We use vue and it is perfectly fine.

>spa app with webpack and bells and whistles.
what does that mean, what does your page do?

It is more of a fullblown software suite but i cant go in to much details. Spa meaning single page application that runs in your browser

Think it was Angular2

The way I do it and see it elsewhere, methods are usually defined like this, which slightly shortens it
methods:{
exampleFunction(someArg){
console.log(this.somethingElse + someArg)
},
anotherFnc(foo){
...
}
},

And like the other user said, arrow functions weren't made to universally replace function expressions. They are simply a new syntax option.
>I have not actually completed a project in Vue because at some point I always got frustrated with some quirks in Vue.
Pretty strange desu, at least compared to React I find Vue more approachable. Not that React is hard to get into either, but it's a bit more verbose at first.
I really like Vues single-file-components. Also the way you update your state (just use the variable) compared to Reacts default way of .setState() or the new Hook API functions.
When I first saw JSX I disliked it a lot. After using it I don't mind it that much anymore, but given the choice I still prefer Vues style of HTML templates with directives.
Like you with Vue, I have only used React a bit though.
But I know I would be just fine with using it, if it happened to be the only option for something.

it's almost like the purposefully badly written IT scenes on various TV series

React has the bigger community and the backing of a large company, which takes care of its development.
That probably makes it immediately more appealing to other companies than a project started by some ex-Googler, that people haven't heard of before.

>They are simply a new syntax option.
Except they arent just syntax but functionally different. Lambdas dont create a new this-context, so to speak

yeah, that's what I meant. Should have been more clear, that it's not just an alternative way to write the same thing.

>not saying you should go there but such as 155chan(dot)gr
HOLY SHIT

What exactly does express.urlencoded([options]) do? Been looking for info but the explanations are kind of convoluted.

That's what a honeypot looks like, I know because I was to one once that revealed it's honeypot status if you browsed it deep enough, and all chans filled up with CP happen to be a copy of that site.

read the docs, boomer
expressjs.com/en/api.html
>The following table describes the properties of the optional options object....

>HOLY SHIT
what's in that website?

didn't open btw

light CP, it's a honepot by probably german inteligence or some other agency of the sort

just go on bing, type the name of the chan, go on images safe search desactivated

I don't mean the options object, I mean the urlencoded function what does it do?

>This is a built-in middleware function in Express. It parses incoming requests with urlencoded payloads and is based on body-parser.

>Returns middleware that only parses urlencoded bodies and only looks at requests where the Content-Type header matches the type option. This parser accepts only UTF-8 encoding of the body and supports automatic inflation of gzip and deflate encodings.
Have no idea what any of this means

A new body object containing the parsed data is populated on the request object after the middleware (i.e. req.body), or an empty object ({}) if there was no body to parse, the Content-Type was not matched, or an error occurred. This object will contain key-value pairs, where the value can be a string or array (when extended is false), or any type (when extended is true).
But this is done by express.json(), not this.

honeypot in what way?

how would they get anything from displaying all that content and bing and other search engines indexing it so it comes up when you search for seemingly innocuous keywords

If the data was sent as JSON, using Content-Type: application/json, you will use the express.json() middleware:

const express = require('express')
const app = express()

app.use(express.json())


If the data was sent as JSON, using Content-Type: application/x-www-form-urlencoded, you will use the express.urlencoded() middleware:

const express = require('express')
const app = express()

app.use(express.urlencoded())

>light CP,
some if it is not that light!

>honeypot in what way?
probably log all the IP's that connect to the website

and what would you do with that info? You can't bust someone just for viewing a webpage

>CP is illegal, let's do something about it by hosting gigs of it and allowing anyone anywhere to view it

That makes sense.

>and what would you do with that info?
all sorts of things. if you see that a IP is accessing too much the website, something is suspicious. Or getting to many requests from a IP. could be a web scrapper for example.

suspicious in what way?

how many requests are "too many" and what are they going to do about it? I just fuskered the site tbqh should i be worried?

someone is knocking on my door

hold on

I've seen hard one, that's light, trust me.

0_0

that's what being a semi-oldfag is like, even if you didn't meant to you ran into some CP being spammed, or some honeypot being posted, the first ones had the good stuff, the new ones get lighter and lighter...

Javascript

Should i care or define classes in js based on how they were defined before es6 ? comming from php it's extra work seeing all that classes and method are defined in 3 different ways. Seems unnecessary confusion(at least syntax wise). Can i just simply go :

>Class Classname() {
> constructor(p1, p2, ...){
> //code
> }
>}

?

got into a meme coding camp that costs $15k. have been earning decent money in an unrelated field for the last 5 years and have a bunch saved up

i want to be spoonfed this programming shit but will probably fail out anyway and continue on my path of self-destruction

>got into a meme coding camp that costs $15k
holy shit dude! I hope you the best anyways brosky, put some effort into it!