/wdg/ - Web Development General

IRC:
>irc.rizon.net/6697 (SSL)
>#Sup Forumswdg
>rizon.net/chat/

Last thread:
Web development roadmap:
>github.com/kamranahmedse/developer-roadmap/
Master HTML, CSS and JS:
>developer.mozilla.org/en-US/docs/Learn/
>developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model
>github.com/getify/You-Dont-Know-JS
>developer.mozilla.org/en-US/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture
Web Standards:
>w3.org/TR/html5/

Code school:
>freecodecamp.org/
Excercises:
>codewars.com/
>regexone.com

Code editor:
>github.com/Microsoft/vscode
Online code editor:
>codesandbox.io/
Browser support:
>caniuse.com/

CSS frameworks:
>foundation.zurb.com/
>getbootstrap.com/
>bulma.io/
Static Site Generator:
SSG based on Ruby:
>jekyllrb.com/
SSG based on nodejs:
>hexo.io/

CSS pre-processor:
>sass-lang.com/
JS compiler:
>babeljs.io/
>typescriptlang.org/

Popular frontend frameworks in 2018:
>reactjs.org/
>vuejs.org/
MEAN stack
>mongodb.com/
>expressjs.com/
>angular.io/
>nodejs.org/
LAMP stack:
>Linux
>apache.org/
>mysql.com/
>php.net/manual/en/

Backend web frameworks:
.NET:
>asp.net/
python:
>djangoproject.com/
>flask.pocoo.org/
Ruby:
>rubyonrails.org/
PHP:
>symfony.com/
>laravel.com/
Java:
>playframework.com/
nodejs:
>expressjs.com/
Haskell:
>yesodweb.com/

API query languages:
>odata.org/
>graphql.org/learn/
Databases:
>memcached.org/
>redis.io/
>postgresql.org/
>mariadb.org/
Server:
>nginx.com/
>aws.amazon.com/

Web related conferences in 2018:
>github.com/asciidisco/web-conferences-2018

Other urls found in this thread:

issuu.com/theatlasmagazine/docs/vitality
developer.mozilla.org/en-US/docs/Web/CSS/font-family
developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals
developer.mozilla.org/en-US/docs/Learn
flexboxfroggy.com/
developers.google.com/web/progressive-web-apps/
developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web
destroyallsoftware.com/talks/wat
twitter.com/SFWRedditVideos

I have a button. I added a translucent box to the button via :after. How can I get the translucent box to clip to the button?

What languages would I need to learn to create a rental property reviews site? I’m guessing other than the code for the site itself, it’d have to have some kind of database backend to handle user accounts, property listings and reviews

PHP is perfectly suited for this.

Don't listen to the JS shills around here.
You would only get lost in fucking callback hells and dependencies mess.

A classic LAMP stack is all you really need.

You could try a nice PHP framework like Symfony or maybe Laravel if you are a beginner, with a classic database like MySQL.

So, in the end, you would need to learn :
- HTML
- a bit of CSS
- Maybe a bit of Javascript
- PHP
- MySQL

>Web Development General
>Don't listen to the JS shills

>You would only get lost in fucking callback hells
~confirmed for not knowing how to utilize and write modern JS

>dependencies mess.
Don't composer and NPM function fairly similar?
I talked with some user about JS/PHP dependency management a while ago and it turned out, that even the configuration files look almost the same between the two.

Does anyone know of a javascript plugin that shows pdfs like this?

issuu.com/theatlasmagazine/docs/vitality

The only reasonable user on this general

The problem was that my buttons weren't relatively positioned.

Bros web design is so fuckin dull. I just wanna write some JavaScript but I gotta make a site first.

>building an upvote/downvote system in PHP
a good idea or a bad idea /wdg/?

> implying modern web dev revolves around Javascript
> implying Go, PHP, Java, Python, Elixir, and way more established battte-tested technologies don't exist
> implying async paradigm makes server-side developement easier
> implying a composer "vendor/" folder can be as messy and heavy as a "node_modules/"

I always thought web dev wasn't for me since I worked with PHP, but then after fully embracing JS and Python, I realized it wasn't me that was shit, it was PHP.

>tfw you see the first tag you've spotted in years

but even Sup Forums uses them

Good idea user

> implying modern web dev revolves around Javascript
As if I said that.
Though JS plays an ever increasing role, especially with the rise of those various frontend frameworks and Node.
PHP may still be more common, but that's also because there is tons of legacy code and wordpress work out there.
> implying async paradigm makes server-side developement easier
Compared to only using sync methods and syntax? Yes it obviously does with the nature of how the JS event loop functions.
Especially, when you can now even write it in almost the same way as sync code using Async/Await syntax.
> implying a composer "vendor/" folder can be as messy and heavy as a "node_modules/"
Don't know about that really, but yeah.
Modules depend on modules, that depend on other modules.
Depends on what you feel is messy in that regard.

>general about JS and PHP

get off my Sup Forums

This is web dev general,
what were you expecting ?
Chats about C and Assembly ?

