/wdg/ - Web Development General

>Previous
>Discord
discord.gg/wdg

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

>Useful Youtube channels
derekbanas
thenewboston
learncodeacademy
funfunfunction
computerphile
codingrainbow

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

>Backend development
en.wikipedia.org/wiki/Comparison_of_web_application_frameworks
[Gist] backendDevelopmentBookmarks.md

>Useful tools
pastebin.com/q5nB1Npt/ (embed)
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/ (embed)

>How to get started
pastebin.com/pDT82mQS (embed)
pastebin.com/AL6j7GEE (embed)

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

Other urls found in this thread:

github.com/anon2112/CollegeWork.git
pastebin.com/sCEtMugZ
developer.samsung.com/health#
telegraph.co.uk/technology/2017/04/05/mastodon-new-social-network-vying-next-twitter/
github.com/tootsuite/mastodon
gin.sadaharu.eu/xdcc-single/Ginpachi-Sensei
developer.microsoft.com/en-us/microsoft-edge/tools/vms/
twitter.com/NSFWRedditImage

xth for making your work easy to maintain because you aren't a cunt to your future self

What's the best webhosting service, and how do I insert my html once I buy it?

The ads are jlist ads. How is that malware? Thats 4chans ad people.

post moar downblouse and i'll tell u

Hit me up senpai

if it's HTML then the cheapest service, and the administration panel that they give you when you register for the service has a "Files" option that you click and you see an upload button, replace index.html to replace the homepage
You gave me a raging hardon btw thnx

Too many information in the table or exactly the right amount to not be bloated?

Is django ded?

Hey anonbro at , thanks for volunteering to help me even though you just published today.

Thanks, You're a freak bruv

4u

You know a good hosting site too?

siteground

Hey, what's a good way character to use for string explosion?

Just use Github pages for static sites. It's free, and you can link it with a custom domain without paying extra when it comes to that. Probably the fastest when it comes to deploying updates, too.

Jekyll is also generally enjoyable tbqhwyf

Why do I have to each through json with only one row?

Is the anonbro still around?
I know you just launched something and I don't want to siphon your focus.

Too lazy to create a whole web page by myself, where are some good bootstrap/html5 templates I can download?

You still need an answer for this?

github.com/anon2112/CollegeWork.git

Which JS framework?

C# DotNetCore 1.1.1 + VS2017 + REACTJS.Core

Is the true pure bliss of webdev.

>C#

w r o n g

I'm here dude. Do you know how to git yet? It's important that your changes make it to the repository so we don't have any merge conflicts.

Yeah, you edit it on GitHub and commit right?

Everything on my repository is the most current build.

You can, git is made for people to work on it locally and commit it to the repository. That way you can use your preferred ide etc. Like I have your repository pulled local and can test before sending it to the repository.

Also I'm confused on the alien size thing. Can you do that one or explain it better?

Sweet - GitHub is great it just took time to wrap my head around it with all the tutorials telling me to use a command line when all I needed was to drag and drop.

Yes, sure.
You can see I have var SIZE set to 100.
Instead of using hard coding for the dimensions of the canvas I just have it set to multiples of SIZE. Something I was working on is how COLS is initialized to 7 and ROWS to 6 the canvas.height is SIZE * ROWS while canvas.width is set to SIZE * COLS.

Setting the dimensions of the canvas (intuitively named canvas in js as well as html) to 600 * 700.

I believe I switched the dimensions up however because my goal is 700 height and 600 width.

If you're wondering about the dimensions of the alien image (line 21 & 22) it's meant to be 100 x 100, the dimensions of one square on the 2d array.
(The array is 6 * 7, making it 600 * 700 px, or COLS * SIZE by ROWS * SIZE.)

Ng

Ah fuck, just resized alien.png under the img folder to be the correct dimensions of 100x100.

I'm putting the finishing touches on the first release of a React project. Highly recommended if your design is heavily modular (commenting systems, survey forms etc.) Don't know how easy it is to use it with a local back-end library/framework, though.

I recently started a new project which consists of multiple services. One web service on www.foo.com, and an API service on api.foo.com
Is there a standard way to set this up for localhost such get I can still share cookies across these origins? Or will I have to also now install some kind of reverse proxy locally?
In addition what is the common pattern for developing services that require HTTPS locally? Self signed certs? Is there a way to trust a self signed cert across the entirety of my system?
This is the direction I'm heading in. If there's an easier way, especially sharing all of this configuration with other people on the project, I would be really appreciative to hear it.
I also thought about using a docker container, but I wasn't sure if I could link a local directory (like a symlink) into the docker container somehow.

