/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_template_n.jpg (1280x720, 82K)

Other urls found in this thread:

reddit.com/r/firefox/comments/6rbvvw/photon_rectangular_tabs_have_landed_in_nightly/dl4318f/
bugzilla.mozilla.org/show_bug.cgi?id=1283086
bluehost.com
hostm.com/
developer.mozilla.org/en-US/docs/Web/API/AnalyserNode
stackoverflow.com/a/46152076
npmjs.com/package/sound-detection
plnkr.co/edit/TIlPIqwHoLfPBnQ0R7ic?p=preview
jsfiddle.net/cy94Leun/1/
twitter.com/NSFWRedditVideo

Hey, how can I do routing with php and apache?

website.com/username would go to the profile of `username`.

Currently it's like website.com?user=username which is dumb.

I could do this with express obviously but this site needs to have a php rear.

I'm trying to make a jwt authentication optional by doing the following
.all('/*',
((req, res, next) => req.headers.authorization ? passport.authenticate('jwt', { session: false }) : noStrategy)(),
(req, res, next) => {
next();
});

function noStrategy(req, res, next) {
if (req.login.username && req.login.password) {
let req.user = {} // a get function to authenticate credentials and return user body
}
}


I have a feeling this is absolutely retarded but I'm not sure

Attached: 45539045_789397464740650_288181117171793920_n.jpg (960x932, 105K)

Just Google 'Pretty URLs', plenty of doc on the subject.
Ask me if you don't understand something tho

Attached: c1803be825c151c28eebd8f7af5f996c.jpg (329x219, 34K)

fucked up some parts, meant app.all and to put proper spacing

apache pretty urls*
my bad

Just finished rewritting a few months worth of ghetto code into a nice new prototype-chain class format.

Off of the top of my head something like this using htaccess

RewriteEngine On
RewriteBase /user/

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.+)$ /user.php?q=$1 [L]


you can replace /user/ with just / if you want it to be root level but i added /user/.

forgot to write this

myweb.com/user/banana
would call the content from
myweb.com/user.php?q=banana

Does Firefox on Linux have a "Turn off GTK theming I want to see how this looks to a normal windows or mac user" button or plugin?

Yeah it does

You can specify a light GTK theme to use for rendering webpages in about:config. This is great because your system theme will still apply for menus etc. but the webpages will be rendered as they are with light themes.

Navigate to about:config in your Firefox browser
Right click and select new->string
Enter widget.content.gtk-theme-override as the name
Enter a light GTK theme that you have installed on your system for the value. e.g. Arc
Restart firefox.

Source: reddit.com/r/firefox/comments/6rbvvw/photon_rectangular_tabs_have_landed_in_nightly/dl4318f/

See also bugzilla.mozilla.org/show_bug.cgi?id=1283086

Attached: 59192813_715549458925726_5022135938164195328_n.jpg (750x588, 50K)

000webhost dude from the other thread who thought was being a smartass.
>test site using a seo tool
>502 Bad Gateway
someone recommend me a (dirt?) cheap managed host please.

Attached: D5pRj_8WwAAgS6L.jpg (1536x2048, 281K)

doesn't any female developer think that all these gender and sexuality themed events are just insultingly patronizing to them?

Attached: allie.jpg (1080x755, 119K)

Nice.

Attached: shithub.png (313x115, 6K)

Is this why the world is turning to shit?

Attached: Screenshot 2019-05-03 at 19.34.28.png (1866x1198, 2.09M)

imagine the smell

I might be being naive, but I'm happy that when I find my job I won't be into a mancave. The class I study at is a mega-mancave though.

Women are cancerous, as you grow up you'll learn to enjoy male spaces.

bluehost.com

cd..
ls
cd..

Attached: 17e6d4bdcbca97c1e828efcc23d6c546.jpg (1080x933, 102K)

>This is exactly why I avoid web development. Real men push updates to the kernel about mutexes; webdevs make blog posts to journals about nu-sexes.

