/wdg/ - Web Development General

Congrats, you're better than 90% of JavaScript developers

The day we don't need jQuery has come; that means jQuery has fulfilled its purpose.

What did you build it with

I'm switching to MongoDB
And i'm enjoying modern js

Attached: Screenshot_2019-08-11_18-07-32.png (539x183, 45K)

I haven't used mongodb in forever. is it still mediocre as all fuck? I actually thought it was pretty ok for really basic, one off shit, but not ok enough to really replace sqlite3 for that.

just chuck em in one table and give it a 'console' column.

Any vu.js users here?

I am working on making a responsive navbar for my application. I have two different files for different styled navbars, one which is the regular navbar and the other which switches to a dropdown menu. I want to tie them both to media queries so that it switches from the regular navbar to the dropdown when the screen size hits a certain size.

I know about v-if/v-else and v-show but how do I tie that into the mediaqueries? Is there a better approach than what I am doing?

made a thing
vgstats.xyz

No idea, I just started using it because everyone is using it.

this is a visual representation of what I am trying to do

>bowgen
>241 hrs
very nice but also cursed

Attached: 1421657233490.jpg (880x880, 72K)

i imagine you are using vuetify
to start use with "xs" "md" "lg" properties for every of your components on your navbar to make it responsive

don't use v-if for that
use the hidden property
v15.vuetifyjs.com/en/framework/display

>v15.vuetifyjs.com/en/framework/display

I guess I will have to add that. Damn was hoping not to add another dependency/package but I think that is simply the easiest way.

rage.mp/
Is this landing page hand coded or does it use some type of CMS?

If I wanted to make a landing page like this what would be the most effective way of doing so

Can't get external stylization to work on Django. I put my CSS file in the static folder and added STATICFILES_DIRS=( xxx/static' ), in settings.py I also added {% load staticfiles %} to in the html doc but its not working

Is it worth learning jQuery in 2019?

How do people setup builds for Angular based projects for team projects? Ie so that a new person can clone the repo and then build the project in one step and not be forced to setup whatever bizarre dependencies the original dev used at the time?

>learning
There's not much to learn about, it's just some helper functions.
Most of them are already supported by browsers today, so there's rarely a need for them.
I'd avoid it.

help me choosing one IDE/editor (one... only one)
>Neovim, Vim, Emacs, Spacemacs, Brackets, Light Table, Bluefish and Geany
I need it to front-end, Django and github, specifically JavaScript (HTML/CSS), Python and Git

Attached: Drunk_Kobayashi_Python.png (640x362, 220K)

VSCode is great. It has a ton of extensions to work with pretty much any language.

How do you make an animation play every time a button is clicked? Currently I can only make it play once, then when you click it again it stops working.

codepen.io/yuzelol/pen/vYBKNxx

I got high and did something similar just because I wanted to a week or so ago in like an hour.

pastebin.com/post.php

Fucking lmao, didn't mean to post that. Anyways I did this as practice for making .functions() in case I ever wanted to make my own library

pastebin.com/UB02TcPg

listen to the animationend event on your floater and remove the class again afterwards.

It works fine for me?

No, it plays the animation the first time by adding the animation class.
The second time you click it removes it again (toggle), hence element just stays there.
If you click it again then it'll do the animation again.
He wants the animation on every click, not just every second.

should be for

Asked this on /3/ already, they told me to go here:

Any idea on how this was made?
dice.berlin/

I‘m guessing three.js but I‘m a designer, not a programmer so I have no idea what I‘m talking about.

Attached: 1852839C-E7C4-40EB-B952-D2895B5A0DB4.jpg (1242x1778, 217K)

they use some greensock libraries.

cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js

greensock.js

Don't know why I put .js, it's greensock.com

I have a live webapp written in godawful php

It was initially meant to be a temporary solution but it grew and now it's making me some money.

I've started rewriting it in Angular8 with a PHP/GraphQL backend

I'm almost ready to launch the new version, but did I fuck up?

Does cache-busting work? is it as easy to debug? should I have application insights? analytics? is angular shitty?

Angular is great, but I don't know if I would have written it with fucking php lmao

Which is best to make an app with firebase: React or Angular8?

Yeah ideally once I hit feature parity I can redo the backend in something more modern. But I like PHP and it was a quick turnaround, so was more of a 'safe' choice if that makes sense.

I've been enjoying the MEAN stack, but I've recently (as of yesterday) started getting into fire-base like databases. I found one I'm really enjoying right now called GUN that you self host and is open source.

>a temporary solution
temporary solutions always become permanent ones lol

VSCode

So I need so favicons for my portfolio project (info icon, filled star, empty star). what is the best way to go about this? Should I bother with font awesome or look up svgs to use?

2019
Not using Laravel

font awesome

