/wdg/ - Web Development General

>Previous Thread
>Free resources to get started
Get a good understanding of HTML, CSS and JavaScript.
developer.mozilla.org/en-US/docs/Learn - a good introduction (independent of your browser choice)
developer.mozilla.org/en-US/docs/Web - General documentation for HTML, CSS & JavaScript
freecodecamp.com/
codecademy.com/
bento.io/
google.com - It's amazing, you should try it user

>Further resources
youtu.be/Zftx68K-1D4 - Web Development in 2018
github.com/kamranahmedse/developer-roadmap - Roadmap
stackoverflow.com/ - Developers asking questions and helping each other

>Tools
jsfiddle.net/ - Use this and post a link, if you need help with your code
caniuse.com/ - Check browser support for front-end web technologies

Other urls found in this thread:

jsfiddle.net/ow3vqdzw/
es6-features.org/#PropertyShorthand
arangodb.com/
bitbucket.org/lfk/downloads-router-chrome-extension
fullstackpython.com/static-site-generator.html
fonts.google.com/
developers.google.com/youtube/iframe_api_reference?hl=en#Playback_quality
addons.mozilla.org/en-US/firefox/addon/youtube-hd-1/?src=userprofile
webtorrent.io/
risingstars.js.org/2017/en/
digitalocean.com/pricing/
vultr.com/pricing/
scaleway.com/pricing/
webstack.de/blog/e/cloud-hosting-provider-comparison-2017/
twitter.com/NSFWRedditImage

I fucking love PHP!

when you create a new promise, is the only thing you need to pass through it is a function that handles the resolve and reject? i thought there were more states to a promise like pending, etc

Before its resolved/rejected its pending, but that's nothing you set manually.
So the function only either resolves or rejects.
I don't like it

When it resolves or rejects, let's say resolve("derp");, what happens to that string ? Why is it important?

So I've learnt some basic HTML, CSS and JS. However I have used Python quite a lot whilst doing scientific computing at school. Should I continue learning Python and move into Django or should I learn Node/Express?

learn Apache and then NGINX

it's the result of the promise and gets passed to .then()
(or other promise related functions that wait for resolves)

similar to how the argument for reject() gets passed to the .catch() as an error

have a look at this
jsfiddle.net/ow3vqdzw/

It's only an advantage if you know both.
If you like one of them better or get things done faster, then focus on that?
Node has a good momentum in growth and popularity, but Python is so commonly used as well, that knowledge in neither would be wasted.

so I decided I will drop JS for my shitsite, what am I in for?

starting with bootstrap, any decent CSS only framework that supports responsive navbars (via whatever hacks) and have modals which don't fuck up the browser history?

also, best way to show updates to the user instead of websocket?

>any decent CSS only framework
Bulma

Whats your motivation for not utilizing JS?
It's likely to make things unnecessarily hard to develop and use.

What's a good front end JS framework? Will be using it with Spring MVC (company wants to switch from ExtJs).

Vue.

Not a framework, but use CSS grids.
It is really easy to make your site adapt to the device you display it on.
It also saves you 90% of all divs which makes your site small and responsive.
As for updates, I don't see why you wouldnt use websockets and have full page reload as a backup.
It means you use some JS, but at least you use it correctly.

it's an exercise and it feels much more snappy to me. Will also try to keep everything as simple stupid as possible

are grids supported though? I was going to use flexbox

>Try to learn basics of something
>Guy starts using some confusing shit that's advanced as fuck and doesn't explain any of it
>Starts diving into super advanced things like it's nothing and autistically thinks because he knows it everyone else will
"Well okay I guess it's not importa-"
>Then another
>And another
>And another
>Then adds 5 more things I've never even heard of without explaining a single one, maybe they'll explain what it's used for eventually but never explain why or how it even works
>End up with like a bunch of shit I don't even know how to use, what it does, how I go to that but it just works because I'm copy pasting someone else's work


Should I just give up and try make shit and learn by failing like crazy and eventually figuring it out instead? I'm getting nowhere with all of these tutorials aimed at people who just want to copy paste and not actually learn or get things taught properly to them

