/wdg/ - Web Development General

I don't think js has any built in sounds

Does anyone here use React? In what kind of projects?

The browser has to have a audio api. Otherwise it would be impossible to hear sound playback from a web app.

about to rewrite our frontend for the third time (ng2)

3 devs 1 intern working on UI, but no one making mockups/wireframes for us. The result is a UI that is so bad that even someone like me who's trying to get laid off for severance pay is ashamed of it

Right... The sound API is html5 audio objects... I mean that you have to open a serverside file to play a sound. Idk maybe you can construct an audio wave using sin waves or something...

>Idk maybe you can construct an audio wave using sin waves or something...
This is my primary area of interest to learn. The metronome is incidental to that goal. Which is why i was curious about how google did their thing.

There are tons of online web metronomes, if you do a google search, but most of them seem to be flash which is an immediate disregard in my mind, but i cant get ANY of the ones done in js to work offline, so i'm obviously missing some fundamental aspect of js web app deployment.

I don't know how to describe it but how do I make one of those web pages where it's like the contents of a folder just listed like a directory? It's something to do with a server...

Also is there a super beginner way to host a server like that?

How can I use lighttpd to serve node.js app? I tried mod_proxy, but it's not working.

Again, how can i make it move? I tried everything, nothing works. I really need this working, please.

>stackoverflow.com/questions/10663248/how-to-configure-nginx-to-enable-kinda-file-browser-mode
>nginxlibrary.com/enable-directory-listing/

Different tools for different jobs

To anyone programming in javascript, please for the love of god learn how to use IIFEs and more design patterns than just the basic constructor function/prototype one.

developer.mozilla.org/en-US/docs/Web/API/AudioContext/createOscillator

Try this

IIFEs?

Thanks. I'm already looking at that.

Jquery animations? You want them to scroll left and right, as well as have left and right images shrink into the background?

Immediately Invoked Function Expressions.

Individual JS files are run back to back by the browser as it they were one big file. This causes a disaster in big code bases when you can't safely depend on things in one part of the code not being touched by others.

The solution is an IIFE. It achieves behavior somewhat close to private variables/methods in other languages.

It's a really useful construct and worth investigating if you want to become better at javascript. They look like this:

var myIife = (function () {
// nothing outside this function can see whats inside it
// unless I do something like this
return {
// this object gets assigned to the myIife variable
}
})();

Ah, it's js's kludgy way of dealing with scopes.

Exactly, here is an example:
jsfiddle.net/0yw42209/

You'll never learn anything if you can't even google "web audio api"

Pretty much. It does a pretty damn good job at it too. Shame it's ugly as fuck and not easy for beginners to grok

It's an unintuitive longwinded hack. There's no reason the keyword 'function' should ever have to be associated with a piece of code that's only going to be run once.

There's some subtlety between anonymous function/arbitrary scope blocks and closures.

>Them feels when just became a Junior Web Developer
>Them feels when imposter syndrome

ngl, love the place that I work at but coming from a different background in IT with a self taught background in web dev has me scared asf. anyone know any PHP/JQuery tutorials that'll be worth it?

I think people expect from juniors two things:
1. They can try and solve their own problems.
2. They can signal and communicate if they can't solve some of the problems.

Well, unless if you're in position when you are the only guy on the project. Have fun then.

Which is fine of you use closures for what they are actually good for; which IIFE mostly seems to not do.

currently in a small team, all working on different projects. I'm solving my own problems as well as gathering a list of things I need help with. They know what level I am but I'm always kinda fearing that they're going to get annoyed with incompetence/lack of knowledge and fire me.

so far everyone has been absolutely amazing and helpful and hopefully they understand where I'm coming from.

There's also some gotchas if you don't understand which scope they actually fit into.
>what happened to muh globals?

I agree javascript's uglier syntax should be reserved for the lesser use case.

jsfiddle.net/wxgt7tnp/1/
How to make the var of jquery take the id from img?

You'll know when things go bad. You can currently tell that they are going as expected.

You might want to ask your lead on what tutorials to read or what general knowledge you are expected to have. Professional development isn't exactly a solo activity. You'll have to talk a lot, so you may as well start now.

