/wdg/ - Web Development General

One more dead thread for the archive - 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/
bento.io/

>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/2e3hnk5q/
jsfiddle.net/yjjvrLxf/
jsfiddle.net/yjjvrLxf/2/
twitter.com/NSFWRedditVideo

I've been using Emacs recently. What are some must-have packages for web dev? I've currently got web-mode and emmet. Any others worth looking at?

fuck man why would you do that?
I will not believe in a hundred years, that Emacs is more practical, comfy or efficient than a normal editor like vsCode or Atom.

What is it you like in Emacs better than those other editors?

What's the best way to add styles to body in Angular?

Right now I use the tag inside index.html, but I doubt this is the right way to handle this.

.css bro.
Include a .css file.

Or am I missing something in your question?

Components in Angular take their styles from a file defined in component decorator, I thought there maybe was some way to do this with index.html.

>What is it you like in Emacs better than those other editors?

E-peen

Did she lose weight and the Downs syndrome? Impressive.

HOLY SHIT angular animations are amazing

If you're using angular cli, global styles go into the styles file located at the root, I also use the assets folder to make my own scss styles that have to do with layouts, cleanup, mixins and then export them into the styles.scss

can you webdev with Vim?

What's spaghetti code?

What's wrong with you faggots?

sure, but whats the point? most editors have vim emulators.

and most productive people use the default settings of some editor/ide.

switching editors/ides and fucking with them is a form of procrastination

my suggestion, just get vscode + amvim and do your work

Spaghetti code is a pejorative phrase for source code that has a complex and tangled control structure, especially one using many GOTO statements, exceptions, threads, or other "unstructured" branching constructs. It is named such because program flow is conceptually like a bowl of spaghetti, i.e. twisted and tangled. Spaghetti code can be caused by several factors, such as continuous modifications by several people with different programming styles over a long life cycle.

Or javascript

Or any language

How do I sort a list by checking an input against an array in Vue? It works if I use this exact code and turn the "tech" values into a single long string.
export default {
name: 'home',
data () {
return {
keyword: ' ',
sitelist: [
{name: 'MechanicsWebsite', tech: ['Html','Css','Bootstrap','JavaScript','jQuery','jQueryValidate', 'PHP', 'AWS EC2','Amazon Linux Server','Apache']},
{name: 'FitnessApp', tech: ['Html','Css', 'JavaScript','jQuery','jQueryValidate','AJAX','PHP','MYSQL','AWS EC2','Amazon Linux Server','Apache']},
{name: 'VueToDo', tech: ['Html','Css', 'JavaScript']}
]
}
},
computed:{
siteFilter(){
return this.sitelist.filter((site) => {
return site.tech.toLowerCase().includes(this.keyword.toLowerCase());
})
}
}
}

>How do I sort
you still mean filter, right?

like this?
jsfiddle.net/2e3hnk5q/

that is exactly what i want, thanks ill have a look over it

I didn't even know some() existed, that's really helpful

the "el" is a temporary variable to check each array element correct?

yes, it's a reference to each object, when iterating through the array. You could call it anything else.
In this case "el" short for element, but you could use "item", "obj", etc.

is it possible to access the values of attributes in a css class with JS or jQuery ?

Whats a good resource for learning how to make custom wordpress themes?

>he calls himself a web dev
>cant even javascript in 2017
???

what the hell are you talking about?

How can js fiddle use Vue, if in the HTML is not defined?

don't you have to import the Vue script from somewhere?

like

>tfw bootcamp shitters keep applying for jobs in my company
>they barely know javascript, only jQuery

describe some experiences, please

i wanna know what i'm getting myself into

...

top right of the JS field, you can specify things like language and libraries.
yeah

> easily automate repetitive tasks
> better utilities than UNIX
> literal plain-text operating system
> customize literally anything
> navigation/window management with keyboard

Emacs is a workflow, not a text editor.

a.k.a how to drop your actual productivity level to zero. I went down this rabbit hole with Vim. Spent a lot of time adding plugins and crafting the perfect vimrc. Now I just use VS Code with the Vim extension and actually get work done. It's just not worth the time trade-off.

For personal use, which superset of JS is the comfiest?

Just use plain JavaScript. TypeScript only starts being useful in large projects. Maybe try Elm if you want something different. Stay away from CoffeeScript at any cost.

>grads come in, both bootcamp/self-taught fucks and cs fucks
>i know javascript/jq
>they barely actually know js and just use jq for simple animations
gonna blow my brains out

CSS animation or gtfo

In ES6, how should I define default values in the constructor of a class if no input was given?

