/wdg/ - Web Development General

so I'm getting back into web dev HTML/JS for the first time after 5+ years
What's a good resource to bring me up to date? (but that isn't masses of basic stuff aimed at noobs)
I've been learning React and all the horrible bundling tools already, I'm more thinking of lower level changes in HTML and CSS

Bundling your react site has gotten so simple nowadays.
You either use create-react-app, Parcel or even writing a simple Webpack config isn't that hard anymore.
I know you didn't ask about that, but make sure you are up to date with ES6, Promises, async/await and that sort of stuff.

did you guys ever made something actually useful in React or similar memescript framework? what was the project about? is it still alive?

Attached: 1551068498574.png (760x756, 285K)

I'm fairly new to web dev and have been learning some nodejs for one of my pet project
What are the benefits of typescript? Is it just the autocompletion?

it has type checking.

Why do I need it if I already know what each variable are used for?

Because typos happen.

you probably dont. its supposed to help reduce the rate of bugs when doing a large project

its invented for faggots basically, hard core programmers dont need a babysitting type checking system

>not having the equivalent to write-tab function
even bash terminal has that man...

You don't need TypeScript for small projects where you can track everything. For anything remotely complex where you can't, you need it. Also essential for working in teams and maintainability.
JavaScript = truly based and redpilled.

>something actually useful
not sure about that, but I used Vue to build 4stats.io

hardcore programmers dont put up with the language deciding itself what types your variables are. they control that shit. which means for as long as you're in a thread like this you will never be a hardcore programmer.

t. c fag

Any start point on web design?

Why are you even here, do you have anything to contribute?

muh material design!

>use webpack
>be miserable
what else can i use?

>what else can i use?
Whatever you want. Everything will make you miserable.

the beginning

Just stop having such a mess of dependencies and tools that you need another tool to manage it all

What's the problem with Webpack?
Anyway you can try Parcel.

i even tried to get around writing javascript and using the typescript compiler just because it takes less config than webpack, but that obviously didn't turn out well
i literally just want to use es6 imports and classes. that's it. i want to write my regular js without webpack complaining that if i want imports i need to use some stupid plugin or if i want to use the document object i need another stupid plugin
yes im a retard but this enterprise configuration shit isnt helping
i'll take a look into parcel, thank you

Attached: 1447409535931.png (576x432, 374K)

How does Firestore even work in production, when one malicious user could burn through thousands of requests in no time?
If you have to proxy everything through cloud functions or another server to be able to apply rate limits, then what's the point of having the feature of direct user connections to the DB?
I really feel like I am missing something, but I haven't found a real answer so far.

It sounds amazing in theory. Subscribing for real-time updates, controlling access via security rules, etc., yet one bad client could push me to my daily quota or budget-limit in literally no time with little (native) means to prevent that?

Attached: 1501799952339.png (307x462, 11K)

You made 4stats?? That is really awesome! I just checked it out, and it looks extremely professional, but it takes some time for everything to initialize. i can't believe there are close to 1 million new posts on 4C every day. That is mind blowing.

Also, I like how everything looks! When you started this project, did you start with a mock up? Or did you free style everything? I love the responsiveness, and the animations when sorting. It's a nice website, it's clear you've worked hard on it!

Parcel is quite opinionated, so it will do things like transpiling and inlining certain things out-of-the-box afaik.
>i literally just want to use es6 imports and classes
Almost sounds like a Webpack setup with literally no configuration is what you rather want. Specify your entry .js file and tell it to bundle. Done.
Unless you actually need more things like Babel for transpiling, tree-shaking, minification, compiling jsx/vue, and so on.
thanks
>but it takes some time for everything to initialize.
you mean loading and parsing the assets or connecting to the API and establishing the socket connection?
I normally try my best to keep everything fast, though the chart library I use for the timeline is a bit heavy and latency could play a role if you connect from far away.
>When you started this project, did you start with a mock up? Or did you free style everything?
No plan, just everything as I go.
I wanted to do something to learn React, but when I decided to expand on it, I switched back to Vue again.
pic related was the very first version made with React (more: imgur.com/a/RS1TA)

Attached: 1497217403522[1].png (1398x875, 73K)

I' m supposed to find the username/password combination for a website with the hint : both match [1-3]{0, 4}. Does anyone know what that means ?

A 0 to 4 digit number only consisting of 1, 2 and 3

What is the fizzbuzz of webdev

Thanks a lot dude if I get that job I' ll be thinking of you.

Todo list

this tbqh

how do i get rid of this tiny little space that gets added from ````text-overflow: ellipsis```` when it overflows. its not padding, border or margin

Attached: chrome_2019-03-29_17-23-47.png (2560x1440, 358K)

regex101.com/

Super cool site. Great job user.

you'll figure it out i'm sure

>its called typescrypt

Attached: pepe (5).png (1280x1381, 831K)