hoping to get a web dev job soon. Please tell us, what/where are you working?
What languages do you code in?
How did you get the job?
How long were you studying to get to where you are now?
Any advice?

Fuck it, I was bored this morning and I needed practice. I've done something similar but with jqueryUI and a bunch of switch statements.

jsfiddle.net/xxa07LL6/2/

It's really bad and the right arrow key action is fucked, but it should give you a decent headway into the problem.

Shit, I meant this one.

jsfiddle.net/xxa07LL6/3/

Anyone know any good intros to React? The official one sucks desu.

>OscillatorNode method: start()
>Schedules a sound to playback at an exact time. start may only be called one time and must be called before stop is called or an InvalidStateError exception MUST be thrown.

So every time i want to start and stop playback i have to create a new oscillator object?
What the hell? Why?

You can do this:

var imgid = $('img').attr('id');

Granted, you're probably going to have more than one image unless you enjoy being unemployed/doing brutalist designs. You can use the .index() function in jQuery to find out the index of that particular image in the scope and then do the above.

Thank you, but it's not working. ;-;

Let's say I have a project in my machine and I want to keep working on it in other machine, I have the repository in GitHub and I copy that repository so I have all the files in the new machine: Do I have to install all over again all the packages and stuff that I used before?

Seriously, what is the point of SPAs and frontend frameworks? I have even worked with them for a few months and I still don't get it. It's like, some light work can be done on a client side (which can be done with a plain JS) and browser doesn't have to refresh so it looks more like a native application...

I'll fucking cry, I'm going through some Angular 2 tutorials since there are jobs out there and potential job offers for me, but I just can't bring myself to learn it when the final product is incredibly boring. For example, I'm not interested in maths and physics that much but I gladly learn it when it results with something cool, but this... I don't know who can find joy in a front-end dev (or web dev in general).

Don't know what to do, it's probably not smart to decline offers, but I'd have to come in with a pure hate for it already, and there is no way I'd spend my free time learning more of it. Maybe the payment is not that bad, but still.

Is there someone who is in this field but doesn't like it? What would be your advice?

do backend, it's a bit more fun and challenging.

There are potential overlaps, though they're getting to be much much nicer now that websockets are pushing XHR away. Fuck XHR, fuck it right in the ass.

Guys, how can I tell if this industry is for me or not?

Make a website. Did you like doing it? Do you feel like you won't consider suicide if you had to do it a few hundred more times?

why would zoom in css be bad if it's used for mobile only

>learn it for the money

a senior mans advice for anything cs in general

Ideas for projects to work on to get a junior front end dev job? I redid the website for a family member's business and thinking of what to do next.

Most jobs want Angular, React and other meme frameworks so what's a cool project I could do to incorporate those?

I hate most front end dev because it's boring as dick. But because I'm good at it, I've ended up in charge of a 50k line, completely undocumented spaghetti code front end that was outsourced to Pajeets who are now unavailable for comment.

Initially I hated it, but now I don't think I could ever do a normal front-end job again. It is so easy to royally fuck up a front-end code base because most people who do front end dont feel like they have to actually learn how everything works before getting started.

If you can find joy in unfucking awful code, you will be a happy and rich man in front end.

Where does /wdg/ find freelance jobs? I'm fairly comfortable with front-end and back-end work but I lean more towards design.

>was outsourced to Pajeets who are now unavailable for comment

are employers in the West realizing it's more expensive to outsource to Pajeets and then pay whitey to correct it than to just give it to whitey in the first place?

Do people actually code website backends in this? Is it worth it? Is it better than other stuff, like Python?

Was wondering the same thing.
If a Go Dev user could throw some light upon this ...

yes
yes
yes

The official tutorial + docs is actually pretty decent, not sure what you're complaining about. React is pretty simple, you don't need some huge course to learn it.

You'll have everything you checked into the repo unless you added something to the .gitignore file. It is generally considered best practice to add your dependency folder to .gitignore and re-download dependancies when cloning the repo though.

Currently writing 2 backend APIs in Go. One completely from scratch, other one was based on NodeJS.

It's a lot easier to work with and currently handles more requests. Deployment was also much much easier.

Any other questions?

Meant to reply to you and not the user below you.