Am I supposed to have a separate application for the backend if I go with something like NextJS or Sapper? I feel like I'm mixing things up.

Are there better Udemy courses for web dev than Traversy’s or Nagoie’s?

That's not what a favicon is

Dunno who Nagoie is, but Traversy is a shitty developer and teaches bad practices, you should avoid his courses. Try Maximilian Schwarzmüller instead, this guy really know his shit.

i need to add server-pushed notifications to my dot net mvc app
whats the best way? ive heard of streaming.io w/ node js for this purpose

i meant socket.io

I struggle to understand why so many people are imploding into a black hole of butthurt over Vue 3's new proposed function-based API
It looks pretty decent and the team stated that the old syntax wil still be remain valid for the foreseable future

In most cases, yes. You must have a separate application for an API, for example. This should clear things up:
medium.com/the-ideal-system/next-js-is-not-what-you-may-think-it-is-8423172e7401

Seconding Maximilian Schwarzmüller. I've not watched any courses from other developers, but Max was recommended to me by my company when I was starting out: everyone had very good opinions on him and I learned Vue.js from his course. He doesn't waste time on obvious things as if you were a retard (most webdev courses do this), his explanations are very clear and correct, he provides a lot of the intuitions and so on. Overall pretty great. (he talks in a somewhat slow cadence though, so you might want to watch at say 1.25 or 1.5x speed)

Laravel is making the best out of something very bad (PHP). If you must use PHP, then Laravel is good. But then again, there's no reason to use PHP in 2019, when there are more sane languages such as Ruby and Python to use in the backend. Hell, even JavaScript/Node.js is preferable over PHP.

Hey guys, I have some questions about code structure.

I'm building a website with Laravel, each user can upload an avatar which I send to imgur for free hosting. The problem is that not only users can use images, but also companies.

That means that my code to upload image on user and company are the same. I copied and pasted the code from the model (where the url only changes if it is a valid imgur url, if not it gets a random image) and from the controller. I don't know what would be the OOP way to handle something like that. How do I abstract something like that so I don't have to take care of the same code in two places?

react native or flutter or xamarin? what's the best option?

As always. Personal taste.

I think Flutter is fun.

I do have a card element in my webapp (using vuejs and vuetify) with a block of text. The card has a fixed width and height, I want the block of text to fade out into ellipsis when it would overflow the card. Is there a standard way to do this. The default ellipsis css thing only works for one line of text.

Factor out the code into a function, call that function from those two places?
>Is there a standard way to do this.
line-clamp, it's in Working Draft. Should work in the latest browsers.
jsfiddle.net/21uys3fp/
caniuse.com/#feat=css-line-clamp

> Ie so that a new person can clone the repo and then build the project in one step and not be forced to setup whatever bizarre dependencies the original dev used at the time?
Just include all the steps in a custom start-script.
As for dependencies you never want to include them in your source unless you want to break shit and annoy the fuck out of other developers.
I'd recommend with using the most recent minor version or the most recent patch of the dep, that way you won't be completely fucked if something major changes in a library because you used latest. Everyone does it differently.

But where do I put a function like that?

>How do I abstract something like that
Make an abstract class :^)

I'm not familiar with Laravel's directory structure, but there should be a helpers/ directory or module (or a similar name), or you can create one, to import functions that are used in multiple modules from it.
I suppose it would be something like this: tutsforweb.com/creating-helpers-laravel/

What said but instead of having your consoles hard coded you should have them using a console table.

You should do this because then you can properly use indexes to speed up your queries

What makes anything choice a better option than PHP? It gets shit on a lot but its a lot better than it once was and can outperform nodejs

I know nodejs supports interactions with the frontend much better ofc

I'm currently working as a security officer/maintenance worker due to shitty location/no vehicle. Anyway, I've been programming for many years, basically as a hobbyist. But I saw a problem with my company, and have been working on a solution. How the hell do I sell this to them? Should I just tell them to make me a software developer, and give me a raise?

Thank you.
I am a designer with little to no programming knowledge and after looking at Greensock for a while now, I still can’t figure out how tweeking svgs with and transforming them would lead to this result.

Anyone know the theory behind it? Only guess I have is transforming gradient meshes and having a mask over it, that transforms, too.

But I might be misjudging, cause the grain filter is throwing me off.

>It gets shit on a lot but its a lot better than it once was and can outperform nodejs
No, no it cannot.

What's the easiest way to setup a secure website with a login screen? You'd think this would be a simple thing with web technology considering how many different frameworks and such there are.

>You'd think this would be a simple thing with web technology considering how many different frameworks and such there are.
Well, it is a simple thing. You can do that with any of the major frameworks. Have you considered reading the docs?

Okay so which framework does this?

Any of the major frameworks, do you know how to read? If you want us to pick a framework for you then say so. But it's not like you have to pick a particular framework to do what you want; they're all capable of doing that.