uh hu

Attached: k4xkTbK.jpg (1080x1118, 501K)

have sex.

hostm.com/

hi /wdg/

I'm developing a website where part of its function is to listen for audio and flag a particular decibel level, or throw up a flag when a relatively loud noise is heard. I'm struggling to find resources that cover listening and interpreting audio in JS. Anyone have any resources I can look at, or know where to start looking?

Attached: ChDws4jWUAAOfRp.jpg:large.jpg (565x279, 25K)

Attached: 359.png (174x231, 16K)

developer.mozilla.org/en-US/docs/Web/API/AnalyserNode

Is the MDN page for the Web audio API not helping?

Postgres question lads.
How do i create a function to be called from a trigger to update a given timestampz column to now?
Currently have separate functions for each column (e.g. created_at, updated_at). Wondering if I could just have one with a param of column name?
Not that big an issue, just wondering if this could be done tidier.

This is a great start, thanks

I thought I had looked there before but the article I read discussed playing audio. I found the correct article this time, thanks

why the fuck does onLoad trigger before an image is fully rendered?
Is there an event for when the image actually is rendered?
Using react btw

stackoverflow.com/a/46152076

>why the fuck does onLoad trigger before an image is fully rendered?
Because it triggers when the image data is loaded via the web request, that's what 'load' means in this context.

>Is there an event for when the image actually is rendered?
I'm not sure, not that I know of.

Have you tried calling a settimeout(0) for your handler from onload? That pushes a callback to the end of the event loop, so the browser might have time to render before that gets called.

e.g.
img.addEventListener('load', (e) => {
setTimeout(() => {
// try doing the thing here, the image might be rendered at this point, idk
}, 0);
});

This seems very difficult. A lot is dependent on the gain the microphone has, if it has a preamp, if it's a good microphone, etc. I can crank my omnidirectional so it peaks when there is no sound and I can hear my cat piss down the hall. Not sure how you're planning on accounting for all of that.

does anyone else just use React + a bootstrap css file and just add/remove bootstrap classes to divs on click events? this seems like the fastest way to create something, but I feel like a fag for doing it

I have read pretty much through the book Eloquent JavaScript and I think I have learnt a lot about JavaScript. Now I am starting to get into Web Development and I can't answer one important question on my own. I have taken short looks at frameworks like React, Vue and Hyperapp but I can't figure out why I can't solve the state issues, which they promise to solve, on my own with state capturing things like closures.
I get that they make many things more simple, especially they seem to modulize my potential app, what is great. But if I want to write a small website, what advantage do they offer regarding state, what I could not solve with closures? I was thinking that I could state capturing functions, like closures, bind to event listeners and go from there. But I am probably wrong and missing some big things. So please, tell me...

Confession time.
I've been a web developer for 9 years now. It's gotten to the point that I barely ever write my own code anymore. If I need to accomplish something, I just look up what I think will bring me up a solution. 99.9% of the time, I find something. Then I just edit whatever it is for my needs.

This is especially true for front end shit. I fucking hate the front end with a burning passion. Used to love it, and it's what I started with. If I get assigned a whole front end, you best believe I'm looking through github repos/codepens for a front end to use before I start doing anything. Thus is web development for me right now. I fucking hate it, and am working towards a mathematics degree to get the fuck out.

I was thinking about sampling the amplitude at the smallest instance I can and comparing the next instance to the one before it to see if there's a significant positive difference, and calling the flag.

I'm 2 years in and doing the same thing.

I'm mass launching websites and apps to get out.

Fixed it

Attached: react.jpg (1536x2048, 312K)

What's the best stack and why it is MERN?

based

Attached: 1553780390291.jpg (826x611, 120K)

>>>express js

How much memory is too much to hog on the user's PC?
I wanted to preload a bunch of shit on the website for speed, would end up being like 100-200mb.
Is that too much?

