/wdg/ - Web Development General

>making CSS to behave like JS
>creating BLOATED frameworks for FUCKING FRONT END reinventing the wheel over and over
>"team can work better with a framework"
>4GB of RAM to load a page

thank you modern web development

It's a shit attempt at making a functional front-end framework using concepts from OCaml

If you want functional programming in UI, your options are
-Elm
-Clojurescript
-Server-side rendered pages that use a functional language as a back-end.

Everything else is a dead meme. (Purescript, ReasonML, Bucklescript, etc)
But don't take my word for it, I dare you to finish a non-trivial project with them.

Attached: FC3C15CA759643A99E22937112A951FB.png (567x437, 274K)

>pick a language
>pick a framework
>pick tools

I pick ES6 and that's it. You guys overcomplicate this shit, no wonder it requires dual core to even browse facebook now a days.

What about scala-js?

>Scala
What do you think?

I made a div that slides from the right and I'm giggling like a horny schoolgirl because of it. But the content inside adjusts to the current size of my magic div. How do I stop that? I want the thing to be at full size at all times and either scroll along the div sliding animation or be like a mask that slowly reveals the content when the div slides open.

plain Javascript + vue.js
that's all I need

my css is rusty but i think overflow-x: hide does it

post webm

Get a job hombre. If you're relying on web dev to save you then you will die poor.

I still haven't got my head around Web Pack.
Is it something to automate the code deployment? By what I can tell, it's somewhat like Gulp, but instead of writing pipelines and functions you just download some dependencies and then configure a JSON file.

>Been working for 1 year as react/react native dev
>Apply for a remote job because why not
>Pass an easy as fuck test in JS
>Second test would involve fixing bugs and adding functionality to an angular web app while sharing screen to the tech lead
>Virtually no experience with Angular nor technical interviews in general
>No time to practice because work + college
>They give me an hour to solve 6 exercises
>Solve not a single one even though I know how to because of the time constraint and being mentally exhausted
I'have never been so embarrassed in a professional environment. Are technical interviews really this hard or once you do a bunch of them you just get good?

I think reason is fine. Saying it is dead is pretty wrong, considering projects like Revery exist, upon which oni is built, both are pretty huge codebases.

>Virtually no experience with Angular
>does a test with Angular

you shoot yourself in the foot. if you're not qualified, why apply? read the requirements next time.

You pick ES2015 and it doesn't run in almost any browser, so you then pick a tool to transpile it. Plain JS is on the framework row, so congrats, you followed the picture.

This But also, in my experience dumb technical interviews fall into two categories:
>shitload of memorization
>obscure trivia
My caveat on the second is if they give you a heads up in advance. I remember I had a technical interview where I was given something like 10 examples of Promises/timeouts/intervals/requests being deeply nested and I had to describe the order in which the various functions would resolve. Wasn't too bad though.

Can't understand shit about Bootstrap's grid system.
What's the easiest way to kill myself?
Holy fuck why do you need a div for a row, a div for a column, all that in a container div
DIV
DIV
DIV
DIV
DIV
I could have shat out a simple label/input pair that changed from a 100% width each to 40&60% width at a breakpoint in plain CSS ages ago. ALL IN A FUCKING DIV. FUCK

Frameworks are a meme. Don't use them if you have a decent design.

What about the retards that won't bother to read my css file to know what's going on?

>I could have shat out a simple label/input pair that changed from a 100% width each to 40&60% width at a breakpoint in plain CSS ages ago.
Let me know when you have to build an actual application and not a calculator for your babby Web Design 101 class.

>Has never worked a day in their life.

different user,but are these not all the same damn language,both react and angular are the same fucking javascript,both bloated with magical wand syntax that are made to hold the hands of those that still don't understand "this",i cannot wait for this industry to implode due to it's dick measuring gate-keeping.

I made a small primitive chat server, please try it

wiby.me/chat

Will keep it up for an hour, then shut it down. Its meant to work with old browsers on old machines.

Attached: ghostchat.png (679x330, 26K)

>you shoot yourself in the foot. if you're not qualified, why apply? read the requirements next time.
I didnt't apply for an angular job, I applied for a frontend job, and the requirements were the typical "experience in technologies lke react, angular, vue, jquery, whatever". Nevertheless, I did know how to solve the problems but the fixed time and the guy watching my screen fucked with my nerves.

hope you like my spam

Is bootstrap used in big apps? I've only worked on small projects and used my own css because learning bootstrap seemed like a pain.

yes, ty

current bug: reverse proxy not sending IP to chat server properly. So a unique ID can't be generated.

>ghostchat.go

>Is bootstrap used in big apps?
Twitter. I'm sure there are others.

Any company worth their salt is either going to be using a CSS framework (their own proprietary one or an open source)

yes, I will release it but not while testing.

I haven't done webdev in a year since I got moved on to a new project at work. Do people actually use typescript now?

I make 75 an hour. I want to not have to work.

you make 75 websites an hour?