Bullshit. I looked at express.js and none of them has a simple way of just setting up a secure site. It says I have to cobble together things like helm and basic put together a whole bunch of shit. It's not simple if it takes a lot of reading and R&D to accomplish it.

I bet you fell for the node.js meme. Just start on a language with a decent framework, bro.

>What makes anything choice a better option than PHP?
In the context of performance? Pretty much everything else, even node.I'd send an email to the manager in charge of the software team asking to set up a meeting where you can show this to them. It could go either two ways - they're impressed because it was a problem on their radar and the value of your work exceeds the amount of what they'd pay you and will absolutely want to hire you or it's not actually a big problem + the amount of money they'd have to pay you doesn't make it cost effective to hire you. Either way, it wouldn't hurt to try and will give you some experience pitching your work. Just say "I know you've been having problems with A and I've been working on something to help address that"

Use a service like Firebase.

Setting up authorization and authentication with express is easy though. All you need is some Jwt library and I'm pretty sure the popular ones have loads of examples.

github.com/encrypted-dev/proof-of-concept

Express.js is a microframework. You're given freedom and low overhead with the tradeoff that you'll implement the things you need yourself. If you want everything already picked and set up for you, go with a major framework such as Rails or Django. That being said:
medium.com/@therealchrisrutherford/nodejs-authentication-with-passport-and-jwt-in-express-3820e256054f
9 minutes read, user. Don't be so lazy, you give us web developers a bad name.

Express isnt a web framework. If you want a framework for Node look into Nest.js, there are others that might be better, I'm not very familiar.

I would recommend to stick to something more established like Laravel, Spring or Django if you actually want to build anything.

If you are only learning stick with only express and start looking for libraries to help you.

It's not using svg's, that's for grandpas. it's using canvas. Canvas is an HTML5 thing that redraws images at ultra fast speeds. You can actually copy the image while it's moving.

Go through this and you'll understand it. Even Newgrounds replaced Flash with canvas and makes all it's games with canvas.

w3schools.com/html/html5_canvas.asp

Attached: file.png (1366x662, 218K)

Okay thank you for the feedback. I'm looking into nest.js right now. I'm actually not a web developer. I just thought that at this point we'd have something you can just drop in, feed a cert, and then do whatever JS/PHP/etc changes you need to make to a base website.

Nest a shit. React or Angular is top tier.

>It's not using svg's, that's for grandpas.
j-joking, right?

Attached: monk.jpg (474x446, 22K)

Are you asking if I'm joking about svg's being outdated, or joking about that site using canvas?

Because I'm telling the truth on both of them. You can make entire games. Look, Unity even has a plugin for canvas so you can turn your games to JS.

newgrounds.com/portal/view/736192

Attached: file.png (960x600, 304K)

About SVGs being outdated. I thought they were latest, hottest shit on the web, as a superior alternative to web fonts and some .png's and shit.

Nigga SVG has been around since 2001. It's old as shit.

>It's old as shit.
So are Python and Ruby, and they were still all the rage until very recently. There's a push for using SVGs for a lot of things on the web due to superior performance compared to the alternatives. Probably not when it comes to games though, I wouldn't know, I'm not interested in that too much desu.

Sort of. As far as shapes, games, and animations go Canvas comes out king. Especially since you don't need another file type for it, it's all script.

People still use .svg for text and font though because it scales better.

If you want your own text pack I recommend .svg, for everything else like animations which I was originally replying to that guy asking about the site, use canvas.

Though I will also add, I don't think people really use svg anymore for font texts either. Last I checked Google fonts uses that woff2 thing and CSS. I think Font Awesome does too.

Thanks. I wasn't a fan of Traversy because he just types out things without going into detail except for basic things which most people should understand.

To each their own. I learned Angular from Traversy, but it's something you got to pause his videos on your own and google why things work.

I don't want to fuck up my debian installing extra repos, compiling or using close/proprietary software. 2 times I literally broke my debian..
Last time I tried Atom (following-the-exactly-instructions from page) , errors everywhere, warnings and I failed to make python work correctly (Atom never worked with python-language-server).
(I really wanted to stay with Atom and use it for everything ;_; github was the only thing that worked.)
well, since I installed VSCode everything is fine.. everything works.
thanks guys

Attached: 792539.png (1920x1297, 1.08M)

I mean I know you're going to meme on me, but just use Ubuntu. I got Atom to work instantly and I've never broken shit on my system except when I tried to use some obnoxious video wallpaper thing.

It just works.

How can I include a common file, like a nav bar or footer, other than PHP?

Attached: Evstafiev-sarajevo-building-burns.jpg (386x506, 301K)

What backend are you using if not php?

Just want to know if there are any alternatives. I currently use PHP but am considering switching to a another backend like Node, Python, etc. Just want to see other options