bump

context api vs callbacks vs redux, which would you use for a small webapp?

Honestly yes, especially if on mobile.
Why would you load so many data at once?

Attached: dad57f621efc012ad6e7a1fe6591e6c1.png (240x240, 13K)

because I don't want my website waiting "on runtime" for this shit to load

React hooks kind of eliminate the need for redux for small apps.

Would you agree that both Flask and Django are basically fags of brothers?

Somebody told me that learning React is like fucking snakes. Is it true?

I've been enjoying it so far
(I'm not the lad you're replying to but hey, I might as well chime in)
It's a "different" way of thinking your webdev stuff but it's quite fun once you get the gist of it

Have this (picrelated)

Want the child to appear on hover over parent.

using

.embed-IeVjo6 {
position:absolute!important;;
display:none;
}

.containerCompact-3bB5aN:hover + .embed-IeVjo6 {
position:absolute!important;
z-index: 999;
display:unset!important;
}


Where did I fuck up?

Attached: 1534091613269.png (652x70, 15K)

I've been told that Haskell is the iPhone of tools... and C is the agreeable tranny of lunch. What would Pajeet think about this statement?

Clojure and C# pair really nicely with Mithril in my experience.

the + select does not mean its child, but it's sibling, so replace it with > or nothing.

Attached: 1549839048971.jpg (730x780, 46K)

no dice sadly.
what I'm missing

npmjs.com/package/sound-detection

Is it possible to modify this package to take in audio input in realtime from the browser microphone? I didn't see any mention of that capability in the documentation but I'm piss new at JS so I could be missing something obvious

I would rather fuck a bag of meth than program in Kotlin. Everyone knows PHP is king.

Ok, I've got it working this way:

.embed-IeVjo6 { display:none; }

div.messageCompact-kQa7ES:hover > div.containerCompact-3bB5aN > div.embed-IeVjo6 {
z-index: 101;
display:unset!important;
}


So it just appears where it should be originally. problem is - I want it to overlay. But for some weird reason it does not work:

.embed-IeVjo6 { display:none;}

div.messageCompact-kQa7ES:hover > div.containerCompact-3bB5aN > div.embed-IeVjo6 {
z-index: 101;
display:block!important;
position:fixed;
}

However, just:
.embed-IeVjo6 { z-index: 101; position:fixed; }


Works fine as an overlay.
What gives?

why can't I have something like this in react:
let style="right: 0px";
return ()

is there even a solution if I wanna use very different styles and pass them as props? Can I really only use control variables and if/else it?

works in vue :')

are people actually using hooks in production?

faggot
let style = {right: "0px"};
return ()

a bit rude but thanks anyways
sorry I'm quite new to react

in the long run, is it better to get in some kind of company or just hunt for remote jobs
my understanding is that remobe jobs are not as stable in the long run and future
its more "serious" when you actually go to workplace

Recently my company got a "UI/UX" department. It's basically one stereotypical hipster faggot in skinny jeans, plaid shirt and glasses who looks more like a gay barista. He doesn't even touch HTML/CSS. We cool guys (devs) including the boss use every opportunity to bully him. We pretend to be impressed by his shitty designs and make him do hundreds of mockups a day, only to go with something completely different in the end. You can hear him crying from the bathroom at least twice a day. I don't need no barista looking fag to tell me how to do my job.

Attached: 1556203995407.jpg (499x498, 45K)

Can anyone actually explain to me how to use Monads in Perl? I've only programmed in Python...

Load it in background

plnkr.co/edit/TIlPIqwHoLfPBnQ0R7ic?p=preview

In this example mouseover bound to div with an ID. What if I only have a class name and no id?

Fuck float.

alright /wdg/
I really need money, like really bad
what's a good freelancing platform I could use?

Every one of them if you need money like in next months and not in next 5 years?

next months at best yeah

what do you know to do

anything related to dev or webdev
if I don't know it I can learn it

