/wdg/ - Web Development General

/wdg/ - Web Development General

Correctly formatted OP edition

Previous Thread: > Discord
discord.gg/wdg
OR
discord.gg/0qLTzz5potDFXfdT
(they're the same)

>IRC Channel
#Sup Forumswdg @ irc.rizon.net
Web client: rizon.net/chat

>Learning material
codecademy.com/
bento.io/
programming-motherfucker.com/
github.com/vhf/free-programming-books/blob/master/free-programming-books.md
theodinproject.com/
freecodecamp.com/
w3schools.com/
developer.mozilla.org/
codewars.com/
youtu.be/JxAXlJEmNMg?list=PL7664379246A246CB - "Crockford on JavaScript" lecture series.

>Frontend development
github.com/dypsilon/frontend-dev-bookmarks

>Backend development
en.m.wikipedia.org/wiki/Comparison_of_web_application_frameworks
gist.github.com/dypsilon/5819528/

>Useful tools
pastebin.com/q5nB1Npt/
libraries.io/ - Discover new open source libraries, modules and frameworks and keep track of ones you depend upon.
developer.mozilla.org/en-US/docs/Web - Guides for HTML, CSS, JS, Web APIs & more.
programmableweb.com/ - List of public APIs

>NEET guide to web dev employment
pastebin.com/4YeJAUbT/

>How to get started
youtu.be/sBzRwzY7G-k - "2016/2017 MUST-KNOW WEB DEVELOPMENT TECH - Watch this if you want to be a web developer "
youtu.be/zf_cb_Nw5zY - "JavaScript is Easy" - If you can't into programming, you probably won't find a simpler introduction to JavaScript than this.

>cheap vps hosting in most western locations
lowendbox.com
digitalocean.com/
linode.com/
heroku.com/
leaseweb.com

Other urls found in this thread:

opalang.org/
stackoverflow.com/questions/14075918/center-a-table-inside-a-td
caniuse.com/#feat=flexbox
nginx.org/en/download.html
htmldog.com/guides/
youtube.com/watch?v=sBzRwzY7G-k
youtube.com/channel/UCpqYfSWEcyBGorRGvPsHkgg
twitter.com/NSFWRedditGif

First for memes

Is opalang.org/ any good?

the github page is ded

This looks hilariously bad.

does anyone actually use the schema.org stuff?

>2006
>need to make a table appear in the middle of a cell in a bigger table
>just add align="center" to the td and table tag.
>2016
>need to do the same thing
>stackoverflow.com/questions/14075918/center-a-table-inside-a-td suggests two different CSS tricks
>neither of them work

What the fuck happened to HTML? Why is it so complicated now?

actually yes . if you integrate schema.org on your site and check it against google structured data testing tool, you will see how rich snippets are also made when searched in google.

Serious question, is php the only thing that completely ensures SEO?

I've got HTML coming in on one port and the only two options I can think of are an iframe and using PHP such as


The alternative is an iframe with a src of that address.

Just asking, because I can't seem to get PHP working with inline PHP and nginx on my testing computer.

If all else fails, I'll redirect the entire page itself to address and add some more html to it.

In client I have a string of _id, for example it is "1g273fkuydvk12c12...". How can I query this back to MongoDB? I need to somewhat convert this into ObjectId(1g273fkuydvk12c12...) then return corresponding object.

I am using NodeJS with Mongoose. Any idea?

arr = [120,6,3,80,5,2,20,90,22,23,21,4,1]

how do you split this array so items that aren't more than 2 apart from each other form a sequence like this:

[1,2,3,4,5,6]
[20,21,22,23]
[90]
[80]
[120]

even though 1 and 6 are more than 2 apart they end up in the same array because they form a chain of numbers that aren't more than 2 apart.

is this a hard problem or am I just stupid?

sort the data first.

then do your splitting ?
for (i = 0; i < size of array; i++) {
if (i + 1 < size of array) {
if absolute value of array[i] - array[i+1] {
subarray[] = array[i];
} else {
resultsArray[] = subarry;
subarray = new array();
}
} else {
resultsArray[] = subarry;
subarray = new array();
}
}


that's pretty terrible. i'd probably be more inclined to use recursion, but i cbf with that right now.

LLSC stack master race!
(Linux, Lighttpd, SQLite, C)

edit; beyond my shitting typing, that if statement should be

if abs (array[i] - array[i+1]) > 1 )

This guy here with an update.

Failed to get inline PHP working with nginx so I'm going to build the entire page with react js and redirect it from nginx to the service in the landing location. The real trick is going to be keeping the backup page, but I think I can do it the same way as an auth location setting for nginx.

Because fuck PHP and I don't trust iframes for decent SEO.

I have no skills at CSS.