Bros what is new in the web development world this week

oh yeah because smartphones are so much better

Sup Forums is a great example of what not to do tbqh

its why i consistently recommend python as the beginner starting point

Python is really great since it has so many uses, from networking, data science, bioinformatics to web dev. There are numerous fields for Python and it is a decent programming language as opposed to PHP which is not even that, it's a scripting language.

PHP is all right for small sites, simple contact forms and so on. PHP is the language for the poor who don't know any better than WordPress and need a cheap shared hosting package to go with it.

Yep, more than that though, I think a lot of python learning materials tend to be really focused on teaching people who know nothing about programming. Automate the boring stuff is a great example. Or sites like fullstackpython that do a phenomenal job at visualizing how everything works.

out of all the threads, you complain about one where people are actually trying to learn and build things and not just shill the latest iProduct or show their arch desktop

>>>/dpt/

web then:
>request an URI
>get served a resource it identifies

web now:
>request an URI
>get served 5MB of javascript your browser needs to execute in order to, 68 XHR requests later, assemble an ephemeral, unbookmarkable, unsaveable "resource"
>fuck you grandpa, it's not a website, it's a web """""app""""" crafted with love by artisans

web then wasn't ever that easy lmao
but nice try

Yeah, I loved exclusively using low-level html tags for everything and enjoying wildly different behaviors across browsers.

that's because web devs wanna kill native applications, since it would be more convenient for them (less languages to learn). whether they're being successful is another story, but let's see where this goes.

wake up aniki ;_;

But there's already react/etc
Meh, it was in the early-mid 90s

I didn't really "get" react at first, and I'm sure I'll eventually move on to some hot new functional framework, but god damn, life is so much easier with react.

who in their right mind would want to jump through iOS store requirements and have a separate android codebase vs a web-based app?

It's not about languages to learn, only beginners really care that much about languages, everyone else learns new languages (and works with them) all the time. Having to develop and maintain multiple codebases for no real reason is a tremendous time and money drain.

Once PWAs really take off (soon now that apple is finally on board) we're in for a good time seeing as like 95% of current "native" apps don't need to be native whatsoever. Electron can finally die too for that matter.

How do i centre align a tag in HTML?

font tags are outdated. wtf

So my page is made up of two columns. The first column is 241px. My second column takes up the rest of the screen. I've tried to do this a few ways, one using JS and one using CSS, but they've failed me both times.

In CSS, I tried having the second column's width equal to calc(100vw - 241px) but the second column ends up being too wide and falls to the second row.

In JS, I put a call to the function named setColumnWidth in the $(window).resize() function, which works a bit better than the CS option, but occasionally, the screen is resized in such a way that it messes up and the second column is resized to a number slightly less than what it should be (like 10 pixels less)

help

How else would i change the font, i started learning HTML 2 days ago

>but the second column ends up being too wide and falls to the second row
Don't use floats for positioning, just make both columns absolutely positioned, with top: 0 for both and left:0/right:0 for the two columns respectively.

developer.mozilla.org/en-US/docs/Web/CSS/font-family

Use CSS, or if you absolutely don't want to load external files, tags or style="" attributes.

Through CSS. developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals

BTW MDN is fantastic for learning basic web dev developer.mozilla.org/en-US/docs/Learn

forgot to ask, what are you using to learn HTML, that tells you to use a font tag?
Or did you just stumble upon it yourself?

LITERALLY flexbox
learn it user

here: flexboxfroggy.com/

Does exactly what you want without any extra JS or css calculation bullshit

Could someone tell me what makes PWAs special? From what I understood it's a mix of apps and sites, and apparently users can access info offline. Is there something I'm missing?

developers.google.com/web/progressive-web-apps/

Should all be easily digestible tbqh

Fucking hell i literally dont understand shit here, Should i be learning CSS alongside HTML? Also i'm literally just using notepad and saving files as a .htm and opening them in chrome

> Also i'm literally just using notepad and saving files as a .htm

Oh, okay. It was all a joke. Nothing to see here guys.

stop bullying me

developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web

Whats the best editor, was thinking of going with MS Visual

I went through the flexbox froggy tutorial and it didn't really teach me what I'm looking for, maybe ill draw a picture

>i'm literally just using notepad and saving files as a .htm
kek

if you're for real, good luck on your journey, user

>notepad and saving files as a .htm
seriously, what resource are you using to learn that stuff?

You can and probably even should learn HTML and CSS side by side.
Learn how to define parts of your site with different tags and then learn how to style them in the way you want.
Once you have that down you can also add JS to the mix and start to make things interactive, but don't rush it.

what this user posted -> I would recommend you install a good editor, that at least gives you proper syntax highlighting.
Check out "vs code", "atom" or "sublime".
My choice is vs code, but use what looks most appealing to you.

VSCode is comfy and no learning curve.

i am not joking i am genuinely using notepad, whats wrong with that? helps you learn from scratch

Laugh all you want.

One day, you're going to work for me faggot