Also, the Alien is just meant to move left until it reaches the edge of the canvas then move right, ad infinitum.
The starting point has to be within the top three rows of the array.

Dude, your game isn't even halfway working. I just cloned and shit is falling at mach 10 then disappearing with the html 5 logo.

Just run a VM with your API service and set its port to 8080. It's just like a second server than.

Dude, just ran what you have, what the fuck? There isn't even the base of a game here. There is literally nothing. How am I supposed to do anything here? I would have to rewrite everything from scratch. You understand where you're at with what you want that you're at least a week behind, right? What are you alternative? Let's do an alternative. I'm a fucking JS god with games that have over 400k lines of code and I can't get this shit done in a day. Come up with something.

Nah sorry my dude it has no alternative. Just wanted to say thanks for even giving it a look that's more than I was expecting.

Thanks - I know it's not playable right now but it's just what I've got working right now.

I'm a first semester rookie and it's what my level is at.

Give me the requirements and I'll start a repository.

There's the following image that I was thinking about making a game from. You just go and collect the queen then take her back.

Pardon?

You're going to make me from scratch this shit. Jesus christ, tell me everything it needs to do. Explain the game, not the coding. Tell me exactly what each thing does and how you are supposed to play. It looks like some ghetto space invaders.

If you want to pass, give me the exact requirements of the project.

Here's a pastebin of literally the assignment in total pastebin.com/sCEtMugZ

>space game
>meteors to be avoided
>an alien to shoot that respawns when shot and adds to a score counter
>You're a spaceship with a laser

Basically what it boils down to.

>ghetto space invaders
You're not wrong.

>due april 8th

The due date is wrong it was set at the beginning of the semester and is not what it is now.

Well unfortunately it's not that simple, because I need to share cookies across the web service and the API service. If they are on different ports then they are different origins and cannot share cookies.

Why the fuck did you not come here earlier? These requirements...I would charge at a...lot
What is this for? How important is this? These requirements I would charge at a minimum 20 grand. Who the fuck is telling you to do this and why?

A professor for the last assignment of a first semester class lmao
I know right? I was just as frustrated with even trying to understand everything I was supposed to add.
The professor goes from telling use how to make a 2d array to slapping this on us and gives us like a week-ish to work on it.

So i've been using the Samsung Health App to track my exercise. I don't really have to do anything, it just automatically detects when I start and stop walking. I don't have to press any buttons or anything. I just leave my phone in my pocket, and it'll automatically kick itself on and off. I guess it just monitors my position 24/7 or something. Hooray total surveillance.

Anyway.

If they're going to collect all this data on me, then I want a copy. So I looked into it, and apparently you can export the data. developer.samsung.com/health# There's a link to a SDK, and there's a pdf detailing everything and the tool is in there too.

So I grabbed the data and used angular to parse, process, and display it.

So that's my blog entry for the day, what have you guys been up to?

Being an idiotic 1st semester rookie trying to save his mark by coming to Sup Forums lmao

What do you mean by "save his mark"? I'm not familiar with this phrase.

Be nice. He's just sharing something cool that he is excited about.

Write exactly what everything is supposed to do.

Use docker, easy

Any thoughts on symlinking a directory on the host into the container?

For example, I have some other team members who are more learned on their particular parts of the stack, and I want them to be able to change their code and see it reflected, but everything else should just work behind the scenes within the container (other services, databases, etc).

I have used docker before in the simplest use-case only. I have some very basic knowledge about it how it works under the hood using network namespaces, etc. I am not aware of all of the tools though (swarm, etc) so anything that could point me in the right direction of solving this problem would be appreciated.

you can map host directories to containers using volumes. `docker run -v host/path:container/path myImage`

for multiple services use docker-compose. It automates all the command line stuff in favor of a config file.

Aaaaaaaa no no no I meant me.

Okay.

Canvas -> height 700px, width 600px

Array -> height 7, width 6, each index being 100x100px.

(Every image in that img folder you saw is 100x100px because of this)

Player image is drawn at the bottom of the screen, and is moveable with keydown arrow keys.

Alien is drawn randomly either on index 0, 1, or 2 of the array's rows.

The alien moves left and right, detecting whether it has touched either side of the canvas and moving the other way.

The meteors are generated in around 20% of the top row of the array's indices.

The meteors then move down towards the player character by making a new row and popping the old one.

Then there needs to be collision detection between the player and the meteors, so that it's game over if you collide with any of them.