I automated all the repetitive aspects of my job with Emacs. Customization can be worthwhile.

what are some tasks you automated with it?

Hardly, all that time automating the unnecessary wasted your time.

Are web developers/ programers considered loosers or it is all of the contrary?

Im not trolling with this question, I really want to know.

WHen people ask you what do you do, you respond: Im a web developer/ programer?

How people react when you say that you are a programmer/web developer?

class foo {
constructor(a = 1, b = 2) {
this.a = a;
this.b = b;
}
}

My plain text notes can be converted to the following with a couple keystrokes:
> meeting minutes for my organization
> several types of LaTeX documents
> reveal.js presentations
> blog posts

My work involves a lot of tedious text editing and Emacs can automate all of it on the fly. Macros and scripting in the REPL are wonderful.

I also automated my entire GTD system in Emacs, too. Org-mode is like a custom Trello.

Emacs makes this all super easy. I still feel like I've hardly scratched the surface of what it can do.

Coffeescript is the absolute best syntax for any general purpose scripting language. I wish they would make it a stand alone compiler instead of just a js transpiler. ES6 stole a lot of syntax from Coffeescript. They syntax in ES6 can get wonky because they have to format the syntax in ways that will not clash with older versions of js, so their are things like callback functions being used that really dont need to be there. ES6 is taking over as the standard simply because people dont want to have to choose between a bunch of different options like Dart, Typescript, etc

Any articles I can read about making a consistent messaging system for a webapp? Guidelines to design general messages, form confirmations, error messages, warnings and toast messages.

I refer myself as a software engineer or web engineer for more complex projects where I need to design the architecture. If I'm working on a simple project that doesn't require much thought, I usually use full stack developer.

Question is pointless. If you care that deeply about whether or not people think you're a 'loser'/how they react for doing what you enjoy, your priorities are all fucked.

WordPress Codex, you don't need anything else.

There are none. The WordPress codex is kind of terrible, but it's probably your best bet. Basically it assumes you're not a programmer, so it doesn't use any heavy programming terminology, but they also don't explain things very well in any other way. They just throw some code samples at you and tell you it works.

In general, WordPress is a blog engine where additional functionality got stuffed in until it oozed out of the cracks, and now it sort of resembles, and is used as a full CMS. But the API is still very oriented as a blog engine, which results in things that don't make a lot of sense. Like how widget areas are called sidebars in all the functions relating to them and about half of the documentation, despite not necessarily being bars or on the sides. Or how you need to loop through an invisible list of one element in order to load some invisible state variables relating to the page being loaded.

If I'm using lazy laoded modules on angular and I'm implementing an authguard in the core module, but the main routing is set up in the app routing module, is it ok to import the authguard in the app routing module despite it being stored in the core module?

How do I use jQuery animation with react components? I.e. I want to dynamically add a component based on state, and I want that component to start with a height of 1 and animate to it's full height. I can show/hide it no problem, but I want to make it grow/shrink when it's shown/hidden instead of just appearing/disappearing. I've never really used jQuery animation before as I'm new AF to web dev.

>Started configuring a Rails 5 app from scratch today
>Webpack, React, React-Router, authentication
>too much magic going, finally give up and decide I'm just going to do this project in Node js even though I dobt know it at all
>Everything just works
>Still need to setup a Relational DB, some kind of authentication, Typescript, and mobX, but everything else works fine so far.

Is Rails a meme? I spent 1000 hours wrestiling with the asset pipeline just to say fuck it and get a node js version to work very quickly. (I program in Rails mostly as well...)

From the internet:
At work, when people look at my screen and see it full of code, its not unusual to get a comment about it looking very complicated or how clever I must be to understand it.


This is the tipe of response I wanted to read

:O is that breakfast? lunch?

I would just use CSS animations. Then its just a matter of changing the elements class to trigger an animation, maybe use a setTimeout to get some timing going if you need to.

your stack sucks. If you're going to be making a React SPA, don't even deal with trying to cram it into the Rails asset pipeline or whatever yooure doing. Make the backend a rails app that handles JSON requests/responses, and then treat the SPA as a separate app in its own project folder with its own build chain.

Are there any modern alternatives to Java Applets?
I need to (with permission of course) watch a folder on a computer and upload any new files that enter it.
It's supposed to run on a webpage.
No matter how much I google though, there doesn't seem to be a JavaScript solution.
What other web technologies can I use for this?

>I need to watch a folder
>It's supposed to run on a webpage.
The browser is not the right choice for this kind of thing.

Browsers do not allow websites any direct access to the filesystem. You cannot do this.