I'm not sure if this would work, but maybe try giving it a negative margin-right, so that the file size text will move closer?

.name { margin-right: -5px; }

-5px is a guesstimate.

To make sure shorter names don't get overlapped by the file size:

.name::after { content: " "; }

Might need to use content: "\00a0";

See: designcise.com/web/tutorial/how-to-add-space-before-or-after-an-element-using-css-pseudo-elements

What's a good free CMS to use in combination with Gatsby?

anyone?
I know Firebase/Firestore has become a meme here recently, but I am really interested.

I tried Netlify CMS and that seemed quite nice, otherwise I heard the free Contentful tier seems to work fine as well.

What is everyone's editor of choice?

vs code

Sublime nigga

thanks

Anons, how long did it take you to learn html? What about CSS? Javascript?

It's something I'd like to think about doing, but really have no clue on if it's something I could actually learn or not. I tried learning C++, but I just couldn't retain everything to make me an adequate programmer.

It's one thing to say, that you don't like a certain language or some specific environment to develop for, but if you had troubles to grasp one language, then switching to something else won't magically make things easier.
For webdev there is also a lot more than just learning the individual parts of HTML, CSS and JS. At some point you want to fit it all together in a more organized and optimized way, so you likely get into bundlers, pre-processors, devops; then in order to not only be limited to creating UIs, you likely want to get into backend as well, where there is a shit more to learn like concepts for authentication, databases, etc.
Assuming this isn't just some /dpt/ bait.
But yeah it's still very interesting and fun if you work on something you are into, like a personal project or just something challenging you like to solve.
Hard to say "how long". You can get the basics of HTML and CSS in a day and then it's just a matter of using it to slowly learn about all the specific elements and properties and when to use them.
Maybe some you will never use for years and from time to time you find cool things done with them, that you didn't think about before. JS shouln't be too hard, if you already know programming and don't start from scratch.

VSCodium

Atom

Is the difficulty level of HTML, CSS, or JS comparable to C++?

I wanna load some data into a md-select but its returning pic relate.

Ive tried the following:

{{branchData.data.horario}}

Attached: ng-repeat.png (1660x272, 22K)

How the hell do I put the hash of a password into a php file?

I only need one user for this site. Will it work if I return the hash as a json response and copy it into the user array?

It's really hard to compare. I think the saying that it's more important to know the underlying concepts of programming is more important than knowing a specific syntax is true.
JS is certainly easier to get into, but ultimately it depends on what you are building.
A simple frontend-only website is certainly easier to create, than a complicated fullstack application.
With CSS in the beginning it's maybe tricky to get an overview of all those available style properties, but imo the real difficulty with that is to know how to properly structure your styles to keep even larger sites maintainable and easy to edit. And of course the design part. Learning CSS is not even worth mentioning, compared to actually learning how to come up with good looking designs.
It's no wonder that many people kinda dislike to work with CSS, because on the one hand you feel like you are some kind of skilled dev when it comes to JS and then suddenly you are a literal child with some crayons, that can't create something good lucking for shit, which can be really frustrating.

Probably easier, but its a different ballgame. It's a lot more visually oriented and much more loose with how strict implementations have to be to get a desired behavior than a language like C++. How hard it can get to be is mainly dependent on how hard you make it by the complexity of the visual interfaces you want, and the best ways to implement those are constantly changing over time with new additions in native CSS/JS that replace the need for external libraries that used to be almost standard.

This seems to work. Now, how the hell do I implement sessions with this thing. My front-end is an SPA.

I get:
>Too few arguments to function Zend\Expressive\Session\SessionMiddleware::__construct(), 0 passed in /var/www/iris-dev.info/vendor/zendframework/zend-expressive/src/MiddlewareContainer.php on line 64 and exactly 1 expected

by doing this:
$app->post('/login', [
\Zend\Expressive\Session\SessionMiddleware::class,
\User\Middleware\LoginHandler::class
]);

How do I pass a parameter to the SessionMiddleware?

Vs code is pretty good for this, has both a find and replace on the file, or alternately you can search over the entire codebase or a folder inside the codebase to find and replace. It's very powerful.

nevermind, I'll do it without sessions, fuck this, it should work out of the box

well I used React with Gatsbyjs to build cousins website for his business

Also use it at work with typescript

vscode just works

>itp: blog

I posted here three weeks ago about creating babby's first website because I had an idea for one.

In about a week and a half of work, I've created a basic HTML/CSS framework that's enough to get me started on the JS portion of my website. Learning JS is tricky but I'm slowly making progress. I just finished the form validation portion of my site. Now I need to program the function my website is going to perform. It'll be a while but I'm having fun nonetheless. Thanks for listening /wdg/.

I know what normal destructuring in javascript is:
[a,b,c]=[1,2,3]