Then there's the laser that shoots upwards from where the player character is to the top of the canvas, resetting when it either hits the top of the canvas or hits the alien.

The alien disappears when collision is detected between it and the laser, and a point is added to a paragraph below the canvas.

And that's everything!

It's literally ghetto space invaders you could not be more correct.

Thanks much! I will take a look into volumes.

if you want to test it, do `docker run --rm -v $(pwd):/src -w /src ubuntu echo test > test.txt`

will print "test" to a new file in the current directory via a container.

I'm confused on how to structure a javascript library. Everyone seems to have a different way of doing things. Right now I just have my js files and concat them. This means I can call them like this
var thing = new myThing();

But I've been thinking maybe i should put everything into a single variable?
var thing = Library.myThing();

What's the best way to do this? I'm using node with grunt to concat the files but I don't want to have any node specific code in my files if possible, or is that a stupid thing to want?

I'm not really sure what I'm asking.

Ideally you'd be using modules. Doing it the old way, make a global object attached to the window. Then use it with window.myLib

I'm having issues with the piece of shit known as chrome. In firefox, my website renders perfectly. In pic related you'll see how the columns match the content size. This is achieved by a simple height: 100% on a mdl cell, inside of a mdl grid which I'm using for the layout.
When chrome views my website it acts like an autist and treats the 100% as the distance from my header to the bottom of the page making both columns look extremely ugly as they stretch forever down of plain light gray.
Is there a simply way to get chrome to work?

Seems like you're working with 4-5 years old tech if you're using grunt. Might I suggest taking a look at rollup, or babel as opposed to Grunt?

As #309 says, you should be using modules.

Going to catch much needed shuteye as I wake up early tomorrow for a commitment.

Again, thank you very much for the consideration and actually looking into a newbie's assignment.

I didn't want to use modules because it directly ties the source code to node but I guess everyone uses it for development nowadays anyway.


I've been looking all today for alternatives and modern approaches which is why I posted here. I saw so many different ones though that I have no idea which to go with.

> it directly ties the source code to node

Huh? No it doesn't. Ultimately your code is transpiled into an es5 compatible bundle. This is why you use something like babel or rollup.

>C# DotNetCore 1.1.1 + VS2017 + REACTJS.Core

How is VS2017? I'm still on VS2015, afraid to make the jump cause first releases are always super buggy. Would like to hear your opinion...

Have you guys heard of Mastodon, the new twitter?

telegraph.co.uk/technology/2017/04/05/mastodon-new-social-network-vying-next-twitter/

They're open source, so if anybody's looking for small projects to help out with, check out their github:

github.com/tootsuite/mastodon

Yeah I guess. If you view the actual source files though it will be "invalid" javascript though with the modules and exports.

I've seen a lot of webpack. Is there a difference between it and rollup? What's the Industry Standard™?

> If you view the actual source files though it will be "invalid" javascript though with the modules and exports.

Uh, no. It won't. You have a fundamental misunderstanding about the purpose of transpilation it seems. :)

The modules, exports, requires, will be replaced with functions and function calls in the compiled source.

The compiled source file is for browsers, not people. If someone wants to view a file that will be transpiled it will be invalid javascript.

Nobody wants to view a single massive javascript file when reading source on a module or function within it.

>How is VS2017
I've been using community RC at work, have to update it still but so far i kinda love it a lot, the few bugs I've got were only related to extensions so far and the installer went smooth, unlike in vs2015.

I love the Run to Click debugger too, just set up a breakpoint and on each line on hover gives the option to jump to that point.

You're right about that, but in the same way who digs through compiled binaries to inspect C program behavior? That's what the source is for.

You can use sourcemaps if you need to debug in the browser, but otherwise why does it matter?

I've never really heard a solid argument against this to be honest. It is probably why you will find transpilation used at virtually ever large organization, and every meaningful js project within the last 5 years.

The reason everyone uses transpilation is because no one wants to write javascript code.

No one wants to be held back to IE8-era javascript standards you mean? Yes you're right. Modern javascript is quite eloquent, so I think most professional JavaScript developers are happy to write this. You will find ES6 vastly outnumbers projects written in CoffeeScript, TypeScript, etc.

It is to support older browsers and be able to use new features before they get support. Like es modules, they haven't actually been implemented (hung up on implementation decisions) but we can use them and transpile via Babel.

