/wdg/ - Web Development General

no framework wars edition

>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/

>Further resources
github.com/iRaul/awesome-portfolios - Portfolio examples
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/witudat/kfj94f49/
jsfiddle.net/kfj94f49/2/
jsfiddle.net/pxwrno4a/
jsfiddle.net/witudat/pxwrno4a/14/
jsfiddle.net/witudat/pxwrno4a/21/
developer.mozilla.org/en-US/docs/Web/API/Element/classList
jsfiddle.net/9ck78xwp/
discord.gg/wdg
docs.python.org/3/library/cgi.html
flask.pocoo.org/
djangoproject.com/
yortug.github.io/).
flask-pymongo.readthedocs.io/en/latest/
pythonhosted.org/Flask-MongoAlchemy/
github.com/pallets/flask/tree/master/examples/flaskr/
bogotobogo.com/python/MongoDB_PyMongo/python_MongoDB_RESTAPI_with_Flask.php
bogotobogo.com/python/Flask/Python_Flask_Blog_App_with_MongoDB.php
api.mongodb.com/python/current/
typekit.com/fonts/benton-sans
fonts.google.com/specimen/Raleway
twitter.com/SFWRedditImages

jsfiddle.net/witudat/kfj94f49/

I've got a JS searchbox and I've been trying to figure out how to make the searches open in a new tab without much luck, would appreciate it if someone could help

what about window.open()

Is the 'leveluptuts' 'Meteor level 2' still up to date? It says its for meteor 1.4 and I just downloaded 1.6 on a new machine to start picking it up.

Otherwise, does anyone have any good, in depth, start to end guides for MERN stack?

Thanks, it worked. I did try window.open before instead of window.location but I didn't realise you had to include () and the content within.

I've been playing around with startpages and have been doing fine with the html/css but javascript is an ongoing process.

some unsolicited advice:
- as a general rule, don't extend native objects unless you are absolutely sure what you are doing. string.prototype.replace() is already capable of doing exactly what your replaceChars() function does, but...
- ...even though you make sure to replace spaces with + the user is still perfectly able to produce invalid urls (try typing anything containing # or & and see half of the query string get swallowed). use encodeURIComponent() to ensure query strings are escaped properly.
- is a self-closing tag. you don't need .

good luck

or like this with a simulated button click?
don't know if the popup blocker kicks in otherwise..

jsfiddle.net/kfj94f49/2/
only for pressing enter, didn't bother setting it up for the actual mouse click

most (properly designed) popup blockers only block popups that are not created as a direct result of user input. running window.open() in click or input events is generally safe.

yours looks a lot neater

Same person

Is there a reasonable way to detect text in the input box and change a container based on it? My idea was for a container to display a logo for the current modifier.

So if the input box started "-a " it would show the amazon logo in the container and the same for other recognised modifiers. I should be fine with the CSS but I kind of trial and error my way through anything JS

so get the input value on every press, like you do now with the enter-check, but instead check the first 2 characters of the input string and see if the logo needs to be adjusted for it or not.

try something like this
jsfiddle.net/pxwrno4a/

thanks user that's basically exactly what I want, im not sure why its not working in my page currently but i'll try figure it out

Let's suppose that web development die right now.
What other paths can we follow with the abilities that we acquire in order to develop webs?

male prostitute?

What is your definition of 'web development' in this case?

You could use spiders.

Why would web dev die? Like, native dev is first to go and at that point it would only strengthen web development.

Programming is programming and development is development. Once you’ve learned one flavor of it you should have no problem migrating to a different one.

I just wanted to know what other paths we have, I don't think that web development will die.
Im a begginer in this world but maybe (I dont really know) we can get involved on the internet of things for example.
Correct me if Im wrong.

>Programming is programming and development is development
Could you explain that please?

lmao

If you are a web developer and you can actually program (i.e., not just copy/paste frameworkless PHP and JS from StackOverflow), then you can program. You at least have what it takes to work as a junior developer on projects written in a garbage-collected OO language. This is most projects today. Go find another programming job.

That being said, the most common path for those leaving webdev for greener pastures is mobile.

Is there a less limited navbar than Bootstrap's?

Not many people eat spiders in the West.

> is mobile
Like learning to develop android apps for example?
lel

>Like learning to develop android apps for example?
Android or iOS. iOS is generally more lucrative.

Basically what said, if you know how to plan, program and develop in one particular scenario using a particular set of tools, you shouldn't really have much problem expanding your horizons and trying out different languages and frameworks.

jsfiddle.net/witudat/pxwrno4a/14/

What would be the correct way to change class properties in the case "-y" example?

>change class properties
Meaning?

Changing the css .infoButton background color

I am not sure if this is what you meant, but you don't modify the CSS styles themselves. You change the classes of elements. Adding and removing classes for element states is the right way.

I don't suppose you know the best way to do that in the example I gave?

Use classList.toggle().

thanks guys

jsfiddle.net/witudat/pxwrno4a/21/

I've tried using it but I am terrible with JS, can you see what I'm doing wrong?

you could open the console and see the error, instead of asking others to do the same.
There is no getElementByClass function.
Check MDN for what's available.

I've never used JSFiddle before today, I don't even know how to open the console user and the google result telling me that it's "in the JS cog" is apparently outdated. Thanks though user I'll see what else I can use.

WHAT THE FUCK ARE YOU EVEN TRYING TO ACCOMPLISH

It's not even jsFiddle.
Press F12 to open the developer tools of your browser and click the console tab in there.

programming

A single searchbox that works on multiple sites, by default it searches startpage but if you use -a it searches amazon instead, -y for youtube etc

I thought it would be novel if I could also detect the search modifier and display the relevant logo in a container, in the example I'm just using background color instead of logos/images

why are you using jfiddle when you're at a point where you don't even know what the console is
f12 is dev tools.
console is in there

you know, you'd probably have a lot more success with this if you 1) used a proper IDE with code completion for standard javascript objects (I'd personally recommend VSCode) and 2) actually made use of MDN's javascript + DOM documentation to figure out how to accomplish things.
developer.mozilla.org/en-US/docs/Web/API/Element/classList