Angular 2.0 vs React

Without giving some BS "it depends" answer. Which is better? And which do you think will be relevant in 5 years?

In before "it depends".

what did facebook mean by this?

Codecademy can teach you react now.

As for setting up the tools so you can actually fucking write something, time + google + crying can do this eventually.

Also yeah the official tutorial is shit, codecademys is much easier to learn from.

A warning against social engineering by Dr. P. Jeet.

Which is best to start learning right now & why?

What do you mean?
They are not opposing sides, use them both if you will.
jQuery is used to simplify operations, however after using D3js and Lodash a lot lately, they're the only libraries I'll personally ever need.
I use ExtJS as a MVVW framework (enterprise applications) . However I've talked to some colleagues and we might switch to Angular soon.
tl;dr : learn them both.

Angular 2?

When will the whois be replaced?

ICANN has been saying it will be replaced for as long as I can remember, but nothing ever happens. Most west european countries have privacy by default in the whois, but the Americans are still fucking around publishing private details.

fuck, sorry.
Was suffering with goddamn recursions and tree previews.
Yeah, angular 2 defo. However there's one slight problem with google: Swap from Angular 1 to Angular 2 literally destroyed projects on A1 because of how different frameworks turned out to be.
ExtJS is consistent, jQuery is consistent, let's hope they create some consistency with A2 also.
Just remember this: Whatever you learn, make sure you learn it properly. Practice it, don't just read up on docs.

>do more
were they talking about the CPU?

jQuery WAS used to simplify (sometimes already simple) operations. Now it's mostly a fuckload of bloat that will at least be stable bloat through ecma6

My other question would be, do you use libraries or "web frameworks" to do webdev in Go, or is the standard library good enough that it works like a web framework on its own? IE, is webdev in Django about as simple as webdev in plain Go?

Express.js question:

I want to do nested iteration in the pug template engine (formerly known as jade).

I have an array of objects. Each object within that array contains an array of objects. I want to render a specific property from each nested array to the screen. I think my code is correct, and yet nothing is happening. It's not throwing an error, it just doesn't render anything in the div these properties will be inserted into.

- var i = 0
while i < outerArr.length
- var j = 0
while j < outerArr[i].length
.col-xs-12.text-center
span #{outerArr[i].innerArr[j].someProp}
- j++
- i++

i know php

i build homepage with links. i make pretty with css.

how find job that pays 60k at least

Why does every node and JS framework require 50 steps of setup? What ever happened to just putting up a php server for the backend, writing your scripts on a page and using the page? Why is everything g so complicated nowadays?

How would you make a better Cred Forums?

I'm not talking about straight up Cred Forums clones, all of each have either died or are completely irrelevant. I mean taking everything that's good about Cred Forums and making it better in a completely new way.

-Keeping it anonymous, make it even more anonymous.
-Cred Forums is fast and light, make it even faster and even lighter
-Cred Forums uses captchas to squelch spammers, find some non-captcha way of doing it.
-Cred Forums is customizable, make it even more customizable (without having to know css)

Shit like this. Are there any new software technologies that trump the PHP + MySQL way this imageboard works? I'm curious to hear about them.

I don't plan to put such a website out onto the internet, there's no point as I love Cred Forums so much and have been here since 2004, but it would be a fun project.

>-Cred Forums uses captchas to squelch spammers, find some non-captcha way of doing it.
Suggestions?

google natural language api
that's the direction the next web generation is going

>google
I, for one, welcome our new botnet overlords

You can make your own captcha / javascript / image / cookie solution to spammers.

And you don't have to log IP's. But that means you can't ban them either.
And Cred Forums doesn't use accounts either so you can't control that either.
You could obfuscate IP addresses to increase to anonymity and still be able to ban them.

Nevermind, I fixed it.

It depends.

Seriously though, it does. As it says on the official website, React is just the "V" in "MVC". All it does is provide a useful way to abstract away interaction with the DOM and render information to the page. Where that information comes from and how it is processed before being rendered is left to the dev to figure out.

Angular is a more traditional frontend framework in the same vein as Backbone, Ember, Knockout, etc. It does the same thing React does, more or less, and also provides things like dependency injection and routing built in.