But I would like to know - and can't find answers online - why the following example works. To me it looks like 'double destructuring'. I know why it is necessary to assign it with an empty array (because in case we called the function without arguments) but I don't get why it works. Can anybody explain to why this works or give me a good link to read about it please.

function fun([a, b, c = 33] = []) {
console.log(a, b, c)
}

fun([1, 2, 3]) // 1 2 3

My problem is not the 'c = 33' part (just ignore it), but the double destructuring via '= []' and via the function call.

winxp.now.sh/

Fucking Windows XP made in react, What the fuck, how fucking powerful is this framework, they even make UI in games using it (nu-Battlefields)

Attached: 131342535.jpg (1106x1012, 70K)

You cancdocwgztvyou canxdo in js, ie anything.

Is there any course on Udemy or elsewhere on UX? I'd like to up my UX game, but so far I haven't seen anything worth my time.

It's not XP, it's just something that looks like it.
People have made OS look-a-likes for decades.

any reason not to pick dropwizard or even sparkjava over spring boot? I like to keep it simple and sprong looks like cancer squared, but it is much more in demand

The function receives 1 argument - an array of elements [a, b, c = 33]. When you call the function, you also need to supply an array of values [1, 2, 3], else your function doesn't know how to interpret what you have given it. Check the Destructuring assignment page on MDN.

Im trying asp.net mvc entity framework .net core on anguilar.

What should i expect? what versions should i use? leaving at default or LTS versions?

Hi, I get that. But what is with the '= []' part?

You said you understood why the '= []' part is there, but OK. It makes it so that in case you supply no arguments to the function, it still executes, otherwise it would return a type error as no arguments have been passed - either as actual arguments or destructured ones. As I said, check the MDN.
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Setting_a_function_parameter's_default_value

Hi, thx again. Yes I understood it isolated from a function call.

Look, what I mean is, it is strange that we execute TWO destructurings.

First destructuring:
[a, b, c = 33] = []

second destructuring:
function fun([a, b, c]{}
fun([1, 2, 3])

Until now, everything is clear. We just have two different ways of destructuring.

But now we combine them both:
function fun([a, b, c] = []) {
console.log(a, b, c)
}
fun([1, 2, 3]) // 1 2 3

For me it looks like destructuring is executed twice. But I think I will just accept it as syntactical sugar. Maybe understand how it works under the hood will help me.

No there is only one destructuring here.
Your 'first destructuring' is simply a default argument for the function, in case you don't provide a value yourself when calling it.

function fun([a,b,c] = [1,2,3]){
console.log(a,b,c)
}
fun() // 1, 2, 3
fun([4, 5, 6]) // 4, 5, 6

Letting OP know that associating /wdg/ with that hipster faggot is fucking heresy, shame on you OP, you bing shame to famiry

Attached: 1553701963541.png (659x464, 563K)

I thought the irony would be obvious

Attached: 1551125201388.jpg (400x431, 57K)

just witnessing it make me sick, I can see the ironing, but it could also be non ironic, maybe a text with a witty comment about hipsters and webdev...

Damn, you are right! I didn't think of a default argument. It reminded me all the time of destructuring. Thanks so much!

why do you think it's happening twice? there is only one play you are destructuring an array

it'd make more sense to you if you wrote it like this first:

function fun(args = []) {
const [a, b, c] = args
console.log(a, b, c)
}
fun([1, 2, 3]) // 1 2

$_FILES array has the files in it

but when I use $request->getUploadedFiles() it returns an empty files array

any clue?

I assume you are talking about php and the slim framework?

Try putting a breakpoint here
github.com/slimphp/Slim/blob/8caa5c7c47a70c5a30148d59b4b39f04ce8c3623/Slim/Http/UploadedFile.php#L86
and then check what it does.

like the first 2 OP lines?
I have actually seen these used way too often on actual sites. Most often with US devs or ones from Scandinavia for some reason. Might just be a coincidence.

I have interview tuesday to work as Frontend Developer with React.js.

I just know Vanilla Javascript.
Advice please.

Attached: Reactjs.jpg (1600x533, 50K)

hell naw, that'd furtherly enforce the hipsterness, more along the lines of "competing with pajeet for low wages"

>Advice please.
learn React

My consulting fee is 150$ an hour btw.
Where do I send the invoice to?

Can i do it for exposure? I'll say how great you are in Instagram and twitter.

Heya, /wdg/. I'm making a website for a friend and I want him to be able to update it in the future without my help. Lately, most of my work has been on static sites or custom backends so I'm kind of out of the loop.

Any recommended CMS to work with in 2019? I've used wordpress before but that seems dated and like I'd have to teach him a lot.

Attached: nagoorcorejava.gif (849x458, 150K)

what will he update?
i am assuming he wants to change pages, posts and create new pages and you don't want to spend too much time on it then wordpress is the best option.

>2019
>not using Dart and WebAssembly