/wdg/ - Web Dev. General

I forgot to put the subject in edition

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

> Discord
discord.gg/0qLTzz5potDFXfdT

>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/
youtube.com/watch?v=JxAXlJEmNMg&feature=youtu.be&list=PL7664379246A246CB lecture series.

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

>Backend development
en.m.wikipedia.org/wiki/Comparison_of_web_application_frameworks
backendDevelopmentBookmarks.md

>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
youtube.com/watch?v=pB0WvcxTbCA - "WATCH THIS IF YOU WANT TO BECOME A WEB DEVELOPER! - Web Development Career advice"
youtube.com/watch?v=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
>NEW!
openshift.com/

Other urls found in this thread:

learnxinyminutes.com/
docs.angularjs.org/api/ng/service/$http
codepen.io/Pixelbark/pen/BzKZZa?editors=1011
codepen.io/SitePoint/pen/MwNPVq
typescriptlang.org/play/index.html#src=interface IBaseInterface { baseProp: string; } class Class { public property: IProvidedInterface = { baseProp: 'asd' }; }
typescriptlang.org/play/index.html#src=interface IBaseInterface { baseProp: string; } class Class { public property: IProvidedInterface = { baseProp: 'asd' } as IProvidedInterface; }
realpython.com/blog/python/fingerprinting-images-for-near-duplicate-detection/
github.com/jteeuwen/imghash
phash.org/
youtube.com/watch?v=pB0WvcxTbCA
twitter.com/SFWRedditGifs

got any good websites for learning c?

learnxinyminutes.com/ is an ok resource

why do people sometimes suggest to offer services in fiverr? how is that not worse than using freelancing websites?

Why do no text editors auto complete the brackets? I've tried with Atom and Sublime Text.

you really shouldn't be manually coding html or xml. Use a module

I'm just learning HTML. I don't know what a module is.

most every web editor has a emmet plugin

ok well similar as it is in javascript, at the top of each document you usually have a list of imports, like:
from yattag import Doc, indent
from bs4 import BeautifulSoup
import re
import os
import shutil

those are modules. Yattag is one that is helpful, because you can write html quite easily. All you have to have is a list of elements you want to put in your document and where, and you can do this:
with tag('html')
for element in elements_for_document:
with tag('element'):
text(element)

and it'll generate something like:

First element in array
Second element in array


And while we're on the subject html is not a "language", its a document write-up format. Python and javascript are, and they generate html code, generally speaking

>And while we're on the subject html is not a "language"
html and css would have been a unified programming language if they were designed properly, which is why people use HAML and SASS now and libraries like jQuery that provide DOM API that should have been in the first place

HTML is properly designed, as a document format. The web was never intended to be an all-purpose application delivery platform and HTML was never designed to be a GUI framework. That's why issues like XSS have remained unsolved since 1995.

soup.title
# The Dormouse's story

soup.title.name
# u'title'

soup.title.string
# u'The Dormouse's story'

soup.title.parent.name
# u'head'


this is from the python site

I have documents that (obviously) have more than one or element
Is there a way to find the direct link to them, too? I'm not fond of the soup.find(), feel like it takes up too much time

Short question about AngularJS, I'm currently trying to get into it.

How do I restrict the access to specific views, as they are only some html / js combos? For example a user is allowed to access /userInterface/userSettings, but not /userInterface/editUser (which does some administrative stuff).

Also, how are form things handled? Let's say I have the overview of users, and a form to change the user's name. In that form I set a new name, press the save button, and then end up at /userInterface/saveUser or something similar. After that I get redirected to the overview, and I get to see the updated name in the list.
If I'm not mistaken, in Angular it'd send the form via AJAX, then load the overview. But what if the "load overview" call is faster than the "saveUser" call? Then it'd load the overview first, with the old username, then save the new username. How is that problem avoided in Angular? Or is there no built-in way, and I have to add it manually?