F12 usually brings up the console in most modern browsers

You should seriously learn the basics. Pick up a book.

jsfiddle.net/9ck78xwp/

met a qt webdev girl. What do I talk about or namedrop to sound like I know what I'm talking about?

"PHP sucks lol"?
"dude Node is the best!!!1"?
"Ruby is a meme language"?
"fucking pajeets"?

???

If you don't actually know what you're talking about, you won't be able to convince anyone who actually does. Don't make yourself look stupid.

I jest, but all I actually mentioned is I hate downloading 35mbs of JS to use a website, and that shitty iframes everywhere is cancer

Dont be a fucking retard, don't do that.
You will sound like a fucking retard, because guys who do that are actual retards!
You dont have to pretend that you know more than what you actualy know, it is pointless.

discord.gg/wdg

A place where many free web development resources can be found.

Join if you like, frens.

come on
he didn't actually meet anyone

What should I use for test-driven development in PHP?

Any freelancers here have any advice for me, I'm about to start freelancing on upwork, as a front-end/ little bit of back-end developer.

hey lads. I've mostly been working with Python. Is there any good guides/tutorials to taking python script I wrote and getting it's output data onto a website?

>frens
Where do you think you are?

You can use Python's cgi module if you don't mind getting a bit dirty, or use Flask or Django which are fairly simple web frameworks, I'm a bit more partial towards the former. They have example projects you can look to get going.
docs.python.org/3/library/cgi.html
flask.pocoo.org/
djangoproject.com/

How good are people REALLY when they get their first junior job?

Like what does a typical junior job even mean? Being able to make a fully functioning responsive site on your own? Or is it like working at mcdonalds where you'll do the most basic shit like spending 8 hours a day to change a few things?

it depends
some people can get a junior gig being an actual retard
some people can only get it being a fucking genius

too many factors in the equation that focusing on skills doesn't matter

Imagine working with a designer that sort of forgets how HTML works and makes things that are actually impossible using sane layout techniques (i.e. no abuse of CSS positioning attributes)
Now imagine you're saddled with making an arrow point from one to another . The length of the arrow is not constant, but stroke width and arrowhead need to be consistent.

