/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: wdg_nn.jpg (549x720, 61K)

Other urls found in this thread:

codepen.io/user/pen/pYXKZo
googleapis.com/'
github.com/serilog/serilog-aspnetcore/blob/dev/samples/SimpleWebSample/Controllers/ScopesController.cs
github.com/mapbox/node-sqlite3/wiki/API#statementeachparam--callback-complete
blog.shippable.com/why-we-moved-from-nosql-mongodb-to-postgressql
developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie
medium.com/dev-bits/a-guide-for-adding-jwt-token-based-authentication-to-your-single-page-nodejs-applications-c403f7cf04f4
developer.mozilla.org/en-US/docs/Web/HTTP/Headers
twitter.com/SFWRedditImages

I like React because it feels close to native js

What is the most in demand HTML templating engine jobs-wise?

PHP

5-10 years ago all anyone said about PHP was that it's dying and to not start new projects with it, were they just memeing or did it go though something of a renaissance since then due to Laravel?

>mfw jQuery PHP stack

Attached: f95[1].png (600x1067, 1009K)

For me, it's java.

I've just learned that if parent has display: grid and child has margin: auto the child gets centered both vertically and horizontally. Weird behavior, but it shorter than fucking around with
display: flex;
justify-content: center;
align-items: center;

Attached: 1507223400665.jpg (672x704, 81K)

I had that happen to me in a wordpress site I was tweaking the css of, really cool trick, but since I know about display flex I fo flex all the way

Has anyone used a JS backend framework like Sails, Adonis or Nest?
What were your impressions with these?

It's not that I am looking for one to use right now, but I am simply interested in the options, that are out there.
Only ever built very simple APIs, for which Express was always enough, but I can see how a more featured and structured framework might be a good tool in certain situations.

oh, that's quite nice.
One advantage I can still see with the flex though is, that you can center text in a single element with the center/center way, without needing an extra child element.
But otherwise really neat. Never seen that before.

I'm working on a Vue + Ionic 4 project.
It's going pretty well considering it's supposed to only be an alpha.

>Ionic
how's that? I didn't know you could use Vue on Ionic, had absolutely no clue, thought it was it's own esoteric language appart from everything, how is it, qucik rundown on Ionic?

check out PHP 7

What are some bullshit tools I can add to my resume? Should I put Git even though I never used it?

No, you should instead use git for your next personal project.

okay mom

You are encouraged to use their components, but it is quite straightforward and normal HTML seems to be working without any issue.
I've used Nativescript previously and Ionic feels way closer to a normal Vue development experience.
All in all, it only took me a few hours last week to get up to speed and make a shitty copy of a crypto marketcap app.

The biggest issues I've run into so far are:
- The CSS is entirely handled by an extensive use of the shadow DOM. What this means is that you only have control over a few CSS variables that the Ionic team has chosen.
- The Vuex store is acting weird, getters seem to be returning shallow copies of the state. Mutating them meant mutating the state directly, the only workaround I've found is to make a deep copy. Curiously, this seemed to only apply to Objects and Arrays while Numbers were behaving as expected.

My biggest gripe really is with the CSS, the Ionic team did not seem to find relevant to explain how to deal with it. Thankfully there are a few videos on youtube explaining what's going on.

I'm planning on checking out the native part of the framework tomorrow, so expect more from me then.

After skimming through the bullshit word and other templates, I made my CV and Cover Letter in HTML and CSS and will print it out as PDF using the damn browser. I don't care if it's unconventional. It has all the info, it's clean and it doesn't look generic.

Writing this just to give someone the idea if they are in a similar dilemma.

based

I have a javascript question. Im writing this in a function but the SECTION is closing before wrapping the content.

let divContent = document.getElementById('divContentPapa');
let divFirstChild = document.createElement("div");
divFirstChild.innerHTML += '';

let divLogo = document.createElement("div");
divLogo.innerText = "OP";
divFirstChild.appendChild(divLogo);

let stringFecha = document.createElement("div");
stringFecha.innerText = "is a fagget";
divFirstChild.appendChild(stringFecha);