Building your own thing and figuring things out along the way might actually be the best way to learn something.
You don't get bombarded with shit you don't need and when you actually do need it, you have a real case to apply it to and therefore memorize it better.

Copy&Paste or basically reproducing someones code from a tutorial will make you complete the course, but not necessarily improve someones problem solving capability.

noob question: im doing some js programming (vue to be specific) and theres this line that drives me crazy because i have no idea what that syntax is
new Vue({
...
components: { App }
...
})

why is that App variable wrapped in curly braces? i googled about 20 minutes now but i didnt find anything explaining that syntax.

Object destructuring.

What's the grace period for expired domains and how do I get them? There's this domain that expired 8 days ago I want but I don't want to shell so much thousands for it

but in the examples i found online on object destructuring it's always the other way round, like this:
{a, b} = someObj;

what happens in the above example?

>mom married neckbeard, learn suse / computer builds / repairs at 12
>drop out, learn html/css/graphic design at library
>get ged, go to community college, learned basic computer engineering skills, dual majored with information systems security for an extra year.
>Work at electronics repair shop for a year while in school, learned c and javascript, stopped using windows
>Work on a data mining internship off craigslist scrapping government data w/ perl.
>Got into electronics repair for 3 years fixing phones, tablets, computers, consoles, other misc shit
>Now work as tier 1 for last year and a half. So many indians, have wrote tons of one liners, websites, and automation scripts with bash and php.

I hate being a tech support monkey teaching old ladies how to setup 365 dns (no), or running Syed's webdesign business for him because he pays my company $14.99 a month.

Its mostly the management though, they force me to use windows instead of optimized linux workflows and impose a requirement of issues I must fix, even when I've fixed everything.

I have a git I've been building up and I'm at like a dozen fairly complex bash scripts, a few html/css/js sites, some WordPress themes, a WordPress plugin, some Arduino scripts, and I have some perl/c stuff I've archived.

I'm also in another dev internship and have learnt scrum, how can I get closer to a career in development? Is it at least better than supporting endusers with configuring linux servers and websites/email?

it's not destructuring

it's a shorthand property
es6-features.org/#PropertyShorthand

You must have a solid CV by now, i would guess.

What do you want to do?

Front end? Back end? Dev ops? full stack?

thank you very much my man!

The impression I get is your smugness/attitude are holding you back in life. At least keep a pin in your pocket so you can stab yourself during the interview when you feel compelled to vomit up some garbage about OS-wars.

I have two decent resumes but still look at requirements and it seems like bachelors are standard in development.

I would consider myself full stack (with the addition of some embedded) but I really don't use databases where they're not necessary. I like WordPress have optimized the installs to perform well with lots of security hardening, but it seems like companies tend not to value a well built html/css/js page as much. Have considered starting a web hosting service on a dedi but freelancing scares the hell out of me.

>The impression I get is your smugness/attitude are holding you back in life. At least keep a pin in your pocket so you can stab yourself during the interview when you feel compelled to vomit up some garbage about OS-wars.

You're probably right, I've been working on being more humble but its a work in progress. I did just decline a position tripling my pay in support because they wanted me to work on an imac.

Call it what you will, I just dont like windows/macos workstations.

refuse to work on mac but work on PC because you want to work on linux. What?

Also, if you are telling the truth you have everything you need to have a career as a developer. If you can't get a job it is 100% due to personality. Might have to start lower on the ladder due to no degree, but definitely wouldn't be doing tech support stuff with that much dev experience.

Mac =/= Gnu/Linux

I really like stable fast linux browsers and terminal varieties, I work with a browser and a terminal predominantly so I don't think it's that out of hand. Multitasking is also better with autokey and more hotkeyable workspaces.

It's kind of like if you're a draftsmen and jobs want you to use tinkercad instead of Solidworks.

Thank you for the encouragement though user I'll honestly try to be less of a fag.

> Web Development General
> actual thread consists of people struggling to grasp the basics of software development