What would you do? I am leaning towards encapsulating the parts of the page which do not conform well to sane layout principles by rendering them all as a single SVG in D3.

Posted the other day about wanting to make a little website for my own analyses over the summer break.

Throughout first year of uni I've learnt a bit of Java, a bit of mySQL, a decent amount of Python and a decent amount of R. Over the past week I've been trying to teach myself a bit of jscript and the syntax is sort of just a mix between Java and Python so it's been pretty easy to pick up on. I'm pretty fucking retarded when it comes to front-end design so far, so I'm just hoping I can grab a bootstrap template and frankenstein it to my liking.

Pic related is roughly what I want it to look like - simple banner with title on left (and then probably a really simple about/contact link on the right). A few drop downs to maybe sort by date, most popular, ascending, descending, blah, blah. Then a search on the right which filters through post title (and maybe a set of tags). And of course then just a simple scrollable grid of all the seperate analyses which themselves will just link to a simple knitted .html file of an analysis - maybe some added jscript/css if I get good enough with d3.js.

Should I just focus on javascript? Learn node.js, express.js and then use mongodb as the database (I'm guessing I'll have to somehow set a db up to deal with all the searching and shit).

Should I just develop it all locally, get it working, and then look into webhosting? How much do I have to think about security in a 'simple' website like this - don't want cunts somehow fucking with my website?

Really need someone who doesn't mind me asking some dumb questions until I wrap my head around all this stuff. Frontend, backend, routing, middleware, databases, all these different frameworks; I know I said it before but it's just hard to know where I should begin.

PHPUnit

regarding the layout, is it just for you or do you need to present it to others as well?
If it's just you, then you don't really need a fancy premade layout imo, unless that's important to you.
Just putting together some divs and applying the appropriate classes of your css framework will be good enough,

About the rest.
Do your analysis results exist as pure data somewhere or is it just a html file with the data as content?
sry if that sounds stupid. Just don't know what your options are exactly. Are you just looking to link to existing .html files or do you have data, that you want to create a page for and style it all fancy to present it in visually nice way?
On one hand you talk about 'simple knitted .html file of an analysis' but also mention d3.js

>database
eh, wouldn't know. Do your analysis results exist in some kind of database already or how are they stored currently?
Hard to say without knowing how things actually look.

>Should I just develop it all locally, get it working, and then look into webhosting?
yes and then get a cheap vps when you think it makes sense
>How much do I have to think about security in a 'simple' website like this
If there is no login for anything or any kind of user submitted content, then you are fairly safe already.

I advise not using upwork if you want to actually make money.

>Should I just focus on javascript?
for your frontend, yes
>Learn node.js, express.js and then use mongodb as the database
That's fine, but don't feel like you have to if you'd rather use django or something for your backend if you're more comfortable with it. Also, that stuff about Mongo being somehow better than SQL databases for node stuff is just MongoDB propaganda. You can just as easily use postgres or cockroachdb or whatever the fuck. And conversely you can use mongo and haskell or whatever. Point is, don't fall for the MEME stack nonsense. Pretty much any db will work with any language/framework.

>(I'm guessing I'll have to somehow set a db up to deal with all the searching and shit).
Not necessarily. If you have a relatively small amount of data that isn't going to change very often, you could just store it in a static file, which would completely remove your need for any backend/database and also help with caching.

>Should I just develop it all locally, get it working, and then look into webhosting?
yes

>How much do I have to think about security in a 'simple' website like this - don't want cunts somehow fucking with my website?
If you're just hosting static files and don't have a backend, you don't have much to worry about. (Obviously make sure whatever VPS or hosting service you're using is secure.) However, if you have any kind of backend at all, you need to be careful to prevent users from submitting bad data and to prevent them from gaining access to anything they shouldn't. How you go about doing that specifically is going to depend on what your backend looks like.

You don't know how to make money on Upwork.

Find a speciality. Read through the job postings and figure out the recurring pattern in the majority of them.

Clue: it's one word, with nine letters.

W_RD__ESS

Become a pro in that particular CMS and Upwork will bring in the $$$.

Laravel: is it worth it in 2018? Answer me /wdg/.