I can't even make a navbar.

Why isn't v-aligning text a thing yet in the year 2016? Seriously now. Nothing quite like having text in a div aligned at the very top because CSS sucks dick.

hey guys, silly question but how do news aggregator sites post their headlines? are they doing it manually or using some kind of live feed?

The 'Brand' is throwing off my nav items.

I can't figure out how to fix it.

"Inline PHP" aka getting URL contents should work, why do you think it's not working for you. Also what is the source of that HTML.

WEW this is why I'm back-end.

How to fix? I'm considering mathing percents and adding tons of unnecessary containers.

Most news sites probably have some sort of RSS feed. And for others it's propaani some kind of scraping.

What are you trying to achieve anyway?

I want the nav links centered regardless of how big the 'brand' is.

>what is flex

What is widespread browser support?

>caring about boomers who use IE10

just use skeleton fagot

caniuse.com/#feat=flexbox

look at all that green.

I tried just injecting that line of PHP into my the static html file hoping I could just echo out the html coming in from a backend service. Instead, nginx leaves the php code in there and Firefox marks it in red as incorrect html code.

I've got a server running that's using reactjs to generate html, it's my own backend otherwise.

I gave up on php and learned rewrite rules on nginx, basically I'm just going to redirect the user straight into the service running react is. Provided I provide a backup page for 502 errors I'm fine.

The downside is I have to build an entire page with react js instead of just part of the page.

>is php the only thing that completely ensures SEO?


Whatever you think SEO is, you're totally doing it wrong.

I know what it's not.

It's not an entire page built from jQuery on the client side so when a Google bot finds my site it only sees the backup page and doesn't render JavaScript.

So I'll render the JavaScript at the backend and give Google only html. Unless it wants to fill in captchas, it won't have to render any JavaScript.

Rename your html file to PHP file?

Tried that too, didn't work.

So I am self taught PHP to a very comfortable and capable level and has lead to a nice job. However I want to start looking at some JS frameworks and such. I have settled on meteor and set up a VM to start doing some Dev for it.

My question now, is what front end/templating to use?
React / Blaze / Angular 2?

My initial thought is to head towards react, anyone use it and have some thoughts/advice? It looks very weird having all the HTML within the JS, with the model and view in the same file.

I'm only using react for server side rendering. I'd typically steer clear from too any libraries, if you need to ask which one chances are you're not going to use it right.

If you've self taught php, you can self teach html/css and chances are make a static website look great without even touching real script. Then learn jQuery.

Because you shouldn't be doing styling with html and you especially shouldn't be doing styling with tables. Tables are for displaying tabular data only. The only reason they were ever used for styling is because CSS was shit.

does anybody here have their own custom stack or I'm just dreaming too much ? I'm sick and tired of XAMPP because wangblows.

Do you even have PHP installed?

Use vagrant for dev environments. Compared to xampp it changes your life.

I generally just run what I need and don't use those packages.
I'd like to configure stuff on my own and not what some other guy thought will be best.

Yeah, its installed. My error was

>Get an EC2 VM
>Setup a virtualhost in nginx for every app you develop

it got better
html is for definition
css is for styling

deal with it nigga

*GTR
* - whichever non-esoteric OS
Go
TypeScript
RethinkDB

become good at styling with css

use bootstrap for alignments

You can use literally any web development language possible (including JavaScript) and have the site totally server rendered and Google indexed.

so you can do a stack without having to install a fucking package ? so I'm the lazy one . huh .

ah nginx, I really have to leave windows . Because AFAIK there's no nginx port in windows ?

>Go

any web dev anons interested in data science?

been toying around with visualizing data using javascript libraries, shit like machine learning from clusters gets me pretty rock hard

>>Go
You are free to use C++ instead, if you have a higher performance target.

a "stack" is just a collection of software, a package. everything is pre configured for people who don't know what they're doing.

nginx.org/en/download.html

or just run nginx from the windows subsystem for linux.

Again, not if your site is built from append statements at the front end. If you've got to load data from a backend and still have Google crawl right, things are different.

>PHP on WIndows

Outdated info. Google indexes client-rendered pages just fine now.

How does one scrape a reCAPCHA image from a site if the URL for the image is mostly generated with JavaScript?

Load the page with javascript enabled.

Meteor is shit. Just use the official(?) create-react-app cli tool for react. Meteor has a whole bunch of other baggage you probably don't want to deal with. (Stuck on an old version of npm, hard to make it cooperate with other frameworks, etc. It also doesn't scale well at all, not that it matters really for a practice thing.)

>anyone use it and have some thoughts/advice?
1. If you're just starting out, the tutorial on the official site is pretty good.