Is there any chat app like rocket chat that can be displayed as a modal? no registration and rooms are on url parameters

im too lazy to make one

where can i find a programmer gf? is there some online community/chat where these people hang out?

>where can i find a programmer gf?
with dick or no dick? Also, why the fuck you'd like to do that? Women are supposed to be different from you..

recommend u get a gf with different interests than u
but dont get a gf with no interests either, thats the worst

because i cant remember when was the last time i met a girl that was into anything than art,philology or law
stupid whores with zero interest
where are all the chemistry,biology or medicine girls?
i figured since all women are empty shells that only seek attention i might as well find one that is at least into things that i like as well

I mean yeah girls are literally never going to be as interested in important shit as guys user that's just biology - for at least 9 months of their life they literally just stumble around dizzy and have diarrhea and for 1/4 every month they bleed and get nausea. How could they possible be evolved to be as passionate as males?

You can still find a girl that's relatively passionate about art and shit that isn't a husk of a human being. Talk about tech and programming and medicine with male friends and date a girl who doesn't know or care jack shit about it IMO. Women that are interested in male dominated hobbies are always going to have issues, whether its autism, narcissism, etc. Be pragmatic - you know 90% of successful female programmers are probably going to breakup with you for being a sexist whitey or constantly try to call you out and argue over programming with you because of their insecurities.

You had your chance to step up the game and you failed, for 9 years.

I made a small chrome extension that re-formats reddit comment pages when the window get below a certain width, because the right side bar has a consistent width it takes up half of the screen space on my vertical monitor and generally just causes issues.

Its really small and I'm not really good at JS, but I'm happy with the results, at least I can browse reddit on my vertical monitor now.

Attached: comp.png (2160x1819, 1.72M)

Pretty sure that could be done with pure CSS and then hot toggled when needed via extension shortcut

>hot toggled when needed via extension shortcut

That sounds super inconvenient when you can just do it automatically with JS.

What exactly is inconvenient? You can enable when you need it and leave it or disable at any time when not needed. and CSS will be faster than JS

>extension shortcut

Having to hit a hotkey is inconvenient.

You only need to hit it if you want to disable it.
What if you rotate display back to horizontal?

>What if you rotate display back to horizontal?

I'm not going to, but, my main monitor is portrait and my second monitor is landscape, with the script I can move the browser between either windows and it will format itself correctly without ever having to hit any buttons.

Attached: Code_2019-05-04_07-23-51.png (1156x130, 13K)

I had that backwards with the monitors, main monitor is landscape obviously, portrait is secondary.

>with the script I can move the browser between either windows and it will format itself correctly without ever having to hit any buttons.
oh I see, smart

Finished a course with es5 javascript but I feel a little bit confused about some of the esnext javascript (arrow functions for example).
Does anyone have good resources in order to learn them easily ?

Don't use any of them. Reach out to local business.

Any ideas how can I make an element appear when I hover mouse over specific area? Right now I shrink required element to 1px; and when mouse is over it I restore the size but it is ugly. I want to make the area wider, at least up to 5px but the element itself should not be visible until I hover over.

selector:hover

...
I know how to make on:hover. Okay, my current issue is that when I move cursor out it disappears too fast and I'm not sure why:

.thing {
width: 4px !important;
opacity: 0;
position:fixed;
z-index:101;
max-height:100%;
transition: width 0.2s !important;
-webkit-transition-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1) !important;
transition-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1) !important;

}

.thing:hover {
width: 58px !important;
opacity: 1;
border-right: 0.5px solid #535251;
border-left: none;
border-top: none;
border-radius: 0 10px 8px 0;
-webkit-box-shadow: 2px 2px 2px 0px #5352512e;
}


If I remove the opacity directives It will be fine but then I cant use shrinked size 4px because it will be visible, I would need to use 1px;
I tried opacity transition but it still disappears TOO fast

jsfiddle.net/cy94Leun/1/