/wdg/ - Web Development General

What's everyone up to?

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 - Collection of PHP links.

>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: old-ass_wdg.jpg (640x480, 85K)

Other urls found in this thread:

jsfiddle.net/smj1unc6/
github.com/jindrapetrik/jpexs-decompiler
jsfiddle.net/fy5rtwp0/
jsfiddle.net/7gtpqey9/
jsfiddle.net/s5eomk06/1/
jsfiddle.net/ny65974v/1/
jsfiddle.net/ny65974v/
phptherightway.com/
docs.spring.io/spring-data/jpa/docs/current/reference/html/#projections.interfaces.open.bean-reference
w3schools.com/html/html_tables.asp
twitter.com/SFWRedditImages

Wish me luck, anons.

Attached: its_so_tiresome.png (537x702, 218K)

Vue is quit simple user.

Attached: 1558762762869.png (1487x645, 43K)

THIS WEBSITE IS AWFUL! ITS FUCKING SHIT!
>add border-radius: 4px
THIS IS AMAZING! YOU TRULY ARE A MASTER!

Lighthouse is pretty dumb, complaining about critical request depth for embedded data-uri assets. They're all served in one very small (100k gzipped) http request. I would lose real-world performance if I "fixed" things to remove that warning.
The tip to use font-display is also pretty useless, considering the embedded data-uri webfonts are loaded before the first paint.

Attached: lighthouse.png (720x415, 15K)

Any flashfags here know how to rip from .swf files?

I want to rip old sprites and music from an old flash RPG game and try to redo the entire game in Canvas using it's assets.

Got a retarded noob problem that's driving me crazy
I'm just trying to put what's supposed to be a cart icon (the add_shopping_cart) to the right like in any navbar but I don't get what I did wrong.

jsfiddle.net/smj1unc6/

This is the best flash decompiler out there.
github.com/jindrapetrik/jpexs-decompiler

Well where's your icon? Do you think random keywords magically turn into images? There's no icon anywhere in the fiddle. All that material shit is part of some library. I guess you could get rid of that and use a shopping cart emoji, is this what you wanted?
jsfiddle.net/fy5rtwp0/

Noice thanks

Don't worry about the icon, that's what I was saying. In my code it'll render it because it's an Angular material package.
But same as in your fiddle, the icon is not on the far right part of the window. I want to make the icons (the shopping cart and later an user icon) be on the far right of the navbar.

Oh, I see. That's not how flexbox works. You are trying to use a parent property on a child element.
jsfiddle.net/7gtpqey9/

You should also read MDN web docs to understand how flexbox works.

the solution of the other user is fine, though I always preferred using spacer elements.
It's 1 div more, but it seems more semantic, than specifically styling the left-most element of the right end, especially if you plan on putting more than one there.
jsfiddle.net/s5eomk06/1/

Another method is to have container divs for each area of the nav bar. (left, center right) and justify the elements inside these accordingly.
jsfiddle.net/ny65974v/1/ (i know lots of extra shitty css)

or just containers with the outermost having the justify set to space-between
jsfiddle.net/ny65974v/

where to start with php7? as a beginner would it be good for me to learn it vanilla or should I use a framework to hold my hands until I understand well how everything works and then switch to vanilla? which framework?
I'm planning to be a freelancer and use php7, postgresql and nginx with js (probably vue) in the front-end as my stack/set of tools

box-shadow: 0px 2px 7px gray;

Attached: 155235236723124.jpg (534x865, 152K)

>0px
box-shadow: 0 2px 7px gray;

Where are you, php guy?

Any recommended resource on Laravel?
I applied to a company working with my uni where they gave me a little exercise to send them back, I'm halfway done, but if I end up working there I'd be as prepared as I can be.
Gonna admit that not having worked with PHP, Laravel, Bootstrap and SQL before this is a lot to take in during these few days.

So I have two things to talk about with you, guys. Last month I started my first internship on a small company that offers a SaaS, I'm earning some money, had to learn Vue.js in the first month and now I'm starting to see Laravel while fixing stupid bugs with Vue.js and bootstrap. It is normal for this kind of company to only use bootstrap? Anyways...

In my free time I'm still working on my Node.js skills, I think I have some pretty good grasp on the language and already build some not so complex API's, but I'm starting to get concern about my code quality. What are some good examples on github of top grade code for Node.js? I never use classes, mostly I build functions, but them inside a object and export them, is this wrong?