2. Don't worry about Redux/Flux/Webpack and all the other extra shit that goes with React until you have a firm grasp on React itself.

>It looks very weird having all the HTML within the JS
The reasoning is that since parsing and rerendering the DOM is slow, you should do it with javascript instead which is way faster. And JSX isn't actually HTML, it just looks like it. Before execution it gets compiled to javascript document selectors. They're wordy as fuck though, so most people use JSX to keep things clean.

>with the model and view in the same file.

React isn't an MVC framework, and depending on who you ask, it's just the view anyway. Also MVVM is a thing.

No.

No it doesn't. If I Google my website, I see the backup page text. Google will not run jQuery for their bots. Why are you posting absolute bullshit?

They made an announcement about a year ago that their crawler now indexes JS-rendered sites. Maybe your site has some other problem.

>Because you shouldn't be doing styling with html
Uh... what? What am I supposed to do styling with?

>Tables are for displaying tabular data only. The only reason they were ever used for styling is because CSS was shit.
You sound like one of these morons who shun people everytime they use tables because they should be using div tags instead even though that's a lot less practical just because "table" is the word "table" and therefore should only be used for "tables" or your autism is triggered.

>>Because you shouldn't be doing styling with html
>Uh... what? What am I supposed to do styling with?
CSS

Oh, I thought user was telling me not to use CSS with html.

Aligning a table inside a table isn't styling. It's layout. Layout should be done inline. I get that W3S wants to deprecate all HTML properties that are covered by CSS, but the "align" property of table isn't covered by the "text-align" property of CSS. One aligns everything, the other just aligns text. Hence, this is retarded. Now how the fuck am I supposed to align stuff that isn't text? I am almost thinking about adding table cells to the left and right of my table just to split the empty space. I never had to do that with HTML4. Seriously, fuck this.

>making a website
>add one bullshit fact
>if someone copies that fact I know he's copying my shit
Sometimes things are so simple.

I mean, did you know that the Papianera mountain is known for being rich in gold. That's why many old civilizations used to worship it.

In 2000 years everyone will be searching for the lost Papianera mountain, as mentioned on the ancient texts of the internet.

Do you actually have job with this stack?

Learn CSS, seriously. You can do all your layouting with CSS and correct HTML. There is reason why tables are shunned.

Are the Jon Duckett books any good? I can get a double pack of HTML5&CSS3 and JavaScript&JQuery books Prime'd to me for £25.

Why? Seriously. If I want to layout a page with two columns, seven rows on one side with 5 of these split into two columns and two rows on the right side, tables are designed for that purpose. Why would I use anything else? It will just require extra styling and code and will give exactly the same result.

Do that with tables and tell me how responsive it is.

That's what I'm doing right now. The only problem I'm having is centering the damn thing inside a bigger table.

What is the alternative?

Meant to respond to

If you're talking about the books I think you're talking about, they came out pre-ES6 and probably somewhat out of date, unless they released a new edition recently that I'm not aware of. You're generally better off using online resources anyway, the web dev world moves fast.

And regarding HTML & CSS, you really don't need a book, just a brief explanation, a list of all the elements, selectors, attributes, etc., and a browser to play around with.

I've been using Codecademy but Im concerned the best content is gonna be behind a paywall and once I finish their content I'm gonna be stuck.

I've placed the order (apparently I get a student discount too) but I am totally new to development/programming of ANY kind and I figured they'd help me along.

It's [current year], everything you need to know can be found on youtube.
>learn HTML standards
>learn CSS basics and start using SASS as soon as you can
>learn JS basics, learn the module pattern and avoid using jQuery

Okay, any decent channels you'd recommend for that? If you can tell me a really solid one I'm gonna marathon that shit tomorrow and Monday.
Bank Holiday rocks.

>What is the alternative?
Media queries?

You should go find a tutorial on responsive design and probably HTML/CSS. Somehow I get the feeling that trying to put tables inside of tables isn't the only stupid thing you're doing.

Codecademy is a fine intro to HTML, CSS, and JS. Unless they've changed recently, I don't think anything important is paywalled. You should use them to get a feel for the syntax and basic usage, then move on to something like the Odin project or Free Code Camp. (Maybe try FCC until you start feeling stuck, then move on to Odin and vice versa.) htmldog.com/guides/ is relatively short and explains everything pretty well too. Once you get to a point where you don't feel completely lost, the best way to keep learning is to make stuff. Try to clone existing websites, etc. Overall, the main thing is to just practice every single day.

Oh, and don't get scared off by backend stuff. It's not that hard, it's just different.

We used to have a section for that in the OP, not sure what happened to it. Some good channels are:

LearnCode.academy - pay attention to the age on some of the videos. The older ones may not be 100% relevant.

The New Boston - Same thing with the age thing.