Breaky my dude

> mfw i am a lead webdev
> literally only know vanilla js

DONT
USE
THE
J
WORD
HERE

JEWQUERY

Do you not use it at all? What do you use for making REST calls? I've just been using $.ajax()

Nothing wrong with $.ajax() but I'd rather use fetch() or axios these days.

axios or fetch

I'm very new to webdev. Are these part of ES6 or some other bullshit I'll have to npm install?

fetch is a relatively new browser API that basically wraps XMLHttpRequests in a promise format

>What do you use for making REST calls?
Jesus, do you really not know that XMLHttpRequest is part of the web api spec? This is why people hate developers that only know jQuery.

fetch is natively available in modern browsers.
Axios is a small library.

>do you really not know
you retard, I just said I'm entirely new to web. i've been building back end server code and android for the last 5 years, you know, real coding, and I'm just now starting to get into web.
>this is why people hate developers that only know jQuery
Well I don't know any jQuery besides .ajax()

Sorry for being harsh, but I really recommend dropping jQuery. It's just a bad library.Use Vue or React or Angular or none of them, just not in conjunction with jQuery.

>you retard
You're the one asking for advice while building shit out of technologies you don't know how to use and clearly haven't researched.

...

>user in charge of deciding what coding is real and what coding is not real
What are you doing insulting others and calling things bullshit if people are genuinely trying to help you...
Shaking my head user-kun.

I called him a retard because he was being incredulous and shitting on me when I already said I'm new to something. Meanwhile people like & were actually being helpful. That's all.

I realized this not long after dicking around with it...i think im literally just going to get my feet wet with node js.

Basically i wanna get as much experience with the front end as I can so Ill probably build most of that out before digging into the mobx / datastore bits.

so far react router seems cool when Im using it sans rails.

I've never been big into webdev, I learned some simple HTML and later, CSS, in the early 2000s and have built some small static websites but that's about it.

I would now want to create a basic HTML website, without Javascript or anything of that sort if possible, to which I could periodically also post blog-like texts easily.

I don't mind if it all exists as a static webpage on the webhotel's drive, as long as the editing would be easy - so that I wouldn't manually have to, for example, move each news post by one page every time I make a new one. I just don't want anything like Wordpress or the like on the server.

The site could be very simple for all I care, even something like Markdown (like the github/gitlab static pages often are.

Any help?

Do this with an ftp program that has watch folders

>ES6 or some other bullshit
kys

>being this much of a nigger

godly trips demand an answer.

Get with the times. Build a simple page that uses react to render objects from a database to the page with static formatting using CSS. Use pagination after a certain amount of entries per page. Add your blog posts to the database via whatever means you want, and your website displays them automatically. No need to ever update front end code, just add entries to your database

I have a front end application where I want to save certain potential sensitive data in localstorage? How should I proceed? Encode it? Encrypt it everytime I save/update it?

At least I'm not a proprietary cuck.

What are you trying to save?

Api keys and associated secrets

sensitive data for whom?
Something the client is not supposed to know or find out? If so, that wouldn't work or be secure.
Or to prevent other people than the user from snatching it?
What scenario are you specifically thinking about?

I HAAAAAAAAATE JS

>want to add event listener to all input elements of particular class
>querySelectorAll don't select it
>getElementsByClassName don't select it
>querySelector do select it but don't select all of it

I DON'T KNOW HOW TO DO THIS AND IT IS DRIVING ME BONKERS

>i hate js
>i don't actually know how to use it
literally every JS shitpost post in a nutshell

anyway post your code in a jsfiddle

jsfiddle.net/yjjvrLxf/

they are all selected properly, but since it's more than one, the result is an array of elements.
The Eventlistener needs to be attached to the elements of the array.
An array itself has no use for an eventlistener.

jsfiddle.net/yjjvrLxf/2/

Thanks very much for your help. I suspected a loop had to be used but have been scared off of using loops by Sup Forums memery about terrible programmers from developing nations.

to add, you should have checked the error in the devtools console and looked up the addEventListener function on MDN to see how it's used on elements.
Read the documentation and you will (almost) never be stuck.

fetch() is seriously underrated. It's way comfier than the old way of doing it, and frankly comfier than a lot of old libraries.

There's a catch though, there are failures modes that don't throw exceptions, so you have to check for an OK code.

anyone looking for poojects, ideas or teaming up

what about an io game?

mmo dynablaster or a less complex dota port (3v3 or no gui only for AI playing)?

I was thinking about a gambling site with bitcoins

use .forEach() on the nodelist to add miltiple event listeners

also read about event delegation