>The web was never intended to be an all-purpose application delivery platform
doesnt matter what was originally intended, thats whats happening. All software companies including MS, Apple, Google, etc are all pushing for more cloud based web content. You probably have more web apps on your phone than installed binary apps. what was originally intended doesnt mean shit

>and HTML was never designed to be a GUI framework
doesnt matter what it was originally designed for, it is becoming one. for a long time web programmers had to rely on Flash for dynamic client side GUI content, but now javascript and html5 is catching up to where it should have been from the beginning

Doesn't matter when considering WHAT? Doesn't matter when you talk about how it was designed? If you talk about the design process, what it was originally intended to be is ALL that matters. That guy didn't say it was good for its purpose nowadays, he just said it was properly designed.

Jesus Christ, go back to high school and learn to read and comprehend.

Wordpress deving is turning me into a Pajeet.

XD

>Resricting access to specific views
I've done some commercial projects and we've decided not to "restrict" access anywhere because it's quite hard to implement. We just hide the admin components from the users but this does not prevent them from going through the front-end code themselves and figuring out how things work. It's going to take some time to un-uglify the code though. What you want to control is the access to your APIs. Don't let unauthorized users to pull data and more importantly: do not let them modify data that they should not modify.

You could try controlling access to html templates via nginx / apache but I think it's not worth it.

>POSTing information via ajxa and handling asynchronous code
I take it that you haven't done a lot of async programming yet. This is where JavaScript truly shines, the language was built to be written in an asynchronous fashion. When you send a http request with Angular's $http module, it will return you a promise. Check out: docs.angularjs.org/api/ng/service/$http

The idea is that you send the ajax request and write what's supposed to happen after a successful response into the .then -part of the $http call. If the API responds with the updated object, you could use that to update the variables in your local $scope, or you can for example redirect the user and let the next controller fetch the user's data again via another ajax request.

Whats a good PHP framework to combine with react.js?

With React you benefit most, if your backend is Node, because you can prerender your views on the backend and provide a snappier experience to the user. Otherwise, use whatever is good at spitting out JSON.

I want to learn javascript and currently practice on FCC. What book should I choose to deepen my understanding?

Okey, I'll look into it thanks

Where should JS scripts go? On top or the bottom? Or does it depend (and on what)?

When should I use window.onload vs self calling functions?

I'm kinda doing random things when I need small functions on my website, I basically put the script tag on the bottom and inside I just write small snippets of code, like changing some colors based on scrollTop, some functions that start audio/video on button press etc. Mostly it is not even OOP, just one after the other because it's only a few lines of code. How can I organize that? I'm pretty sure this is a bad practice.

Depends on what it does. As a rule most scripts should be put at the bottom and small bootstrap scripts should be put in the head.

So it seems that socket.io seems good for us, because we are exactly making what it seems to be the best at, realtime applications.
Is it a good idea to use react.js with that, or is it a bit overkill? Cant find much on the web for it

Wordpress makes me die inside. Sorry you have to deal with that cancer, user.

Which web framework should I go with in Go? or should I just stick with the built in http package?

There are people in my course that unironically love wordpress and use it for every project, also they use shitton of plugins and frameworks like Genesis or whatever. I don't understand that, especially because they seem smart and really talk enthusiastically about it like it really is great. Ofc, they are not doing web applications with it, but brochures, blogs and webshops for small to medium sized companies.

Built in and packages that mesh with the built in. I recommend httptreemux as a replacement router, if you need dynamic paths.

Hey guys, do any of you here develop simple websites for a quick buck?

I've been asked by a couple of people recently if I could create a simple webpage for them. I used to say no, because doing shit from scratch in HTML/CSS took too much time and wasn't worth the money. But now I'm thinking I could simply sell them a Wordpress install with some free theme that I'd customize to their liking. Plus there are enough plug-ins to cover most use cases.

Does anyone do that?

How much do you charge?

What hosting do you use?

Do you use another CMS than Wordpress?

>You shouldn't manually write html
t.pajeet

It's easy as shit to do certain things, which means more money for less effort.

Can anyone have a look at the following:

codepen.io/Pixelbark/pen/BzKZZa?editors=1011

any reason my click() function isn't working at the end of my js file.

wahey

Because it's inside an iframe.

It is? I'm not seeing it.

What do you guys think of iframes?

disgusting. Post the code.

Hey guys, I'm trying to test out some JavaScript in a local html file, but it won't play at all. Why is it not playing? Is the browser blocking

I'd rather use ajax mr satan

check the browser console

Would you guys say that it's easier to get into front-end than back-end if you lack a relevant bachelor's?

It's easy to get into both if you google and watch enough pajeet video.

But I hate Wordpress!

You'd be surprised at how many videos starts with "Hello friends, this is pajeet" that covers stuff other than Wordpress.

I'm making a countdown clock. I copied the html, css, and JavaScript into a single file and it says for me clock is null on line 70

codepen.io/SitePoint/pen/MwNPVq

A friend asked me to set him up a band site, what I did was buy a Wordpress theme from someone else, and had him pay 5 times more.

How do I maintain the SEO of a website I'm maintaining? Most of the content will be the same, but the URLs will end with .php instead of .html now

I can't afford to let the rankings drop

post your shit

I need some advise on what I should do to go from NEET to someone who atleast earns some money

In the past 2-3 years, while each year studying something different and dropping out, I've been learning programming on and off on my own. I've learnt C#, python, html and css as well as reading some books concerning programming concepts, but the only project I've ever done with any of these was a C# project. As a result, I currently find myself in what I believe would be between beginner and intermediate, where I'm not clueless but I'm not entirely comfortable (I only feel slightly comfortable with C#).

I also need to start making some money, and the two paths I see are stick with C# and try to find employment, or pick html and css back up and learn all the other stuff to freelance webdev. The issue is how long it would take me to both reach a point where I consider myself employable, and how long until someone employs me.

With C#, I'd become employable far sooner, but I don't know how long until someone would employ me. Webdev on the other hand, would take me far longer to reach an employable point, but finding work/a job would be easier.

I have all the time in the world to go full turbo on whatever path I choose.

What would you personally do or advise me in this situation?

So how is Angular 2's first render performance?`Not counting pre-rendering on the Server.

I wonder how well it does against Polymer, both polyfilled and native.
I just can't find any good comparisons, the only articles comparing these two are made by poo2loos trying to lure people on their blog with the big buzzwords and who end up conveying no useful information.

nice!

That's exactly what I plan on doing. How did you manage the hosting part and domain name? Did you tell him to get an account at whatever provider and manage it himself or did you do it for him too?

I've thought about getting a cheap VPS and hosting all the sites there for a small yearly fee, shouldn't be too hard to set up. Has anyone done this successfully? The only thing I'm afraid of is e-mail: most hosting providers offer e-mail accounts with custom domain name, don't know how hard it is to set up. Does google domain still exist btw?

The hard reply: Nobody can decide but you.

I'm in a similar place, people will just respond with their preferences and/or having their job market in mind.

Sucks because backend is so fucking diverse I have no idea if I'll choose the wrong or right thing, so I ended up focusing on frontend for start where things are clear cut and I'll try to get hired from a company that uses C# or some other good language (meaning no PHP shit) where I could potentially dive into backend later.

Can anyone tell me why picrelated doesn't work in TypeScript?

Kiss yourselves. How can you be so lazy?

>Kiss yourselves
That's cute.

Thanks for the answer, that was helpful.

>Restricting views
So basically, I shouldn't care about them grabbing the way the page looks, as long as they don't get the data. Sounds easy enough, as I already restrict the access to the endpoints.

>POSTing
I guess then something like, AJAX for the form, then loading bar or something similar until it returns and then redirects to the overview, then loading bar until it loaded the overview. Sounds easy.
Yeah, haven't done too much AJAX stuff except pulling some data from time to time.


So ouh, I really like how the AngularJS's AngularJS is broken.

I copied and pasted each section in their proper parts in a single html file. CSS under style and JavaScript under script tags