>is it just for you or do you need to present it to others as well?
I sort of wanted to have it look at least half decent so I can add to it as time goes on. As I find a new dataset that's interesting I can just go to town on it and post my analysis there. Could be good for prospective employers, and maybe some people might like my take on things; who knows
>Do your analysis results exist as pure data somewhere or is it just a html file with the data as content?
Uhh this is an example for one of the analyses I've done at uni; would be similar to this (yortug.github.io/). I mentioned d3 because I was thinking that maybe the knitted .html file could be a starting point; and maybe if I wanted to do something dynamic and cool I could sort of just chuck some d3 ontop of the .html file (not sure how that really works though).
>Do your analysis results exist in some kind of database already or how are they stored currently?
No, they're just markdown files that have been knitted to .html at the moment. However, I'd like to have a search of all the posts (was thinking a database might be useful for that). And maybe having the raw data and a copy of my work for someone to go off when they're reading could be cool - but then again would probably just chuck it in a repo on github I guess.
>vps when you think it makes sense
Do you sort of just throw your files onto the vps, and just link it to a domain and it just werks? Don't know much about it
>If there is no login for anything or any kind of user submitted content, then you are fairly safe already
Yeah, was only gonna be posts probably manually added to the vps by me I'm guessing; so know types of input for people to fuck me hopefully

Thanks for your reply though, you're a champion

>for your frontend, yes
Do I really just need to know the basics and then just grab from bootstrap and sort of fuck around with it until it looks good?
>Pretty much any db will work with any language/framework
Yeah, I would probably definitely feel more comfortable using django for the backend but I'm pretty shit with SQL relational database design and it seems like so much unnecessary hassle. Mongodb just seemed cool because everything can sort of be 'thrown in' and then dynamically updated if need be - but yeah might not even need a backend like you said.
>which would completely remove your need for any backend/database
My idea for the search would just be each post has a unique ID of some sort and then that ID is associated with a set of tags and maybe a date. Could just make a static file with not a lot of hassle considering at most I'd probably only be adding one post a week or something - can you have like a search work off just a plain text file like:
post352532 - public, private, schooling, government, funding
>However, if you have any kind of backend at all, you need to be careful to prevent users from submitting bad data
I've had this mentioned by some lecturers, just making sure it's clean data so it doesn't fuck your database. Would probably just use regular expressions in Python to make sure it's all in the right format. And just make sure that no one can enter symbols in their firstname and shit like that I guess - if it ever comes to it

Thanks for the quality info as well, you're also a champion

>Do I really just need to know the basics and then just grab from bootstrap and sort of fuck around with it until it looks good?
Yep. Eventually you might want to learn react or something. For now git gud at vanilla js though.

> can you have like a search work off just a plain text file like: post352532 - public, private, schooling, government, funding
Possibly, but if the total amount of data is less than a few MB, I would actually just dump everything into a .json file. You could do something like:
{
"posts": [
{
"id": 12345,
"tags": ["public", "private", "schooling"],
"title": "foo"
"text": "blah blad blah..."
},
// and so on...
]
}

Alternatively, you could put just the metadata in one big json file + the filename to a .txt of the post text.

recommend me a project to make

is ghost (blogging platform) any good?

dildo simulator in Assembly

me too i want in on this

greasemonkey clone

>example for one of the analyses
yeah, there is no use-case for any data visualization library there then.
It's not like you extract the data out of the markup and then put it into a new chart again. I am not a data scientist, but that looks fine as it is?

So what you would want is just a kind of overview of all your analyses with links like the one in your post?
Really no need for a database, unless you have so many, that it gets hard to manage.
An array of objects would do the job as well. Each object representing an analysis like this maybe
[{
title: "myTitle",
description: "my longer description",
tags: ["tag1"m"tag2","tag3"],
date: //whatever format,
file: "fileName.html"
},
{...},
{...}]

Then you can just Array.filter() with your search term and display all the valid entries in the overview.

In that case you don't even need a server with a backend. (since all the necessary information is contained in the html+js files and can be filtered by the client itself)
>Do you sort of just throw your files onto the vps, and just link it to a domain and it just werks? Don't know much about it
not on a VPS, but a free static host would be all you need and would let you do exactly that.
Without shilling, Netlify is the easiest option imo.