The is like a car mechanic forum full of people unsure of how to hold an electric screwdriver.

>actual thread consists of people struggling to grasp the basics of software development
what do you mean?

/wdg/ is shit. It's because there's a gold rush on web development right now. So many kids coming out of or going into bootcamps. /wdg/ reflects that. It's a poor man's stackoverflow. Anybody who actually knows what they're talking about should abstain from helping any of these plebs because Sup Forums is not a support board.

>/wdg/ reflects that
webdev is expanding a lot, but /wdg/ is still fairly slow and one of the less active threads on here.
Would be great if people wouldn't ask the most retarded shit, that you can literally google in less time, than it takes to write up that post.
But those who mostly know what they are doing and are just asking for some directions usually make for interesting posts, since there are so many tools out there, that it's also often an opportunity to check out something new yourself.

>webdev is expanding a lot
not for good tho and having 50 tools to do the same shit that could be done without popping out 100 files in the server is just nuts

it makes me laugh how every web dev wants to feel like a LAMP engineer now by using their JS frameworks just to not deal with JS directly, Web Devs are just over complicating everything every passing day its nuts

Is it possible to make sticky div with absolute positioning? Or is there other way to make sticky div floating over other elements?

Opinions on Arangodb, /wdg/?

arangodb.com/

Looking for a data store for my web application. I intend on using graph data in the future, and I'd end up tweaking a postgres relational database into storing nodes and edges, or rely on a different database.

It's not a relational database though, what do I lose out on here?

>using their JS frameworks just to not deal with JS directly
Any framework still requires a proper knowledge of everyday JavaScript.
>Web Devs are just over complicating everything every passing day its nuts
Sometimes, but frameworks like React and Vue with declarative rendering and component structure also make things easier again and help to keep things organized.
Less complicated options are still there to use and if they are indeed better suited for a situation then nothing stops anyone to still utilize them.

Maybe this is a stupid question but I used to do simple web dev as a hobby like 10 years ago, back then there was shit like Hostgator where you had CPanel web access to run everything. It seems like nowadays it's more popular to have a VPS and do your own dev ops with Linux? Or is that just for the "bigger" projects? Is there still some decent free web hosts that offer the CPanel style hosting for hobbyists?

HostGator is a "middleman" charges an annual fee to keep your site online plus the cost of the domain

A VPS like AWS, can to host your shit, plus you need to pay the domain, unlyke the middleman, with a fixed price, here the price will depend on your traffic, so if you get DoSed or go "viral" you will pay a lot

If you just want a personal portfolio/website/blog with no databases behind you can follow Static site generator path, and self-host your site on GitHub or Netfly, you dont even have to pay for a domain if you dont want in this route and its totally free up to 1GB per repository

Well back in the day I used Namecheap for domain names and not exactly Hostgator but something very similar (the same free/cheap plans with standard CPanel login).

I guess after doing some googling it seems that the main difference is that all the free/cheap CPanel hosting mostly supports PHP/MySQL, so I guess the people using the new shit like Node are the ones needing to do the dev ops themselves on things like AWS?

I do want to use a database and probably stuff like Wordpress (or similar), so I need something more than just literal static HTML pages, but I'm not doing some enterprise level Node projects. Anyways I was just wondering if the CPanel-type stuff was depreciated but after some searching it seems like it's still pretty typical.

The top is the download URL generated by clicking the download link in Sup Forums-X.
The bottom is the download URL when you go to the image URL and CTRL-S.
Why is there a difference between the two and what do I have to do to get actual URL instead of this blob shit?
Completely clueless with webdev btw. Currently trying to make changes to bitbucket.org/lfk/downloads-router-chrome-extension - the manager.js script.

On a browser, when you download a file you download a blob (binary large object) that contains the data of the image.

A Blob object represents a file-like object of immutable, raw data. Blobs represent data that isn't necessarily in a JavaScript-native format.

So a java script program has to interpret a blob file and not an URL like the bottom case in your pic.