>Which is better?
So yeah, it really does depend. Basically, Angular is built with HUGE ENTERPRISE-GRADE web apps in mind with a whole team of code monkeys working on them. React is much more lightweight and modular and you typically have to combine it with other stuff to make a complete product. It's apples and oranges.

>And which do you think will be relevant in 5 years?
Hard to say, but probably both of them. React got a considerable head start and Angular 2 got off to a rough start so React definitely has an advantage right now. For large teams, Angular is arguably better though, so it will probably see a decent amount of usage (assuming Google doesn't kill it as they've been known to do).

Ultimately it's worth spending a weekend learning the gist each of them and deciding for yourself.

Whats the simplest way to force visitors to get the latest js and css files instead of using cached when there are new ones? Almost every time i make an update i have to clear browser cache, but less techy visitors wont understand this and things will be broken.

Only solutions ive found are overly complicated, is there no quick fix solution this?

A common solution is to hash a file's contents and append it to the filename. (So main.css becomes main-asdf1234sawqc.css) When the file changes, the hash changes, so the browser won't have a cached version of that filename and has to request it.

There are plugins for gulp, grunt, etc to do it and I believe webpack has it built in.

Check the etag on load. If etag matches the etag in browser don't force refresh

What's the purpose of mongodb/mongoose's schema.methods? Surely methods have nothing to do with the database or the data that gets stored in it right? So is it just because you're already modeling the data relevant to your objects, you might as well throw methods in there as a convenience? It seems to me like they would be out of scope for a library like mongoose.

Who else can relate? xD

>le meme
>who can relate?
nope

I hate it when they want to move images to weird spots. Like surrounded with text, but not in the center.

That's such a waste of time and it just makes shit ugly.

What's the point of Redux? This all seems so over engineered

Hey anons i have one question:
Where should i place my php class in Laravel?

When i create apps i have folder for classes and i use autoloader, but what should i do in Laravel?

It's even worse when you do automation... The things some people think is a trivial task with an easy solution sometimes..

I would really love it if the implemented a nodejs API that lets people make posts in real time like that one chan I can't remember. Basically when someone starts writing in the text field, your post appears to everyone in the thread so they can all see you typing in real time. It's very fun to see who's the drunk that's always making and correcting typos.

Stories please

It simplifies state management. With redux you don't manage state, you just write simple functions (State x Action) -> State

Hmm.. Well, there's this one story that comes to mind immediately. Spanish happens to be a language I'm fluent in so I once got contacted by this Argentinian fellow who was absolutely convinced he found a way to get rich quick and wanted my help in attaining his riches, I went along with it and inquired what was it that he wanted me to do. He explained to me he found a site that would give you money for viewing ads behind captchas he needed to solve, his idea was that if he made multiple accounts and automated the viewing of the ads that the money would stack up and he'd be making hundreds per week or something. I didn't want any of it but he was really convinced it would work and paid me up front so I looked into it and suggested using phantomjs to automate things but the captcha was a problem. He paid me enough for me to look into a captcha service called rumola which I discovered could be reverse engineered to indefinitely give me free captcha solves by exploiting the free 10 captcha solve trials it give you, so that worked. Anyway he didn't want me to use phantomjs, he wanted me to write it using some automation language called autoit that he was slightly familiar with.. I tried to explain why it was ridiculous automating the browser using that language but he wouldn't have any of it so I said you know what, this is so fucking stupid I'm going to do it anyway, so I used UI automation to do everything in autoit, I ended up creating a little bot that could be placed in a VM that used whatever account you gave it. Here's a video of what it looked like youtube.com/watch?v=q_EtYefbaOU
He ended up running about 30 or 40 of those or so he told me on different machines in VMs, he was really excited about it as he had invested quite a bit on doing it by this point and was certain he was going to be stackin that cash. A month later the site shut down before paying any of the accounts and I ignored his messages since then...

as a justification to learn golang i wrote a decentralized imageboard that uses nntp as a backend (long ago)
frontend and assets:
github.com/majestrate/nntpchan
backend:
github.com/majestrate/srndv2

it works and has a 5 or 6 parties running servers but I am tired of the project and have been trying to find someone to maintain and develop it in my place.