for learning or "the next big thing"?

a simple blog site which lets the admin post and tag articles, and allow comments or not. search optional but a tag list should be included

>You don't know how to make money on Upwork.
>move to india
>work for rupees

Has anyone in /wgd/ tried making a browser game in JS using WebGL and the Web Audio API? Is it worth doing it the hard way or should I just suck it up and use a library?

in your context do you mean the py cgi libraries as "the former" or Flask?

This is so basic. Leave that shit for people still trying to master CRUD operations in a language.

Surely you guys can give him better ideas than these.

why don't you :^)

Flask, it's easy to use and is nice for just getting your ideas off the ground and onto a page.

Something to track your finances and expenses then, a nice dashboard maybe.
Where are your ideas?

Nice get, Adolf. Also, to give a bit more context I'm planning on using mongoDB to feed regularly updating data to the site. Is Flask still what you'd recommend for tying it all together? Thanks for the input, user.

image board

I haven't used the two together personally, but I don't see why not. There are a couple libraries you can use to interact with it I found with Google:
flask-pymongo.readthedocs.io/en/latest/
pythonhosted.org/Flask-MongoAlchemy/
You should take a look at Flask's documentation and example apps to see how it works but for a small project, it's probably fine.
github.com/pallets/flask/tree/master/examples/flaskr/
Here's a couple tutorials I found which would help too.
bogotobogo.com/python/MongoDB_PyMongo/python_MongoDB_RESTAPI_with_Flask.php
bogotobogo.com/python/Flask/Python_Flask_Blog_App_with_MongoDB.php

And another mongo library, independent of Flask.
api.mongodb.com/python/current/

i just want to fucking translate my typescript files into js. Why is it not enough to {
"compilerOptions": {
"module": "commonjs",
"target": "ES5",
"rootDir": "I:/myDir/js/ts",
"outDir": "I:/myDir/js/"
}
}

Did you try using relative paths instead of absolute ones?

Same problem, I fixed it by just explicitly mentioning every single file i want to translate in the tsconfig
{
"files": [
"./js/ts/asd.ts",
"./js/ts/fasd.ts",
"./js/ts/qwe.ts",
"./js/ts/rty.ts"
],
"compilerOptions": {
"outDir": "./js"
}
}

1. having id-s in url segments, yes or no?
like /user/{id}/supersecret, where id is the user_id in the database.

The access control is checking the userId in the session vs the one in the url.

Should I use something different, e.g. username or some (unique)hash which is harder to guess?

2. Does it matter if you need to send a message to /user/{id} or /user/{user_name} if the user_name is reflected in some other place, just not in the url?

I have an understanding of HTML/CSS/JS/PHP/MySQL and now I'm learning Vue. I have live business websites using the LAMP stack on AWS. I know some more stuff but that's just what comes to mind. What would my chances of being hired as a junior web dev be?

{
"compilerOptions": {
"module": "commonjs",
"target": "ES5",
"outDir": "I:/myDir/js/"
},
"include": [
"I:/myDir/js/ts"
]
}

Share some pretty fonts /wdg/

typekit.com/fonts/benton-sans

how should i store posts from a blog application? plain text files on disk?

don't expose any internal data to the url. some people do it but it's bad practice.

fonts.google.com/specimen/Raleway

I don't have any ideas kek. You guys are the web devs.

To expand your idea tho: make something that tracks your spending, calculates averages for weekly/monthly spending etc. Make an android/iOS app for it if you can. Each time you spend money you document it. Have it save common purchases like filling up your tank, trips to restaurants etc.

but everything is internal data, ids, username, hash too

imo use a hosted blog
in case you don't want off the shelf, use files and kiss
in case you want to experiment, pick {meme tech}, maybe apache cassandra or Redis?

what's the catch with scaleway? seems better the DO other than offering outdated one click install apps

>tfw I'm the Supreme Architect of our Final Product
>tfw 75% of the time I don't know what I'm doing
>tfw flying by the seat of my pants
Have I become the very thing I swore to meme, /wdg/? Have I become...
pajeet?