divFirstChild.innerHTML += '';
divContent.appendChild(divFirstChild);

Attached: section-closing-before-wrapping.png (200x80, 4K)

Wait, what doe Ionic even buy you if you're not using their components? Why not just use Cordova?

I don't think it's a good idea to mix innerHTML and appendChild

Why? Its for a report, Im gonna clear the div after the print.

Unclosed HTML tags will automatically be closed on the browser, so adding unclosed tags to inner HTML makes no sense.
Instead of appending raw HTML to the inner HTML, use the same appendChild syntax that you're already using.

Does it matter where I put my server.js?

I just installed node and express on a vps, but don't know where to put to server.js at. Does it matter?

I'm trying to do the challenge for certbot.

Otherwise a "hacky" way is to do it though strings

const message = "OP is a faggot";
const rawHtml = `


${message}

`;

document.querySelector("#divContent").innerHTML = rawHtml;

No, as long as the server.js file isn't serving its own document (server.js) to the public.

but how will it know that server.js is the file to use for routing? Am I supposed to tell it somewhere?

I feel like I knew this, but I forgot.

Lmao I tried user

Attached: heh.png (302x148, 6K)

Your server.js is run as a process on your server machine. It opens up a point of connection to your server (e.g. Port 80, listening on your public IP). It's your job to configure the server to handle connections to the resources that you want to serve.

For example, if you want to map a folder named "public" to GET requests on "/", (I'm assuming you're using Express), you'd use "app.use(express.static("public"));"

I'd recommend reading over documentation for Express (or whatever routing library you're using)

codepen.io/user/pen/pYXKZo
werks for me

My dude its working. Thank you.

It listened on port 3000, but when I changed it to port 80 it only worked on localhost, not my server. weird.

What's the convention for receiving objects in TS?
Do you usually define a class or just an interface for the object being received as argument?

What do you mean by "receive an object"?

Does the object have a specific structure? Are some properties in the object optional? Do you already know what keys will be in the object?

Generally, if you don't know the key name but know that all keys have a specific type you'd type this:

type MyObject = {
[key: string]: boolean
}

function accept(params: MyObject) {}

// So this would be valid
accept({ loggedIn: true, isAlive: false });

// but not this
accept({ loggedIn: 1, isAlive: 0 });


If you do know the structure and some keys are optional:

type MyObject = {
name: string,
email?: string,
loggedIn?: boolean,
}

function accept(params: MyObject) {}

// So this would be valid
accept({ name: "Jack" });
accept({ name: "John", email: "" });

// But not this
accept({ name: "John", email: true });

Typical convention in my projects has been either types or interfaces. They work exactly the same and can be exported/imported to other parts in your application.

Why is working with the JS navigator geolocation API such a bloody pain, on Firefox half the time it works and half the time I get "ERROR(3): Position acquisition timed out" why is it inconsistent?

At least on chromium its consistently broken "ERROR(2): Network location provider at 'googleapis.com/' : No response received."

What's the deal with NestJS? Is it worth learning or is it just a fad?

What the fuck even is it?

how do I start making webpages

Attached: 1551752137488.gif (369x251, 446K)

asp.net makes me want to fucking kill myself

Paste this into a text file, save it as hello.html, and open it:

hello page


Hello!
My name is user.

holy shit!!!!!!

Why

because of their DI meme
need to use serilog which is supposed to be used as static, but I gotta send it through DI and then still somehow get the logger from another project in a static class
don't understand any of this garbage

Based on their example it gets injected like any other logger.
Seems rather straightforward to use.
github.com/serilog/serilog-aspnetcore/blob/dev/samples/SimpleWebSample/Controllers/ScopesController.cs

Do you have an example where you struggle?

getting it into controllers isn't a problem
the solution has another project where it defines services and some other shit which it calls from the controllers. That service calls another static class to do some extra work. I'm supposed to have that logger in the that static class. From what I gathered you can't pass anything via DI to those. I don't even know if you can even with that service. I don't see a way to get that logger over there except passing it through method calls which I read is a bad idea/innefficient or some shit
I sure love having 50 ways of doing something and not knowing how they differ because nobody bothers to explain their fucking solution