Not php guy here. I usually don't like video lessons, but Laracast is awesome. The best resource that I found about Laravel, easily.

Impressive job saving those 2 bytes. You're hired.

>tfw tables and relatioships too complex for any orm
i thought doctrine could do it but it also failed.
docs told me it would support foreign primary keys but in reality i needed to put a surrogate key and it only works if the key is named 'id'.
the problem is that if i name it 'id' the orm shits itself when i join another table because it also has an 'id' field.
so i tried to rename the 'id' field on that other table but then a relationship broke because the orm demands this table to have an 'id' field too.
i denormalized some tables to try to ease this up but the database size exploded as did the query times.

Trying to make a REST api with Spring, and I need social login/signup, without username and password.
Is SSO enough or I have to implement my authorization and resource server?

kek, mean

I have a Spring application that returns a table of books stored in the database like so
public interface BookRepository extends CrudRepository {
Page findAll(Pageable pageable);
}


I want to add a search function. If a user searches for "x" I want to return a Page object containing only Book objects with either a title or author that contains "x".

What would be the best way to accomplish this?

Rate my boomer reactive ui.

Attached: Captura de tela de 2019-05-26 10-49-23.png (917x461, 76K)

>I never use classes
That's not really a problem. Sometimes people that come from Java or C# are concerned about that.
Don't think I ever felt the need to write a class to solve a task.
(Though they have their use of course and they are still common in various libraries)
Exporting an Object from a file is pretty normal, if that's what you are asking.

what is that?
React without JSX?

Always learn the language before the framework, PHP is quite simple so you probably won't have much problems .

if you already have experience with other programming languages. I suggest you just just dive into framework after reading phptherightway.com/
i suggest start with laravel

kkkkkkkk

yes there is a free playlist of laravel 5.4 by laracast on youtube. it's good else laravel docs are pretty good

Ok, I figured out I can use
Page findByTitleContainsOrAuthorContainsAllIgnoreCase(Pageable pageable,String titlePart, String authorPart);

if title and author are String fields of Book. The situation is slightly more complicated in my case though. The author field of Book is a Author object which in turn has firstName and lastName String fields I need to access. So I tried
Page findByTitleContainsOrAuthorFirstNameContainsOrAuthorLastNameContainsAllIgnoreCase(Pageable pageable,String titlePart, String authorFirstNamePart, String authorLastNamePart);


However, now when a user searches for part of a full name like "Bob the", it will not find "Bob the Builder" because neither "Bob" nor "the Builder" contains "Bob the". In other words, I need to find the space separated concatenation of two strings in my database. How do I do that without writing the same code twice?

I tried following docs.spring.io/spring-data/jpa/docs/current/reference/html/#projections.interfaces.open.bean-reference (starting from Example 74) but that's not working.

Hello /wdg/. I don't do webdev very often but I want to style th element (with class) that is inside of tr element that is inside of table element (with class). I tried
table.nameofaclass tr th.nameofaclass

but it doesn't seem to work.

aand I solved it with Hibernate
@Formula( "concat(first_name, ' ', last_name)")
private String fullName;


Thanks for all the help.

isn't generally used instead of , not inside of it ?
But styling tables is fucked anyway. Good luck.

What the fuck
>findByTitleContainsOrAuthorFirstNameContainsOrAuthorLastNameContainsAllIgnoreCase

Just stop.

Google a vid about direct style editing in google chrome or firefox element inspector, it will help you out since you'll see what works and what doesn't directly.

not according to w3schools.com/html/html_tables.asp
ill check that out later

>what is that?
>React without JSX?
It's my own thing, I built it today.

Attached: uh.webm (990x292, 288K)

pretty cool shit user
t. haven't touched react in my life
What I would do in that case is make 3 arrays or an object with 2 key value registers. Then sort it on click depending on the sorting method clicked, then print it again, plain js btw

Your way sounds cleaner and probably performs better for big tables.
At the moment I inspect the cells and reorder the rows so that I don't need to rerender the table/app on sort.

In pure js you don't need to rerender the table, I think, you have to iterat through them through some method I don't know, but you could just fake it giving the tables numerical ids. So you then just replace the innerHTML, I think this might work.

I literally cannot change that. That's how Spring Data works. I voiced my displeasure about this before in /dpt/. Unless you know a cleaner way to do it? HQL or something?

thanks user

>experience with other programming languages
I know basics of java and html/css/javascript/node