damn

Is there any place with a comprehensive reference for add-ons or userscripts for Pale Meme or old FIrefox? Mozilla worked on the damn thing since forever and seems to have never even put all the reference in one fucking place, let alone finish it.

Attached: 1557086951575.jpg (370x400, 17K)

I wish. Maybe I'd stand a chance then.

Have you considered not using bloatstrap's grid system at all and using plain css grid

Any resources/advice for someone who just got a gig doing MEAN dev?

I'm pretty much super new to web dev but thanks to my degree and grades I managed to land a job/internship type deal, where if I do good here I'll get the job. Basically I just have to design a website for employees to use that keeps track of orders and a bunch of other shit, and they're giving me some time to learn the stack (MEAN)

Basically up til now I've just been cramming down tutorial vids but I still feel fucking retarded. Has anyone here been in a similar situation and know of some good resources for learning this shit?

Attached: 1558821944533.png (903x905, 1.33M)

how do I reset the height of a component after a timeout?

The method I've used in the past is to have a container Div that acts as a window with { overflow:hidden; position: relative; } then you can use JS to sample the window's width and apply it as a fixed width to your sliding div, you'll also use that value to set a negative absolute left position and position: absolute; then animate that left value up to 0. This will make a sliding in from the left effect. Then you remove the fixed width and absolute positioning on the slide after the animation has completed.

What framework?

react

How do you mean, how has the height been manipulated?

Run the timeout and set a state variable to true, and apply "height: initial" on the component if the state variable is true?

Either Typescript or Reason, but Reason has no libraries

Vanilla of course

Just webpack please

Literally just read a book for each technology used in the stack

nvm did it with useEffect

Well shit I'll just read a book then I guess

>Google requires you to pay 5$ for free extension publishing

Attached: 1530348742266.jpg (720x861, 32K)

RTFM

It's legitimately amazing how terrible they are. They treat all their users and even their customers like shit and yet are still able to literally print money thanks to tech-illiterate normies who don't know there are better options. I want to say that removing Adblock from Chrome will wreck them, but I know it won't because I've seen my relatives interact with Google/FB/whatever in exactly the way the companies want them to. People are so mentally cucked nowadays that they think pervasive ads and tracking and a terrible user experience are normal.

Sadly, what you're describing is a common issue when using frameworks, especially one as bloated as Bootstrap.
Then it's a matter of stopping whatever you're doing and studying the style definitions and re-reading the docs to make sure you are using things the *right way*. Good luck if you need to customize something just a little bit: any time saving from using Bootstrap is lost then.

Now, regarding your question:
- the container div is to give some horizontal padding to prevent the content from touching the viewport's right and left edges.
- columns had some horizontal padding in BS3, a "row" adds negative horizontal padding for alignment of the first and last columns of a "row".
- the div for the column is a column, self explanatory

Bootstrap is still useful for some LOB software projects, but with grid and flexbox it's more of a hindrance when you need something more customized imo.

I tried it on different browsers but the error code is always the same:
'The script from “127.0.0.1:8000/script.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.'

I have the following code in my html file:

title



HUHU

I serve the html file with this code:
const server = http.createServer((req, res) => {
if (req.method === 'GET') {
res.writeHead(200, {'Content-Type': 'text/html'})
res.end(fs.readFileSync('./index.html'))
}
})

The issue seems to be that I don't use 'text/javascript' as content type in the response header. But I tried it and it sends the whole html file in javascript. How can I get for html and javascript the appropriate mime type? Or what else is wrong?