Cpanel like stuff is for web hosting. Web hosting is usually optimized for certain requirements by being locked into one configuration. So it's fine if you want to host couple of WordPress sites in PHP web hosting but if your your requirements are more advanced or varying you probably want vps.

Hosting providers are not really depreciated, its a service for people who dont know whats a VPS or a SSG or just want their own webpage deployed fast with no tinkering, they also handle most of the gears on the networking (DNS, IPs, etc...) so you don't have to (like pre-installing wordpress), and as i said it's more costly

They also charge you the fuck up if your traffic goes above a quota, just like a VPS, however you can host your site for as cheap as 1 USD monthly in a VPS (As long as only you use it), while NameCheap or hostgator will just charge you the fuck up in 1, 5 or even 10 years in advance, even if you have 0 visitors

i migrated most of my websites to SSG and i haven't paid a penny for hosting since 2015 so im good, (unless i need a database),

Whatever hosting provider you pick really depends on your need and what will you develop

Wordpress is based in PHP, and uses databases to work, but wordpress itself is bloated software, you should try some SSG, hugo or jekyll and see how they fit to you, you can still use JS, HTML, CSS to do anything you want, but nothing related to PHP or databases

Thanks for the info man. What it sounds like to me is that this is something caused by Sup Forums-X, am I right? Like, could this be worked around by changing the download handling code in Sup Forums-X?

>Site looks trash.
DROPPED.

It's just the different hosts

>Recruiter advertising for a "MEAN stack job"
>Mongodb, EmberJS, Angular.JS, NodeJS
Would... would someone really do this? Combine AngularJS and EmberJS and call it MEAN stack? Or is the recruiter just a moron who doesn't know what the 'E' in MEAN stands for?

It has to the latter. E is always express.

What's SSG? And which provider do you use that doesn't charge anything?

Anyone else do gulp for task running but still use webpack for bundling?

Trying to fix up a greasemonkey script that stopped working. It adds a temporary mute button to r/a/dio that mutes the current song and automatically unmutes when the next one starts. If anyone cares I'll post it when it's fixed.
I'm encountering a strange problem:

When the following code is ran in the console
$("#stream").jPlayer);
it works and shows a function.

When the following code is ran from the greasemonkey script
console.log($("#stream").jPlayer);
It shows undefined.

The obvious response: "The script is running before the page is loaded". No, I'm running the code in the script after the page loaded and after pasting the code directly into the console and seeing an initialized jPlayer function. So this is the problem. Does anyone know why this could be happening?

Small bit of additional info, doing console.log($("#stream")); in the script works properly.

Static Site Generator

fullstackpython.com/static-site-generator.html

Where do you guys download fonts? When I search for things I get a bunch of websites but some of them seem sketchy, and I'm never sure if it's the real font that I've downloaded or a knockoff.

fonts.google.com/

kys

A lot of fonts on there aren't freely available, they just link to where you can buy them.

wut?


You literally just browse through the fonts available, pick one you like and click the plus sign and then import it into your HTML/CSS and that's it.

Nobody uses paid fonts in 2018 what's the point

I had a specific font in mind, Bauhaus. I was able to find it elsewhere, so nevermind I guess.

If it's Django vs Node/Express then definitely start with Django. Node is not ideal for every situation but just shines at the specific situations that it is good for, such as real-time apps.

Fuck gulp, I just use the scripts directive in my package.json with bash scripts if necessary. webpack-dev-server does all the complicated parts of gulp anyway.

I have a bootstrap example, but there is something in it I don't understand, it's to display a logo in the navbar.

Why is there a h1 there, I understand the classes attached are for spacing in bootstrap, so I am guessing that the h1 is being used as a container to position the link and the icon, but why an H1, isn't that bad semantically?