>I suggest you just dive into framework after reading phptherightway.com/
thanks for this link, user! I really appreciate

For me, it's blazor.

Attached: 1556468781539.png (476x476, 142K)

I know ur meming but Blazor is fucking lit
Hope it will be next react

This might not be the right thread to ask this, but does anybody know how to force google to give me the desktop layout? It's giving me this retarded mobile layout.

Attached: 1558893997.jpg (1532x796, 79K)

do you get that even in private browsing mode?

Yes. Tried different browsers as well.

why do you want desktop layout on mobile?

lmao I just noticed, is the Google search page not responsive for anyone else?
wtf is this shit?

Attached: Caphgfdhfgdture.png (712x603, 66K)

whoops, yep, happens to me too if I make the window small enough

If you reduce viewport it will try to accomodate to that using mobile stuff

what's your user Agent?
navigator.userAgent in console

The Google page seems to decide which layout to give you depending on your UA, which is really surprising.
Does it for you?
For me on Desktop, it simply cuts off part of the page and only when you open the device emulator via the dev tools and get the Android UA, then it will adapt the layout to the screen width.

It's pretty much against all this 'best practices' stuff of not using the UA to decide which layout to use, yet Google somehow does it for their main search page?

>It's pretty much against all this 'best practices' stuff of not using the UA
lel

Attached: 1557670657151.png (1878x654, 528K)

>what's your user Agent?
I tried everything from ancient ff agents to the latest chrome agents.

also why are your page elements square?
I can't even get these on desktop or any emulated device width.

Attached: mobile.png (466x874, 55K)

*, :before {border-radius: 0px}
global rule.

blazor looks insane for someone like me who is constantly switching between .net desktop apps and asp net stuff

but im really new and dont understand a lot about it, what are some thoughs on blazor?

It's almost like horizontal scrolling is an acceptable solution in some cases. (Especially those where you know the user has a larger screen and can just resize the window if they really want to.)

That just talks about doing feature sniffing via user agent. It says nothing about layout based on mobile device sniffing.

By tried do you mean you tried different browsers, or just tried spoofing different user agents? Is your default one a mobile user agent? Post whatever your default is.

what site should I copy to learn react ?

React docs it's the meme I've been hearing here.

>That just talks about
It talks about how stupid it is to use UA for any kind of compatibility cheks

>Can't smart cast property names
Well, so much for error checking during compile time. Is there any way to assert the object is valid without manually casting it?

Attached: 15487962315796.png (934x499, 29K)

the type expects 2 properties and none are optional, you only assign one
just do setState({ ...previousState, [inpName]: etc})

Dogmatism isn't always the best way to decide things. If you are a Google size company, receiving upwards of 4 million requests a minute on your search page, what do you think is cheaper:
>sending a couple hundred bytes of feature detection code
>sending nothing and doing a limited check on the server using UA, perhaps picking between one of a few precompiled pages

>typescript
that's a yikes from me

best of luck user.

Don't worry user, one day you will have a job too.

Is there a book that would teach me everything I need to know to build a website? If not what books / topics should I cover? I mean, I know what HTML and CSS are for but what about JavaScript, PHP and other stuff? What else besides HTML and CSS I need to build a website?

Attached: 1558803065525.jpg (1024x599, 45K)

A regular website with no database stuff runs on HTML CSS, JS adds a layer of interaction to that, and backend and databases just add the hability to data preservation and logins, there's more but this is the quick rundown.

get rid of that gay chain
shave hair off
grow stubble
replace glasses with contacts
also don't take photos in your shitty bathroom with its shit lighting

shouldn't be that hard for the guy on the right desu

cringe and gaypilled

Quitting my current job Tuesday to start my new job.

Feels like winning the lottery.

>Is there a book
Isn't there always a book?

Attached: orly.png (1198x985, 467K)

What the actual fuck

Attached: 1529354508325.png (196x257, 61K)

yeah, if you know HTML+CSS learn JS.
Do some simple DOM manipulation and interactivity, maybe the usual todo-list or a chat-app with sockets, then learn Vue or React.

nice tripds

>not using a rust framework
Enjoy your 3 minute load while it bootstraps every .net dll

You and your kind are exactly the reason why rust is such a big meme.

There's a spanish version of this? enyone knows?

vscode remote development (more specifically wsl) is actually fucking amazing wtf how has it taken them this long