Your server is serving index.html for all requests. You need to serve script.js as well (when the browser requests for "127.0.0.1:8000/script.js” you're just serving index.html again, that's why you get the error).

Expressing it this way makes a lot of sense. But I have searched for hours already, could you maybe offer some good search words for google? There must be some default example out there right?

You want something like this inside the if = GET statement
if request.path === "index.html"
res.writeHead( 200, HTML or whatever)
Res.writeBody(index.html)
else if request path === "script.js"
res.writehead(200, JavaScript)
res.writeBody(script)
else
res.writehead(404)

When you receive a request on your server, you want to know which file is being requested, and serve accordingly. You get that info from the "req" object that is being passed to the http.createServer callback. In your example it would look like this:

[script]
const server = http.createServer((req, res) => {
if (req.url === '/') {
res.writeHead(200, {'Content-Type': 'text/html'})
res.end(fs.readFileSync('./index.html'))
}

if (req.url === '/script.js') {
res.writeHead(200, {'Content-Type': 'application/javascript'})
res.end(fs.readFileSync('./script.js'))
}
})
[/script]

>write a server that completely ignores request path and unconditionally responds with the contents of an html file
>why is it always responding with the html file?
I know web dev isn't exactly known to attract the most intelligent programmers, but jesus fucking christ user

req.path is undefined.
req.url works, thank you very much! I would not have found it.

I really have to read up more on the basics.

Have you ever considered the fact that the poster you're replying to is not a professional "web dev" but someone trying to learn?
You can always read the documentation to find out all methods that "req" has (it's an http.IncomingMessage object): nodejs.org/api/http.html#http_class_http_incomingmessage
Although the Node docs is not the best place for a beginner to learn. I'd recommend following a web development course with Node at Udemy. (I don't know what course is popular these days, but people I know say good things about Max Schwarzmuller's)

What's the best way to place a div over a svg rectangle? Using the coordinates or something...

Thx, this has helped a lot!

I want to iterate over a bunch of svg rects in jquery.
I have the .each(function(index, value){})
But I can't figure out how to pull the dimensions from the value. Value.x just returns some object not the coordinates.

>the poster you're replying to is not a professional "web dev" but someone trying to learn
No shit. And I have no problem with people who are learning and just haven't been exposed to some piece of knowledge or don't know where to find it. My problem with this is that it isn't a lack of knowledge, but a complete lack of thinking.

The bars are showing but the text is not. Why?

>71198444
forgot pic

Attached: Capture.png (474x253, 22K)

This course I downloaded has recommended Chrome and Atom - can I just go with firefox and some other editor since I only have 8GB of RAM and Atom takes around a fucking GB of RAM alone with her going about CSS and following the stuff she's talking about.

Also will I ever need a dedicated GPU just for web development since I'm getting a new laptop and am curious if this matters, so far I haven't reached any conclusion to say it does but anything like rendering stuff can be done on my desktop - the laptop is mostly for learning at work since I have about 7 hours of downtime each day

Yes. There shouldn't be any issues when using firefox instead of chrome.
Both have good dev tools

Is there actually any front end job in existence where you just pick one language or framework and that's it? I have an internship at a big company and holy shit the amount of stuff I have to learn, angular, cucumber, Jasmine, TS, commitizen, prettier, tslint, advanced git, protractor, Dyson, and probably 10 other things and that just for the frontend. And every year I'll probably have to repeat most of this with the next FOTM (like we are moving to Jest) tool

Meanwhile for backend it was literally just 'learn Spring REST, Oracle and a bit of Jenkins'

No, because there isn't a frontend framework that does the programming for you yet.The only reason you get by with Spring is because of how fuckhuge it is, and knowing Oracle tells me you must've been in a big corporation since that almost never gets used in any company that can choose something else. Frontend doesn't have a lot of backend analogies because the platform itself is still being developed.

The two methods I can think of are to either use the svg as a background image of a div and place the overlapping div as a child of the parent div. Or you can use absolute positioning on the overlapping div with x/y coordinates being the left/top properties respectively.

what?

I'm taking over someone else's Redux-based project and this convention of splitting actions and reducers into different files really seems pants on head retarded to me
First I have to find out what the action does by looking in whatever actions file the action is defined in, then I have to crosscheck the corresponding reducers file to find out what it /actually/ does to the state
Then they use thunks and async dispatching which makes me lose even more time jumping between files

How long would it take to find a job in web dev starting from basically knowing nothing? 1 year? 2 years?

Can anyone explain the clusterfuck that is angular?

well, better more files than scrolling, no?

also, pic related, this is my idea how to do it..

Attached: Screenshot 2019-05-31 at 16.52.42.png (610x546, 67K)

The project I have has all reducers and actions files in the same directory (~30 files)
Thunks are also defined in their own files, separate from the "normals" actions files. Don't ask me why because I don't know
I feel like having a file per module containing all module-relatedstuff (initial state, reducers and actions) would make more sense structurally, but I guess having a separate directory per module would also work

Dedicated GPU is not a must for web development.

Depends on how fast you learn and how much time you have per day.

3 to 6 months or so with at least 4 hours a day and I'd say you are ready. If you are intermittent then well over a year.

>3 months
beast mode, 1 in ever 1293293 humans will reach that level

I structured it this way, so I can reuse it in other project, and it makes more sense that related actions, reducers are in the same folder...

most people group them by type, actions in one folder, reducers in other etc. This seems idiotic to me, but whatever.

also, if it was written in typescript, you could just refactor it, without worries about breaking stuff.

Interesting statistic. Source?

Doing what?
Also, if you dont want to work, go mine/trade crypto or forex/stock exchange shit.

my asshole, off course

i want the wizard hat becuse it looks dope

mah nigga

I think you're underestimating it. Maybe if he had a personal mentor he could do it in 3 months, but there's a lot of knowledge you need.

Test

If you're trying to learn like the MEAN stack then yeah you need longer, but ruby on rails, python/django, vanilla php then yeah 3 months is definitely doable. I say this because that's what it took me to learn PHP. Also learned jquery alongside it but I knew javascript already.

Learning PHP when you know Javascript is completely different from learning to program when you haven't ever programmed before.

php =/= ruby or python

I guess, but the only thing that helps you is knowing about loops, functions, conditionals. You could teach what those are in a single afternoon.

Python is easier than PHP. It's why it's recommended as the first language people should learn.