I see, thanks for the insight user

I copied the js from the js section and put it in script tags in the html. Now it looks like it works.

Hey team

So I've just completed a Web Dev course.

I'm great at CSS, pretty good at JS / JQuery and PHP. My design and Photoshop skills are good and I know enough to make simple apps and build and utilize MySQL databases.

Where to next???

It seems the jobs available are all for Node, Angular, Wordpress, Bootstrap SASS, Drupal, Agile Scrum etc...

All I want it a job where I won't be doing grunt work for years on shit pay.

bump

Class properties can not be optional. Probably the same applies to types of class properties.

Node, Angular, Wordpress, Bootstrap SASS, Drupal, Agile Scrum etc.

That has no effect see for typescript fiddle
typescriptlang.org/play/index.html#src=interface IBaseInterface { baseProp: string; } class Class { public property: IProvidedInterface = { baseProp: 'asd' }; }

>what was originally intended doesnt mean shit

What was intended is important, as is the history and origins of the tech you use. If you're a developer you should understand the constraints of your platform, and always bear in mind that the reason we do things a certain way isn't necessary because it is the best possible way to do things.

Pretty sure it's a bug. The compiler can't check against an interface it does not have defined. What it should be doing is checking against the base interface. Make an issue on GitHub. In the meantime, if you really know what you are doing, fuck the type system sideways with a type assertion.
typescriptlang.org/play/index.html#src=interface IBaseInterface { baseProp: string; } class Class { public property: IProvidedInterface = { baseProp: 'asd' } as IProvidedInterface; }

You would barely be able to scroll through it

it's a dictionary in html though so its not meant to be read

Database design fun!

Let's say I have a table named "Image", which represents a single image with a directory link and other data like filesize, width etc...
Now this image has a source. It came from somewhere. Either I got it off pixiv, or some user uploaded it.

How do I best represent this source, and how much splitting of tables is too much? Initially I just added a simple "source" texfield on the image. Works fine, but it doesn't tell me much.

What do you think about something like this:

table image
table image_has_source
table source


Where the image_has_source contains a link/description, and the "source" table functions like an enum of source types. (Pixiv, deviantart, local import from disk, user upload etc...)

What say you /gee/?

Use NoSQL - RethinkDB, CouchDB or Riak.

Get the fuck out.

No.

kys

No :^)

You should save your image in the database, otherwise you are at risk for consistency, integrity and duplication issues.
Modern relational databases handle storing tons of binary data well.

Creating all those tables violates reason and normalization rules.
Just create one table with the following columns
id
original_filename
image_bytes
created_at
md5
source

Calculate and store the MD5 on insertion to check for duplicates.

if an image can only have one source, just use a foreign key to the source,
image.source = source.id

>using MD5 to check for duplicates
Don't. You'll store duplicates anyway.
E.g: You have a 500x400 image of your waifu, and some months later, you find the same image, but this time it's 499x399. You save it and the MD5 is different because of difference (even though it's tiny).
This
>realpython.com/blog/python/fingerprinting-images-for-near-duplicate-detection/

There's a ton of these libraries btw. Not limited to python.
github.com/jteeuwen/imghash
phash.org/

>it's a dictionary in html though so its not meant to be read

a-all in one line?
user why

What course did you take? I'm searching for a good one at the moment. The one I'm taking on Coursera is somewhat meh

Yes, there are many, but I linked that RealPython post because it clearly explains the problem with MD5 hashing and picture duplicates. I should've pointed that out

I did a polytechnic 1 year course.

I'm not too keen on learning online from scratch - there is a lot you can miss and be completely clueless about.
Being able to interact with developers with industry experience was excellent.

Anyone have any guidance on what to study after the basics???

is PHP still worth learning or is everyone moving on to Node, Rails, Django etc?

Yes. Don't give into the hipsters and their meme langs, PHP is still fine.

is PHP PDO a meme?

82.1% of websites use PHP.

Thanks, I unfortunately couldn't get an internship this summer since I have to stay at home for something unexpected and saw a few PHP books at the library, gonna start working on that