I'm learning back-end development, complete beginner here. I'm getting confused by what web frameworks actually do.
For example, an Express (web framework) application is also a web server, right? We write some code that will make our program listen on a port, and receive web requests and process them and send back responses. And we don't need Apache or something on top of that, right?
But a Django application does the same thing: processes requests and sends back a response. But I also need a web server such as Apache to deploy a Django application. Why? Django's documentation says: "We're in the business of making Web frameworks, not Web servers.", but if I'm receiving requests with Django and sending back responses, then is it not a web server already, just like with Express? What is Apache actually doing that Django isn't doing? And why does Django need a separate web server but Express doesn't? They're both web frameworks, but the functionality isn't the same. So what is a web framework, exactly? Is it also a web server, or do I need one on top of a web framework (if that's the case then what about Express)?

I'm not too sure about Express and NodeJS stack but I can answer for Django. Django's local server has a web server functionality like you describe, where a program listens on a port and responds with your web content. But for real production servers you need to have your app behind an Apache/nginx web server that can handle a real load, Django's local web server is single threaded and is only meant to be used as a way to test your app locally. You definitely need a real web server on top of your framework code. I imagine the same applies to Express, but again I've never used it.

express has a built-in production-ready web server. django and most if not all python frameworks don't.

most of the time people either use a wsgi server (application server) like gunicorn behind a proxy like nginx. this is because wsgi servers only care about sending requests and responses to/from the application and don't bother implementing (too many) http-specific features or security measures, which are already implemented in servers like nginx or apache.

there is a production-ready wsgi+http server written in python server called waitress if you don't want to deal with proxies.

how do you handle javascript blocks of logic that depend on server state
I don't want PHP and javascript mingled together
I want to be able to process my javascript files
I also don't want to make a crazy amount of ajax requests every time I need to check a value in the database or a session variable to see if I should display these input fields, or open this modal, or blur this button, etc...

If you're willing to elaborate on the no classes thing I'd love to hear your thoughts. A coworker of mine recently refactored a big node.js application to use a lot of classes, where my inclination has always been to export function objects. He's adamant about following OOP principles but I haven't been convinced of the benefits of the class approach.

hmmmmm

Attached: dddddddddd.png (1155x322, 21K)

Thanks bros, it's starting to make more sense.

What is the actual error? You can do what you are trying to do pretty easily. Also, you don't need to provide a return type for render, it is already known since you are inheriting from Component, though I like to add visibility modifiers to all of my methods for explicitness.

The problem is that "newState" is inferred as an object of the type "{[x: string]: boolean}". TypeScript can't infer that the key will be either "input1Name" or "input2Name", it assumes it can be any string, so it's not a valid parameter for setState.

That seems incorrect, I've written code very similar to that. Either way, you could probably get away with casting it as Partial

Maybe something like this?

clickEvent(evt: .., name: T) {
const newState: Pick = { }
}

But anyways you should be using functional components & hooks nowadays.

As I thought, I think you are on an old TS version or something, as this code works without errors on strict mode:
interface IState {
x: boolean;
y: boolean;
}

function setState(state: Partial) {}

function clickHandler(value: boolean, key: keyof IState) {
const newState = { [key]: value };
setState(newState);
}

Current TS version is 3.4.5, it's up to date.
I'd assume it is working correctly, since I found more people asking about the same problem.

Attached: 1548614898752154.png (1078x304, 25K)

Perhaps someone fucked up the React types then? The first argument of setState should be Partial I believe.

Not sure, but I just tried it with React as well and it seems fine.

Attached: cra.png (912x930, 37K)

You didn't set state type in the class generics, it's not accusing error because it's accepting "any" as state.

Any independent contractors here? Better or worse than full-time employment?

Ah, my bad. Rushed through it. You're right. I got a ghetto as hell workaround for ya though:
clickHandler = (e: React.MouseEvent, key: K) => {
const newState: { [key in K]: boolean; } = { [key]: true };
this.setState(newState);
};

Well I am not too familiar with Django but I think you are being confused by trying to compare the two which dont even run on the same runtime. From what you are describing the apache/django interaction is setup as a reverse proxy to forward requests to django. If Django actually listens on a port and handles requests then yes its technically a web server.

Express as you mentioned is just a web framework or syntactic sugar to make developing web servers easier. The difference between something like nginx/apache and express is that Nginx is a server for static resources (even though you could run PHP stuff but thats beside the point) and express is the tool to create web servers like Nginx. Express handles things like static resources, middleware, routing, etc out of the box so you dont have to implement that yourself with node APIs.