Derek Banas - Again, the age thing. A lot of "learn x in y minutes"-type things that are good if you want a brief overview. Just don't expect to watch one of those and go from nothing to expert in 30 minutes.

FunFunFunction - Lots of good general programming advice and intermediate-level JS stuff focusing on functional programming.

Computerphile - Some general interest programming and computing stuff. Most of it is "huh, that's interesting" stuff more than useful info, but there are some nugs in there.

Tom Scott - There are a few videos about SQL injections and XSS attacks that are good. Some other nugs in there too, but most of it is non-computer related

Are you really telling someone to learn jquery over react? You must either suck at React or have an attachment to jquery already - if you have a clean slate then DEFINITELY go for React. Realize that React is harder than jQuery, but when it finally 'clicks' your life will change.

>>What is the alternative?
>Media queries?
What the fuck will media queries do that classes and inline styling doesn't already do in my specific case? You're basically just telling me to use the same CSS properties but with a more complicated way of applying them to the elements.

"Why do simple when you can do complicated?" - W3S.

youtube.com/watch?v=sBzRwzY7G-k
Codeacademy is pretty decent and updated.

youtube.com/channel/UCpqYfSWEcyBGorRGvPsHkgg
This guy does good JS videos as well.

Oh and
>putting tables inside tables is stupid

Like for a lot of deprecation for the HTML5 standard, you have no logical reason to motivate saying that.

You're a scholar and a saint. Cancelled my order and subscribed to all those channels. Thanks ever so much.

One big fixed width div centered. Google for CSS centering. Columns are floating divs.

Why the fuck are you using tables like a pajeet? I haven't used tables since 2005

>Columns are floating divs.
See, this is what I'm talking about.

Columns do the jobs of being columns on their own without any trick. To make a div into a column, you have to make it floating. And that opens up a huge box of potential problems.

Why do you guys have to make everything complicated? It was the same shit back in the mid 2000's when frames became "bad form". It just made the job too easy so W3S decided it was bad.

This is literally like bragging that you're a vegan.

>floating
flexbox exists.

Just another quick Q, why should I avoid using JQuery?

the problem with tables being abused for layouting is you can't make them dynamic.
on your mobile design, you might want only one column instead of multiple.
you can't do that with a table.

do you know what literally means? tables are the most deprecated and useless HTML standard that can't be done with css today.

frames was a terrible idea from the start.

jquery wraps javascript into simpler methods, obscuring what's really happening.
if you only use jquery you'll be dependent on it, so learn without it and then use it if you want to.

besides, today most of jqueries stuff can be done natively.

So HTML > CSS > JavaScript > JQuery is a good order? So I dont become dependant on JQuery?

what you guys are building?
i got no idea what to do

see I only use jQuery only for ajax stuff. The .load function is actually really handy as it lets you load specific DOM elements from an url. For selectors i use sizzle (which is integrated into jQuery) that way i can select objects and still bind them to native JS functions like


#('.objects').addEventListener('pointerdown', something, false);

#('.objects').classList.add('.class');

Not that user, but Facebook's own official React tutorial actually uses jQuery to do AJAX calls.

Not *that* user either, but it's mainly because jQuery does a lot of "magic" shit behind the scenes that you don't really need. Also jQuery selectors are like 1000x slower than builtin selectors and most of the time people are adding it just for that an none of the other stuff it does.

Yes. I wouldn't even put that much emphasis on jQuery. You don't really even *need* to learn it at all, desu.

Clone some other site you like.

Cool, thanks, I'll report back in a few days with progress report.

Of course not.

My dad is an alcholic and I want for me and my siblings to be able to record his level of drunkenness after we talk to him on the phone.

To make this website, what framework can I use that would allow a visitor to select an option 1-10 on a form for example and for the result of the POST to be displayed with a timestamp on an updating view? This will also serve as practice for me because I need to improve my webdev skills, so no WP please.

A qt korean for your troubles.

>what framework can I use that
No framework, every language.

I could do that in PHP in like 10 minutes and I'm a slow and unemployable programmer who's only skill is breaking permissions on every LAMP install.

That's a pretty fucking depressing project you got there, user. You don't really need a framework for that though, just a simple HTML form. If you want to AJAX it, you you can do that easily enough with vanilla JS.

The backend depends on where you're hosting the site and what they have available, but just grabbing the POST and appending it to a .txt document along with a timestamp is probably the simplest way. You can do that easily with any language.

Anyone want to make millions?

Make a recruiting agency for entry-level programmers and web developers.

Infinite money.

I am in constant contact with 4 different placement companies and none of them bother looking for entry-level stuff.

Because nobody cares about entry level and with a good reason. They are a dozen for a penny and cost more effort than they are worth.