reposting from dpt
Does anyone have any resources on how to model entity relationships?
I only have some vague idea of what should be one-to-many one-to-one of what but I don't know if they all should be bidirectional (i.e. both entities know about themselves respectively). Any good practices? Can't find anything on google.

Ah, I understand now.
I had this problem too already and ended up passing classes all the way down as arguments, which feels quite dirty to do though.
At least in my case it was because of poorly planned class design.

I need tips on how to escape tutorial hell.

After reading through the first part of javascript.info Udemy tutorials feel like a cakewalk but I can't figure my next step.

It may be a shit analogy but it feels like learning how to play a fighting game. I know the moves, but they don't come out naturally.

has_many :through?

Attached: has_many_through.png (657x778, 97K)

How do you make sure a function runs after another one if the one running first doesn't offer promises or callbacks, pic related kind off(the console.log should be last but taking info from the database isn't instant)

Attached: 23523252.jpg (527x594, 77K)

then

github.com/mapbox/node-sqlite3/wiki/API#statementeachparam--callback-complete
it has a completed callback

Wait there's actually people here pretentious enough to use node, but NOT use mongoDB?

It's like if you're going to meme and use the same language front and back, why not use it for everything including the DB?

Worth learning WordPress?

I'm unemployed, goal is to get good at Front End and land a job, but I was wondering if WordPress would be a valuable skill if I end up freelancing or for making some money on the side if I get a shit job.
I keep reading how it's not hard to get into and that you only need to know the basics of PHP, and I already know enough of HTML, CSS and JS to get by.

I know it has a callback but what if it didn't have one or didnt return a promise? What do you then

I am creating a portfolio project and i am pretty sure people look at Mongo like at the devil, i kinda like it personally

Attached: 576546346.jpg (1080x1080, 91K)

Then the library you'd be using would be flawed.
Nothing you could do then besides adding your own callback.
In this case you could query the total row count first and then run your callback after "each" has executed as often as rows you have.

how is that pretentious ?
You use the tool you need. What the fuck is that comment even

People still think about Node like about a meme even tho its literally everywhere and everyone uses it

I use node. I'm just saying why would you use javascript for everything but the database when you could use it there too

mongodb isn't just databases with javascript though.
It's significantly different from relational databases.

It's bretty much just json tho

Tbh if you think about it you can use it just like any SQL database

>Create a mongoDB Collection named users
>Create a mongoDB Collection named posts
>Create a mongoDB Collection named UsersPosts

and it would work just fine

I'm going to learn to use Adobe XD and study some design.

Talk me out of it.

>XD
back to reddît

strap Bootstrap onto your site or Bulma and you don't have to design shit

This.

I use Angular Flex and Angular Material as an Angular user myself, but Bulma is a gift from god.