well you have 2 columns.
So you have a wrapper with display: flex; and 2 divs inside it, one with a fixed width of 241px and another with flex-grow: 1; that will take up the rest of the space.

Post a jsFiddle if you want, if you are stuck with that.

Pick one you like most, but I think for beginners VSCode is the safest due the amount of hand holding. Although I think brackets and atom are also safe choices.

No, no, don't use that. You should use Adobe Dreamweaver, that's what all the professionals use.

More power to you, user. I'm not trying to bully, just saying wow... you really are starting from scratch.

no it doesnt.
That's like saying you are using a rock instead of a hammer as a tool "because it helps you learn from scratch"

...

oh shit, it worked, thanks user!

I recently escaped North Korea, so all this shit is new to me.

don't you start with this shit now

You're not doing yourself any favors. It's just more typing and more stumbling because you don't have syntax highlighting/checking, autocomplete, or indentation.

fuck i feel like an idiot, a whole year of webdev and I just realized you can put the media rule in the link to the CSS like:

I hope you bundle it all into one file for production. Try to have as little requests as possible.

Usually, because there is still a great deal of shared markup, I'd put the css in the same file and use media queries in the css. Or at least be linking a base file, but it could add more abstraction than it's worth.

this, too

Yea, I do that, but having that giant ass CSS file has always been a pain to manage, so knowing this will help a lot.

>Try to have as little requests as possible
This is pointless with the advent of HTTP/2

>giant ass CSS file
Unless you're working on an actual massive project, a giant css file is probably due to a lot of redundant styles.
Can't really fuck up @media at the bottom of the sheet.

only the deployed output should be bundled.
When you are working on the source you still have all your individual smaller files to work on.

Do any of you guys have personal websites/blogs?

fucking soyboys ruin the programming industry.

Yes, I've posted it here before. I deleted the digital ocean droplet that it was running on like a week ago tho because I didn't update it for months. The site and the database is completely saved so if I feel like making my site live again, I can easily.

>only the deployed output should be bundled.
I prefer using webpack dev server, it's super comfy

update your js and your page refreshes

so do I,
but you were talking about it being harder to manage, which implied, that you were working on a single huge file somehow.

fyi the browser still ends up loading both stylesheets, no matter which one is being applied. Although I'm not sure whether or not they prioritize the one that's going to be used initially.

i could be wrong, haven't tried it, but you could probably use if statements in PHP or AJAX to load only one CSS at a time and the load the other when the conditions are met.

that wasn't me. but you're right about the suspicion of user using a giant file somewhere.

I will never get over how much of a fucking mess web languages are. PHP, JS, HTML, CSS -- all are complete messes.

and for that user's edification, the source-map npm can be used to maintain the semblance of dealing with separate files while still leveraging webpack and the dev server

post an example and start a discussion.
(no PHP, that's easy mode, and no "[] + {}" memery)

destroyallsoftware.com/talks/wat

Wordpress

es6, sass, and shit like react eases this massively

>soy humor

How about calling functions by resolving strings because of a historic lack of first-class functions?
$arr = array(1, 2, 3);
function square($x) {
return $x * $x;
}
$arr = array_map("square", $arr);
// $arr == [1, 4, 9]
Is that enough of a mess for you?

I never do any real lifting in PHP because this is CURRENT_YEAR, but holy shit is that for real?

lel

>holy shit is that for real?
Yes. PHP actually has first-class functions nowadays, but that used to be the only way to "pass" a function to another function.
Nowadays functions can accept a "callable" parameter, which is usually just a function, but for historical reasons can be a string that resolves to a function name.

PHP is full of garbage like this.

huh, that's interesting.

ah, so it's vestigial

Yeah, you could definitely do that. Also there's always the option to redirect to a mobile version of the page and return a different set of resources, based on user-agent. This is what Twitter does, but they probably have more of a justification for maintaining an entirely separate mobile UI than most other sites do.

this
it's unlikely you'd have a mobile UI that didn't have a significant common base with a different media

I should mention that passing a function is still shit in PHP and the "function_name" calling convention is still used today and is not considered legacy.
This will not work, because functions are not variables
$arr = array_map($square, $arr);
That would resolve $square to undefined, apply no mapping, and assign an unmodified $arr back to $arr

This however, WILL work
$arr = array_map(square, $arr);
But will also throw a notice. PHP will see the token 'square' that it doesn't recognize, and assume it's a previously defined constant. Because it's not, it will fail to resolve the constant to a value, and will default to resolving the constant as a string of its name (yes, typing random undefined gibberish anywhere in PHP code is automatically converted into a string as long as it can't be parsed as something else), throwing a notice in the process, and then that string will trigger the old string-function calling convention.

The only other way to do this that isn't abhorrent is to use an inline function
$arr = array_map(function($x) { return $x* $x; }, $arr);
which works fine and doesn't throw anything.

>*covers ears*
>LALALALALALALALA
I can't hear you.

honestly, there's nothing wrong with just passing just the word "square" since ( ) would be an arbitrary addition if you already differentiate variables with $

...

...