/wdg/ - Web Development General

>Previous thread
>Free resources to get started
Get a good understanding of HTML, CSS and JavaScript.
MDN web docs offer a good introduction (independent of your browser choice)
developer.mozilla.org/en-US/docs/Learn
freecodecamp.com/
codecademy.com/

>Further resources
developer.mozilla.org/en-US/docs/Web - General documentation for HTML, CSS & JavaScript
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:

guides.github.com/activities/hello-world/
jsfiddle.net/j906y07b/
arstechnica.com/*
arstechnica.com/tech-policy/2017/10/1-4-million-jackpot-is-voided-because-bingo-machine-malfunctioned/
arstechnica.com/tech-policy/2017/10/
archive.fo/?run=1&url='
github.com/chartjs/Chart.js/blob/master/LICENSE.md
gist.github.com/paulmillr/2657075/
github.com/dwyl/repo-badges
twitter.com/NSFWRedditImage

This general needs a new relevant anime picture.

Yo /wdg/ homies, what should I use for a backend for an Ionic mobile app? I have experience with PHP, Javascript, Java and not much else.

The app is a simple dashboard which just shows metrics and data collected from the devices.

I just need the backend to do accounts , connect to Google APIs(Calendar, Email etc.) to pull data and store data as all the business logic is mainly on the frontend.

MongoDB or CouchDB will probably be the database I use.

what JavaScript library should i use to make http requests?

This might be a stupid question, but how the fuck do I land jobs on Upwork? I feel like most of the proposals I'm submitting go unread. Do I just have to lower my prices until someone bites?

>Learning webdev
>Think it's fucking awesome
>All my friends are in IT and software engineering
>Telling them that I've made some simple mockups and websites with what I've learned so far
>They ask me for a github or .io so they can check em out
>Tell them I don't know how to use github, the client or the .io at all
>They kinda stare at me slackjawed like I said that I had learned how to read but not what shapes and colors were

Are there any resources to learn about using github for a COMPLETE beginner? I have the desktop client, but I don't know how things even work.

I'd like to host my little projects on a personal account so that others can see them at least.

guides.github.com/activities/hello-world/
there isn't much to it. You can use a command line to do it all but there are a few gui's that do everything you would normally need.

It's like you didn't even youtube dude, come on.

If you're gonna use MongoDB, why not node/express? Especially if you already know JS.

>Tell them I don't know how to use github, the client or the .io at all

ok grandma

No bully

Try to find real jobs if you can.

Freelance websites never work because they are flooded with pajeets who are willing to work for $5 per day.

Looking for a good book on animations with CSS and JS

I started dumping all my stuff on github a few months ago. Before that I had just a huge folder of projects (literally hundreds).

Filling up those little green squares is like crack. Plus, just knowing that other people could be using (or at least looking over) your code makes for better work, and also teaches you how to document properly.

gitlab > github, the free private repos + issue rtacker + ci is really nice combo imo, plus I recall some sjw bullshit in the github code of conduct about privilege and reverse -isms

What's wrong with XMLHttpRequest or the JQuery wrapper?

how does registering in a SAAS app work for companies? I don't want to make them add all their employees one by one but I don't think I can request a list of email addresses/access to active directory/whatever and don't think suits would understand how to use an API.

fetch

native fetch or axios library

Finished my i18n duck and translate HoC ^_^

Just recently took up learning html,js,css and i'm trying to create a minesweeper game without any additional frameworks - just pure html,js and css. Haven't gotten far yet, but I can't figure out how to basically convert a 2d array into a table or sets of divs(i.e the gameboard). I'm using a nested for loop to loop through the 2d array but the methods i've researched don't seem to work, for example the document.write, .replace , insertAdjacentHTML and so forth. Any suggestions?

Fugly, doesn't play nice with async, fetch is better in every way.

Hey OP could you put #Sup Forumswdg @ Rizon back in the OP I want to talk to nerds about javascript

How easy is it to switch a regular angular project to angular + ionic?

Is there any recommended resource for learning about databases?
I made a shitty site with flask and SQLite. Everything works but I feel like I don't have a good enough understanding of databases.

They're just spreadsheets at the end of the day which you can join, query, update etc. programmatically. Database design and security sounds like what you're looking for (because that is important for large apps with sensitive user information). Learn what kind of queries you can do with SQL but you don't need to memorise it all by any means. If you can store information in SQLite you can store it in any relational DB.

Well, there are several parts to this:

1) Get into Database normalization. There are millions of good online tutorials out there. Don't just flip over do some exercises to really get what it's all about and understand the first few normal forms.

2) Now understand why and when to do denormalization (breaking the normal forms). It's always an trade-off, so know what are the advantages and problems here.

3) Indexes. (No, it's not called "indices", that's something different!). Many people skip that topic, but it is super important. Understand what a full table scan does, what and Index is and why they are great. Learn on which size or variance of values an index makes sense and which fields to use. Also understand the limitations (i.e. compound values).

4) Chosing the right abstraction is a matter of practice and experience. But if you want to up your game I really recommend the book "sql antipatterns", it shows you how to NOT do things and will save you form learning some lessons the hard way.

5) Language pitfalls. There are some good sites about. Learn why "NOT IN ()" is probably not what you want to do.

6) NULL. Fucking NULL. You see, 90% of all mistakes you'll ever make in SQL are either because you chose the wrong data type (I DARE YOU TO STORE DATES IN STRINGS !1!!) or because of fucking Null. Many guys never understand that SQL has a tenary logic: TRUE, FALSE and NULL. Understand the tenary logic table. Always remember to treat NULL separately (if you allowed NULL values in a column, that is).
Compare:

SELECT * FROM my_table WHERE val = 1

--> all rows with a certain value

SELECT * FROM my_table WHERE val 1

--> all rows with a different value EXCEPT FOR NULL

SELECT * FROM my_table WHERE val 1 AND val IS NOT NULL

--> all rows with a different value EXCEPT FOR NULL

Good luck, user.
If you are looking for more, there are migration, metadata, optimizing queries, backups and much more to learn.

Sorry, I made a typo:
Of course the last SQL statement does include NULL values..

Err, the second one!

That's what you get for doing too many things at the same time.. :)

Curious about react, what am I in for? So far looks like needlessly over engineered

>We don't make assumptions about the rest of your technology stack
>1. Make sure you have a recent version of Node.js installed.

I considered instadropping at that point, but I heard it can improve employability and get good goy points if it is on my cv

>Understand what a full table scan does, what and Index is and why they are great. Learn on which size or variance of values an index makes sense and which fields to use. Also understand the limitations (i.e. compound values).
Postgres has EXPLAIN for this, not sure what SQLite offers for that regard, but it might come with something similar. Also learn about VIEWs, they can save a lot of execution time.

also another question, i've managed to loop the divs but they appear under eachother, as opposed to a matrix/grid form. As I understand it is because they are block type elements, but any ideas how to avoid it?

jsfiddle.net/j906y07b/

also for some reason the button doesn't start the function

It's for the build step, not for the final environment you use it in.

just as your array, your HTML elements should also be arranged '2d'
several columns besides each other with stacked elements inside

Thanks for the replies, anons.

>just as your array, your HTML elements should also be arranged '2d'
>several columns besides each other with stacked elements inside

and how can I achieve that with the loop? I can't arrange it into HTML because I can't predict the size of the matrix ( in the jsfiddle I simplified it and gave it a fixed size)

>and how can I achieve that with the loop?
for each x-axis board length create a column
for each y-axis board length create a div inside that column

>I can't predict the size of the matrix
not getting you here. The size is known before the board is created.

>be me
>want to create a AWS account to deploy apps and whatnot
>give me your address (required)
>give me your credit card info (required)

fuck this

Okay, well I got that sorted out. Thanks for your help.

>give me free services
shut up you entitled paranoid fuck

>free services
>credit card

good goy.

meanwhile things like docker are free

while I don't know your use case, you might be better off with a VPS. There was a link to a comparison blog post in one of the previous threads, but they are basically the same.

Getting up to speed was way faster and I did literally deployed in a minute, while on AWS I had to go through lots of do on vultr (guess others are the same) documentation, creating groups, enabling ports, requesting IP addresses. Would not even consider LightSail at this point

yeah AWS can be such a hassle

what VPS do you use?

not that user but DigitalOcean is obviously always a good choice.
Vultr is also really nice.
Scaleway possibly if you are in europe and don't care about certain features, that other hosts offer, but just want some hardware-bang for your buck.

there are referal links going around for $10 free credit for Digital ocean, which means you can run the cheapest server for 2 months for free. Just google it, or ask me and I'll get it for you.

how do I not write shitty html and css?

>Learning WebDev via udemy course
>Having fun, but think that it'd take forever to make anything decent looking
>Mfw we started covering frameworks like Bootstrap

Thank GOD

>frameworks
>Bootstrap

Is Bootstrap not a framework?

anybody is familiar with django here ? i'm trying to send a list to the template and use it for the source of the jquery autocomplete function but id doesn't work ! How are you supposed to access a django view variable from a jaavscript script ???
$("#test").autocomplete({
source: {{test_list}},
minLength: 2,
});

youtube if you can't read

collections of predefined CSS rules exist and are generally referred to as CSS-frameworks.
You think the concept of a "framework" is exclusive to executable code?

who nigger, whouP?

Does anyone here know how to make Greasemonkey/Tampermonkey scripts?

I'd basically like to re-direct all Ars pages I visit to Archive.is.

I wrote the following code but it does not work:

//==UserScript==
// @name Redirect Arstechnica
// @description Redirect Arstechnica to Archive.is
// @include arstechnica.com/*
// @run-at document-start
//==/UserScript==
window.location.replace("'archive.fo/?run=1&url=' encodeURIComponent(content.document.location))");

When I run it, on a URL such as:

arstechnica.com/tech-policy/2017/10/1-4-million-jackpot-is-voided-because-bingo-machine-malfunctioned/

the script tries to load:

arstechnica.com/tech-policy/2017/10/

over and over and over..

What is wrong? Can someone please fix it?

I went with vultr because they offer $2.5 in some locations (miami) and the 512MB ram + 20 GB ssd + 1 vcpu is more than I need and I'm a cheap bastard

this also learn mariadb or postgres additionally to sqlite in order to overcome sqlite's restrictions if neccessary.

see pic

might help

Yeah, that's the guide I followed. But I can't figure out why this line:

window.location.replace("'archive.fo/?run=1&url=' encodeURIComponent(content.document.location))");


does not work. any JS experts around? What's wrong?

- That's not how you use replace
- You put code in a string so it's not executing

OK, I have this:

//==UserScript==
// @name Redirect Arstechnica
// @description Redirect Arstechnica to Archive.is
// @include arstechnica.com/*
// @run-at document-start
//==/UserScript==
var urltoSend = 'archive.fo/?run=1&url=' + encodeURIComponent(content.document.location);
window.location(urltoSend);

It still does not work. No errors though... HALP!

that's not how you use window.location

Somebody already posted an example showing how to use it and you clearly ignored it

how long/how many challenges is that freecodecamp btw

>vultr
>$2.5
holy shit, that's fucking cheap. Have you had any troubles with them? I'm skeptical about them being able to deliver good service at such a cheap price, but pls tell me about them...

okay, I fixed that part. it still won't work... doesn't redirect anywhere.

//==UserScript==
// @name Redirect Arstechnica
// @description Redirect Arstechnica to Archive.is
// @include arstechnica.com/*
//==/UserScript==
var urltoSend = "archive.fo/?run=1&url=" + encodeURIComponent(content.document.location);
window.location = urltoSend;

What now? Thanks user, btw!

Node.js or some PHP framework for a messageboard system, /wdg/?

I fucking hate canvas. Can't bring myself to get into it.

>canvas
watchu mean?

feathers or laravel

why don't you people post on stackoverlfow

HTML5 Canvas elements.

cause /wdg/ is faster

>not everyone goes to stack overflow
>lot of people visit Sup Forums
>different anons might learn from the posts

what are you trying to do?

only been using it for a week, I'm building a websocket game, so far so good, the cpu is able to keep up
>mfw they sent me an invoice of 0.23

at first I was disappointed, because most locations said the $2.5 offer was sold out, while having the $5 option open and was about to close the account feeling scamed, but they had it in Miami

>post on stackoverlfow
>closed as non constructive or whatever

and they say Sup Forums is toxic

Just trying to get into it in hopes I can use it draw charts. I don't want to have to buy a license for someone else's js.

github.com/chartjs/Chart.js/blob/master/LICENSE.md

All right, got it working. Greasemonkeys has diff location reference and regular JS does not work.

//==UserScript==
// @name Redirect Arstechnica
// @description Redirect Arstechnica to Archive.is
// @include arstechnica.com/*
// @run-at document-start
//==/UserScript==
var urltoSend = "archive.fo/?run=1&url=" + encodeURIComponent(location.href);
window.location = urltoSend;

>Dear SIr how do I make list in JavaPeet

try different libraries, filter the good and the bad, tackle it yourself, fail, shitpost here

Is you github username similar to your real name or do you name it whatever?

mine is letters from my name

e.g. my name is john
so my guthub name would be jhn or jon

or something like that

I use my unique last name, same account I dev hentai software and do work stuff on. Don't give a fuck.

gist.github.com/paulmillr/2657075/

I see, thanks. I guess I could use my name but I'm always wary of putting anything that's even slightly personal.
Then again, I don't want to have a tryhard username or just random letters.

If you want to do this professionally I highly recommend an active, public, personal github profile. In many web jobs portfolio is king and github is low effort portfolio.

Got it. Name it is.

Just use
window.location.href = "mywebsite.com";
No need for all that other nonsense, and this works fine in GM/TM because it's exactly the code I use in a script I just made;
window.location.href = url.replace("you", "hook");

How do you organise your time, /wdg/?

poorly

>hooktube
kek! I need that script too.
I basically wanna avoid loading and visiting all these libtard sites.

How do I get front end access to a wordpress site securely. This lady is going to pay me 100 bucks to basically just put a paypal button on her wordpress site. How do I log in to the wordpress panel without her sending me the username and password directly over the internet directly?

how is this called?

phone her

github.com/dwyl/repo-badges

Which is your go-to css framework of choice or do you have your own that you made from scratch?

Bulma
mostly because it's css only. Don't care at all for the JS parts of Bootstrap and Foundation.

Bulma

Pretty well until it comes to using a new frontend framework. Annoyingly I learnt React for the jobs then got a job where we use Angular. So now I'm learning Angular. It's certainly nicer but I do hope I don't have to go through this process again for a while.

Using bulma right now for the first time. Definitely prefer it to bootstrap. Saner class names and much lighter. No jQuery dependency is good as well.

My profile: cs degree, work in fpgas, good knowledge of php, some html5/css/js

So, i want to build a site. I started writing everything from scratch, but it will take forever.
Had my mind into django, to build the site in python... But python sucks.
So, i stumbled upon wordpress.
I checked a few themes but everything is exactly the same.
Blog. News. Eshop.

I want a 3 pages site.
Frontpage: search engine, layout like jewgle.
Result page: like duckduckgo
Answer page(for when you select one of the results): a simple page like an article, e.g. title, content, author details and user feedback.

The search is based on criteria irrelevant of the content, but based on tags.
I will have heavy interraction with the db, e.g. user interacts with article, article gets locked, mails sent to users and author, e.t.c.. This is not an article per se site, but it has similarities, i want though to have a custom interraction with the users based on content.

How can I approach this?
Get a theme? I've searched and couldn't find something so multipurpose.
Get different templates?
Since it's a simple 3 page site, and all the work is based on what happens in the backend, do I write my own template for each page?
Any book or tutorial on that?