I do plan to learn Bootstrap as well.
Current plan is polish JS, then learn SASS (shouldn't take long), Bootstrap, XD and React.

I hope that's enough to land a decent job. I just wanted to add some design software and it seems XD is better suited than my needs than Photoshop.

That's the point.
Nope, it wouldn't. You don't get constraints, observers, schema rules, type systems, etc
There's a lot of shit that can go wrong if you try to use it like a RDB. Performance too.
From quick googling :
blog.shippable.com/why-we-moved-from-nosql-mongodb-to-postgressql

As a NEET will i be considered for hire if i only know html/css/ruby/js?

How to spot shit devs

>"If you don't like Node.js/MongoDB/PHP, then you don't work in the industry"
>"Server-side rendered applications are a thing of the past/obsolete"
>"Angular is dead. Vue.js and React is the way to go about front-end"
>"There's nothing wrong with using Javascript server side"
>"There's an NPM package for that"
>"Why bother reinventing the wheel by writing css manually? Just import a css framework such as Bootstrap/Materialize"
>"Why are you writing plain CSS? Use [meme css preprocessor of the month] instead"
>"SQLite is only for testing and prototyping"

Also of course, the classic "I've learned html/css/javascript over the weekend. How can I use these skills to make a quick buck? btw I'm unemployed/fresh out of college with no experience. I can at least freelance right?"

Attached: emma_face_2.jpg (209x228, 46K)

>Angular is dead. Vue.js and React is the way to go about front-end

Literally true tho, Vue is a better and easier Angular while React is in its own lane and doing great in it

I really like phoenix, and elixir in general.

In any case, what does a plug do anyway? From what I understand, it just adds / removes stuff from the %Plug.Conn{} map, right?

Attached: 2019-03-28-160718_976x642_scrot.png (976x642, 99K)

Your best bet is to use an observer on the user object. But I'd also check if the library you're using has an event emitting service if it doesn't use promises or callbacks.

Man if fucking Sqlite wasnt so shit at concurrent users posting data to the database it would be perfect and better than any other sql version ,why the fuck wont they make Sqlite 4 or something

Attached: 1543570837891.jpg (749x710, 62K)

Do it contractors in london really make £300 cash a day in it industry ? Don't remember the source but remember multiple sources on the web claimed so.
Seems insane given that average salary is £2k a month according to numbeo.

Can someone FUCKING Help me put a token inside a cookie using Node.js? I want to create authorization via cookies but nowhere around is a simple explanation how to do it

Attached: 1550145546552.png (489x448, 273K)

Your response needs the set-cookie header.
developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie

Is it true you guys make 70K a year $_$

I make 40K (Canada)

I make 32k euros a year after tax. 10 years ago I got about 19k.
It's above average and leaves you with quite a lot to save (or spend on stupid shit) monthly.

>>"Why bother reinventing the wheel by writing css manually? Just import a css framework such as Bootstrap/Materialize"
nigga did you even work on a real project yet? with retard managers and deadlines?

>just adds / removes stuff from the %Plug.Conn{} map
Yeah, that's pretty much it.

Whats better, to make a Cookie that contains only the userID or to create a jwt token (that also has the userID) and put that into a cookie? Could a user even do anything if he knew what ID his account has in the database?

Attached: 421211244.jpg (640x640, 68K)

been working on a client for sucklessg.org. pretty fun desu

aws is so much easier than azure for hosting static website and shit

If you use sessions then keep them on the server and use the session id from the cookie to read stuff like user id.

If you use token based authentication then don't store them in cookies.
Store them in the session storage and send them in the authorization header when you need access to endpoints.
You can show the user his ID, but always assume they can just change it.
So sign it using a server key and on requests validate it on the server again.
Keep the token lifetime short, 5-10 minutes is enough and refresh them with a refresh token.

>If you use token based authentication then don't store them in cookies.
Why not

Because you keep sending them around with every request, even when you just load script/image resources.
This is fine for server side sessions, as there is no way to modify headers on simple POST/GET requests.

But when using auth tokens they should be sent in the authorization header.
And cookies are not meant as a storage like this, that's why we have session/localstorage.

Hem... Fuck react and fuck Javascript.

>localstorage

But you can just modify localStorage on the fly and delete/modify it, isnt that bad?

What do you mean?
Like a user can just modify the values?
Yes they can, but they can do the same for cookies.
That's why the token payload is signed with a server key to make sure it's still correct on the next request.
If the user modifies it and, let's say, changes his user ID then the signature will no longer match and the server can deny the request.

Okay but how the fuck do i do this session/id/cookie/localStorage shit in express

medium.com/dev-bits/a-guide-for-adding-jwt-token-based-authentication-to-your-single-page-nodejs-applications-c403f7cf04f4

Not that guy but this made me think, it says req.header, what is a header in a website tho? Because i am pretty sure they are not talking about your navbar

Attached: 1553445605590.jpg (1024x762, 144K)

Damn I missed
>"Use JWT's for authentication"

the headers of the HTTP request.
developer.mozilla.org/en-US/docs/Web/HTTP/Headers

So the header is the url you send? So authorization through a header token would make your entire url look like a shit with a 50 string token on the bar?

>Store token in LocalStorage
>Someone comes to your PC
>Copies the Token
>Puts it in his LocalStorage
>Is loggded into your account now

OH NO NO NO

Attached: 1552045881908.gif (220x220, 892K)