DO NOT FALL FOR THE PHP MEME

go developers are extremely framework and dependency-averse, for good reason. The standard library provides the tools you need to build any web service. Don't make unnecessary abstractions. Don't require huge gobs of dynamic dependencies. Build your system to be simple, maintainable, and self-contained. Compile to a single binary that runs anywhere and everywhere.

This is the go way

things learned from that project:

>redis isn't that good if you can use sql instead
>buffered go channels are a curse
>whoever thought css was a good idea should be put on trial for crimes against humanity
>go is fast and gives me a boner

>viewing ads behind captchas
>automate the viewing of the ads
I would have said buhby right there.

He paid me fairly well which is why I did it. He was very convinced this would all work out. It was working, he last told me he was upset the site was refusing to pay him a total sum by all acounts of about 80 dollars or something, which wasn't even close to what he had wasted on all this.

>maximum profit with minimal effort or by screwing someone else
yep, sounds just like the porteño's way of doing business

bump

is w3schools the best resource for learning html and js?

they aren't even accurate a small portion of the time. MDN is but
>mozilla

Rip.

Websockets aren't going to push XHRs away as long as crap companies refuse to give up PHP.

I just wrote a standalone annotation reader. No Doctrine, nothing. Also, not force of object mapping

Why, though? Doctrine's annotation reader performs pretty well, gives okay errors messages, is used by many libraries already, is cacheable and is not tied to the ORM.

I still hate the fact that it exists because it's actually the primary reason the core doffuses reject native annotations, though.

I just felt like re-inventing the wheel. Also mine is more permissive. My screenshot shows a debug message, but the goal is to offer associative arrays which are optionally hydratet into objects.

I see. Yeah, sometimes it's nice to just re-invent the wheel and see just much is going on behind the scenes.

Yes, especially Doctrine's parser is impressive. But many things of Doctrine are impressive.

Our startup is planning on giving our public facing website a revamp via a third-party (agency).
The commercial team want them to do everything, design and implement the entire site and dump it on our doorstep.
I being the web developer, have said we should get them to create style guides and mockups but no actual implementation of the design.
The reason I want to have a set of style guidelines and mockups is so I can implement them in a manner that makes things like layouts, components, and color palettes reusable and easier to roll out in future to other applicable projects such as a dashboard web app.
I also think it's best to have an abstract representation of how we want to be perceived that can be implemented in a variety of different fashions whether it be CSS, Sass, Less, or something else.
Am I approaching this in the correct way, what is your opinion?

How long does the parser even need to parse docblocks? Does removing unrelated (PHPDoc, TODO and other regular text) docblocks improve performance noticeably?

Caching is fine and good, but I can't really imagine that opening and reading a file or opening a network connection to some server daemon keystore is that much quicker...

I didn't finish to read through yet. I'm trying to implement everything myself and see how Doctrine did, only after implementing.

- no need to open the file because it is already open as the class is loaded. The class data and the DocBlocks are known to the PHP runtime and accessible through reflection.
- The parser has a cursor that looks for the first annotation and then moves on from annotation to annotation.
- there are excluded patterns

My implementation :
- has no cursor
- does 3 regexes instead

I wonder if I will be able to pass all tests and implement all featured keeping my all-at-once Regex parsing instead of the cursor.

I'm building a fullstack app that will render info from the database in chart form via chart.js. The chart library will be loaded in the front-end, so the front-end will need to load the data passed to it by the backend.

What's the most convenient way to get that data? An AJAX call for JSON from the backend on page load? Or is there some way to send that data to the frontend along with the initial template render?

Inject data as JSON into javascript variable.

Building a simple REST API with authentication.

Looking into using express+passport+mongoose. Any better combination, or framework?

How will I access that variable? Express can render a template as a response, but I'm not sure of how to pass data along with that response. Is that even something I can do?

Mongo/mongoose is meme-tier shit that's only good for tutorials and boot camps. If you want an ORM, go with something like sequelize. If you absolutely must use a document-oriented nosql db, look into RethinkDB or CouchDB.

As for passport, authentication is easy enough to roll your own. Just use bcryptjs for password hashing, couldn't be easier.

Express is based, no complaints there.