Has anyone ever made a thorough write-up of developing imageboard software? They aren't particularly complex applications, but given they have been around for decades now you'd think there'd be more information out there about what needs to be taken into consideration when writing one. I'm sure the developers of Sup Forums have hit countless snags and gotchas over the years - it would be nice to know about them in advance so I don't make the same mistakes.

File size cap, sanitize user input (text and file names), captcha, request throttling, DB authentication enabled with secure credentials are a few good things to think about.

Guys, newfa/g/ here. Having some questions concerning Java Web and its shits.
- What is the absolute bestest Java Web Framework for my shitty monkey managing project that require zero-to-none appearance (CSS and similar shits)?
- Worst case: I decided that I'm too much of a brainlet to learn the shit and write everything in of jsp... What should be the problem with it?

Apart from upload size limits and obviously turning special characters like ' into entities (othewise enjoy your sql) injection there are no special considerations to look out for
Any other shit will only become a problem when you are running a huge service like 4chins where you won't be able to use normal commerical hosts because the traffic, cpu time and hdd space required would be too large, so you would have to make your own server or rent one and put it on a server farm much like 4 chins is but that costs loads of moni which you don't have, not that you need to care about that since you will never get that big, in fact i can tell you with 99.9% certainty that nobody will use your service apart from you and porn crawl bots that will upload their ad pics

There is nothing really that special about it. If you have experience building web applications then it should be pretty straightforward.

Not to say it's easy, or quick to build, but just to say that it's relatively simple and the problems have all already been solved.

Thanks user, this is a good start.

Thanks user, but I only have a small userbase (~250 active users) and the subject matter is fairly niche so I'm not too concerned about making it scalable.

Thanks user, I'm aware that the problems have all already been solved, but I don't particularly want to go trawling through source code to find the solutions. It's not the end of the world if that's the only way forward but it's still inconvenient which is why I am asking if anyone knows of a write up instead.

>niche
cp isn't niché, it's widely spread, also don't forget to use tor to hide your server

Google normalize.css it will probably help you!

Ah yes, one of the reasons why i left the web dev and switched to app dev, god browser optimiziation was a fucking nightmare
And you are fucking baby mode too, just try to optimize a website for IE6 which i had to do... holy crap.

I'd like to write a simple website to host on my nas which simply indexes files and makes the searchable in real time, e.g. like xdcc bot lists:
gin.sadaharu.eu/xdcc-single/Ginpachi-Sensei

Do templates for this exist? And if they don't, can you point me in the right direction for some resources? No PHP preferred.

QUESTION!

I'm developing on a lampstack on my localhost.

I finally finished up - now I need to upload my work.

I got a LAMP droplet on digital ocean ------- how do I transfer my page?

Can someone lay this out in clear steps?
I'm not interested in transferring anything not strictly necessary (the dashboard for instance) ------ I just want to upload my page!

Download a FTP client, connect using your SSH credentials, go to /var/www/html and upload the page

What's the best place to register a domain?

anything but namecheap or godaddy.
I'm with gandi which is quite okay.

Whats so bad about namecheap?

they started making up lies about letsencrypt being vastly insecure so people keep buying their certificates

They do really good deals on domains though and believing anything a source that has financial interest in the topic is generally stupid.

this.handleClick('param')}>123.com
how do I do this but pass whatever is written at '123.com' as the parameter to handleClick?
kinda like v-model from vuejs.
react

Is this react? If it's any "on" event, all you'd need to do is call a function to handle the event.
The function would receive an event object to use.

If it's just a click I'd just make a custom function just for it, calling another function with your desired parameters

What tool(s) do you use to see how pages are rendered and if they work properly in different browsers and their versions? Or do I have to install every single browser to do this? Sounds like a pain in the ass.

for IEs I'm using their VM images, otherwise I only test chrome and firefox, the rest uses either webkit or something ignorable.
developer.microsoft.com/en-us/microsoft-edge/tools/vms/

.custom-text {
position:relative;
display:inline-block;
color: transparent;
overflow:hidden;
white-space:pre;
}

.custom-text:before {
display:block;
z-index: 2;
position:absolute;
top:0;
height: 50%;
content: attr(data-content);
overflow:hidden;
pointer-events: none;
color: #000;
}

.custom-text:after {
display:block;
position:absolute;
z-index: 1;
top:0;
height: 100%;
content: attr(data-content);
overflow:hidden;
pointer-events: none;
color: lightseagreen;
}


I'm trying to use jquery .css method to change he height in ONLY the .custom-text:before but this $(".custom-text:before").css("height","20%"); is not working. Is there something specific I have to do because I think that jquery can't identify the :before selector.