Yes, if you don't care about being pajeet and just want quick money.

Absolutely. Only use mysql_totally_real_this_time_honest_escape_string.

>Anyone have any guidance on what to study after the basics???

Look at the video in the OP
> youtube.com/watch?v=pB0WvcxTbCA - "WATCH THIS IF YOU WANT TO BECOME A WEB DEVELOPER! - Web Development Career advice"

Its almost as if people ask this question a lot, so we put the answer in the OP so they could ignore it and carry on asking.

I tried to make a form better. I'm not sure I was 100% successful.

Is the full-width "+" button badly done? I feel like it might be.

Forgot image.

Spacing and sizes are terrible.
+ button should be at most the size of the click and drags, and inline.

Yeah m8 I know when I'm getting trolled. Good one though.

Whats the color scheme family

I've been trying to redesign the same fucking form for over a week.

The form's purpose is to let clients commission an artist. It's fucking impossible to design because the data is super nested.

Artists can decide on any number of categories for clients to organize reference material around. This is typically going to be subjects of the imageā€”ie, the people being drawn. When you go to commission an image, you can create references under those categories. So if you want an image of Moot and Hitler making out, you can make two characters. For each of those characters, you can add a description, and any number of reference images.

The level of nesting (Categories -> Things which belong to that category -> Reference images for each individual thing) makes designing this form essentially fucking impossible. Combine that with my own utter lack of any design skills whatsoever, and it's beginning to drive me fucking insane.

Does anybody have any bright ideas on how I could do something like this? It's clear that every change I make on my own just makes my design worse, by some miracle. I know Sup Forums is probably not the best place to go for this kind of advice, but I'm actually going fucking insane here.

If I know the following, will I be able to survive as a junior backend developer?

>html (advanced)
>css (advanced)
>sass
>bootstrap
>making custom style guides / frameworks for projects
>basic command line
>python (basic; i.e. variables, functions, classes, etc.)
>flask (intermediate)
>writing tests and continuous integration
>git

I don't care about hire-ability, I just want to know if these skills are enough to survive as a junior dev? And if so, how advanced / well would I need to know them?

Throw in a WSGI server (like gunicorn, uWSGI, etc) so that you can run your application as Flask's default server isn't good enough for production.

Improve your command line skills so that you deploy an application with little hassle (bonus for scripting it to achieve one-step deploys and get closer to the other side of CI, Continuous Deployment.)

Also learning how to properly set up a database and maintain it along with your application is very valuable.

Keep learning Flask and Python if you'd like to be a backend Python web developer. The other skills you listed are great.

I have to become more proficient in python (learn the intricacies of the language like decorators, etc.), more proficient in flask (becoming comfortable with ORMs, learn how to use more of the popular libraries like login, etc., learn how to do extensive testing include ci and cd), learn to deploy beyond just git to a vps, and a shit tonne of other things.

And then when that (which is fucking impossible, theres just no fucking way I'm going to learn all of that from just online resources), chances are the company that hires me is going to tell me "that's great that you're semi comfortable with a python framework that's used by 1% of the industry, now learn this brand new language like Java and this framework that we're using".

I'm so incredibly, royally fucked its not even funny. I dont even know how I thought this was possible at any point.

Fuck my life

And what will be in common with Java? OOP transcends languages. Sure there are small details of every language you'll have to learn, but the patterns and general concepts as usually the same. The same goes for continuous integration and deployment.

Don't tie yourself to a particular language, just show that you're able to become proficient in one. Your whole career will be learning new concepts. You'll continuously improve, and picking up new frameworks/languages/concepts will become easier over time, because you'll have encountered and solved many different kinds of problems (including the same problems hundreds of times).

You'll also learn a shit ton on the job. Just getting that first job will be the hardest part, so apply, apply away.

OOP and basic programming concepts might be foundational but they occupy like 1/20th of the 2k page book on python. It's the intricacies that absolutely kill me and make me feel like I'm fighting a losing battle.