So how do we fight the plague that is youtube? All I want is to automactically load all videos, embedded or not, to start playing at 1080p or the highest settings if it's lower than 1080p.
The 2 only firefox addons that want to achieve this don't work because they call setPlaybackQuality() and according to the YT api that doesn't do shit because
>Calling this function does not guarantee that the playback quality will actually change.
developers.google.com/youtube/iframe_api_reference?hl=en#Playback_quality
I'm literally pressing buttons in my userscript to select the highest quality but it's whacky as fuck but works surprisingly well. I can't even see it open the menus it's so fast, but sometimes it stalls the video a bit.
var btn = document.getElementsByClassName("ytp-button ytp-settings-button")[0];
btn.click();
var menu = document.getElementsByClassName("ytp-panel-menu")[0];
var quali = menu.childNodes[menu.childElementCount - 1];
quali.click();
var qualimenu = document.getElementsByClassName("ytp-panel ytp-quality-menu");
var qualimenuchild = qualimenu[0].children[1];
for(var i = 0; i < levels.length; i++) {
if( levels[i] === 'hd1080' || levels[i] === 'hd720' || levels[i] === 'large' || levels[i] === 'small' || levels[i] === 'tiny') {
break;
}
}
var hd = qualimenuchild.children[i];
hd.click();

this is my hack that executes inside a part of the code of this addon addons.mozilla.org/en-US/firefox/addon/youtube-hd-1/?src=userprofile

What is the Sup Forums solution to this problem?

I've been studying webdev on my free time for a couple of months now, got a couple of questions.

What's a good website to look for somewhat simple jobs just to test my skills?

Also, when I get to the point of making actually good websites or apps, should I just pay for hosting or I can get it down myself on the cheap with a raspberry pi?

I run this small video "hosting" website,

What should I do to make it look/handle files better,
I am also looking into webtorrent.io/ to help keep the site alive during a video release, traffic isn't a issue, but the surge in hits is for the server.

I heard all the cool kids are using bootstrap these days, should I use that too or something else.

I was considering using a CMS, but I think the site would break when it gets a surge in numbers.
Also site security is a meme.

Site is: cheekyvideos.net ,

that's one cheeky website

what tutorial was that specifically? I feel like there should be enough basic tutorials that don't go overboard.

weird, I am using yt high definition and videos still default to 1080p for me on FF nightly.
wtf is up with those letters in the pic.
you can, if you have a static IP.
Though speed and response times will always be better from a VPS. It's not expensive either.
you mean the traffic from streaming videos isn't an issue, but people just loading the site itself?
>I heard all the cool kids are using bootstrap these days
Bootstrap, Foundation, Bulma or something else is all fine imo.
You may prefer the 'class syntax' if you can call it that, of one over the other maybe, but they all get the job done.

risingstars.js.org/2017/en/

pretty interesting as an overview regarding what has gotten more common and popular in 2017

Should you use git GUI clients? If so, which are recommended? I am on The Linux.

I finally understood how to use vue-cli properly

Does your player quality stay on "auto" though? And does it stay at 1080p even when the video viewport size is kinda small (when you open the dev console for example to squish the video size down) like pic related?
Even with the addons active, my quality never goes away from the "auto" setting. Meaning youtube always adjusts the video res to the viewport size, which I dont want. Youtube on its own, without addons, gives me high res sometimes, but it depends on the viewport size and is not fixed, making it annoying.
Even on a clean nightly profile. When I fullscreen the video youtube changes to higher resolutions, but for me it's like you can't force youtube to give you a certain res, as the api doc says, unless you click on it manually, which fixes it.

>wtf is up with those letters in the pic.
I fucked 'em up with the liquid rescale plugin in gimp.

>Should you use git GUI clients?
No.

How's "not expensive" in numbers?

I'm not exactly a wealthy person.

I use GitKraken

~ 5$ + sales tax depending on your country will get you a VPS that is more than enough for small personal projects.
digitalocean.com/pricing/
vultr.com/pricing/

Or Scaleway for 3€ + tax.
You miss some extra features like automatic backups and the likes, but for price/performance they are unbeatable imo. (Their ARMv8 servers perform insanely well VPS. The cloud ones, not the baremetals)
Only have servers in western europe though.
scaleway.com/pricing/

this one isn't 100% up to date anymore but gives you a good overview
webstack.de/blog/e/cloud-hosting-provider-comparison-2017/

I think that one working solution was fucking around with embed code.

If I want to implement a kind of BBCode parser, when do I parse it out, server side or client side? and I presume I parse it out after I escape HTML/XSS

Is PHPstorm as good as people say?

where can i find someone that finishes my end of degree project for me? i tried upwork and freelance.com sites but didn't find any non-pajeet to do it, are there any other good freelance sites out there? or ones that specialize in doing homework

how?

Good day sir,
I can do the needful.

more joke

Do you mean the code in the iframes on embedded videos or also on youtube.com itself?

>noob question
>how do i make those pretty boxes?

first time o /wdg/

...

same, i'm here for ages and idk how to make those

What do you love about PHP? I can't think a single thing that love about PHP, and I write PHP every day at work. It's an okay language to write, and it works, but I can't love it or like it.

code

/code

but in []

oh

for(i = 0; i < 100; i++)
printf("thx user");

I just want to make my navbar go from transparent when you open the page to a solid colour when you scroll down a bit

Why is this so hard in react I have to do a million things and in jquery it's like insanely easy

This sux wtf do I do

GitKraken looks cool and works, but at time when i was using it, it was taking too much resources.
It doesn't suck and does it's job at being ide.
like this?
[code
var f = function() { return function() {
console.log("test");}; };
/code]

I just used jquery to do that.

I have a question about MobX.
Can anyone show me an example of store-to-store interaction? I.e. when FooStore.x depends on BarStore.y.

Hey dude, here's what I've been doing now, as a self-taught 29-year old aspiring web dev.

Write a full CV, putting every language and technology you kinda know on there. Write a nice cover letter, saying straight out that you have no real work exp as a dev, but you have lots of enthusiasm etc.

Start applying to any junior job where you kinda meet the requirements (at least 30% of the requirements). Even if they ask for a degree and X years of experience, forget that. As long as the ad is for a language you want to work with, just apply. I don't know where you live, but apply ALL ACROSS THE COUNTRY, everywhere, just apply, even if you would never consider actually relocating.

Within a few days you will start getting replies: tons of phone interviews. Even if your CV was full of shit, on the real interview DO NOT LIE, maybe fudge the timelines a bit if you've been unemployed, whatever. The results from these interviews will give you an idea of where you actually stand in terms of employability. Hopefully you'll make it through a few of these interviews, and they'll arrange for you to have a technical interview, be it live or from home. This is what you want. You want to take as many of these technical interviews as possible. AGAIN, take them even if you would never actually consider working for that company. You just want to see what skills real companies are looking for, what level of expertise they demand.

You will most likely fail most of these technical interviews, but no sweat. Just study what you don't know, and eventually, after 2 to 3 months of doing at least one interview a week, you'll be in much better shape. Then you start applying to the real jobs you want, confident with your interviewing skills.

>I did just decline a position tripling my pay in support because they wanted me to work on an imac.

Um, you do know you can install linux on a mac, right?

just ignore the *'s:

*[*code*] your code goes here *[*/code*]*

let tit: serde_json::Value = serde_json::from_str(&String::from_utf8(ffprobe_cmd.stdout).unwrap()).unwrap();
let title_name = tit["format"]["tags"]["title"].as_str().unwrap();
let pp = config.name.to_owned();
let p = Path::new(&pp);
if p.is_file() && !title_name.is_empty() {
let mut newname = PathBuf::from(config.name);
newname.set_file_name(title_name);
newname.set_extension(p.extension().unwrap());
fs::rename(config.name,newname);
}

There is some html code for actual embedding and it can have parameters.

Guys, is a good site? That is, chiru.no? Because holy fuck look at that index.php

Thanks for the input.

I considered the Pi option also to gain some knowledge on how to set up a server, but I think my current ISP won't give you a static IP unless you pay extra.

Testing.

if (user) {
alert("thanks");
} else {
alert("faggot");
};

>gain some knowledge on how to set up a server
May be even better with a VPS since you can easily make and restore snapshots or just reinstall it in 1-2 minutes, in case you ever need to, while experimenting with things.