/wdg/ - Web Development General

Vue is nicer imo, but learning React first might make more sense, if you are concerned about finding jobs for it.

500% chance, that there are libraries for Node to mirror anything, that a browser can do.

Is SoloLearn are good place to start learning?

>500% chance, that there are libraries for Node to mirror anything, that a browser can do.

either I'm a retard or I can't find a solid window implementation that just werks.

Hello /wdg/, what do you do if you feel alienated from your family?

firefox developer edition is pretty gud

Shows css grid way better and has automatic pretty json viewer.

I don't see why chrome doesn't have these by default

become a trap

>const string = "100"
>const number = 5
>string + number // '1005'
>+string + number // 105

i will defend this

sry, what are you looking for. WebRTC library?

working as intended, but shouldn't be used.

Explicit conversion with Number() if you have to.

I only help fellow team members.
soz m80 :^)

d:^(

Hey /wdg/

I’m getting into web development and I want to build a bookmark manager because all the default ones are shit and it would be good on a portfolio. I’m gonna use React for the front end but I haven’t done much back end work. I was gonna use SQLite for database and python for the scripting, any places that would be good resources to start?

Attached: image.jpg (960x1280, 707K)

Look at Pinboard for inspiration. It's the best bookmark manager out there. React seems overkill for something as simple as this, but it might work. I would just use Flask (with the default templating) and call it a day. No need for Javascript imo. Flask + SQLite works well. There are demo/skeleton Flask projects that you can base your project off.

Is JS a bad first language?

I apologize if this is a meme, I'm at programming square one and I keep hearing that it's an unusual language. Don't want to get fucked up learning computer Swahili and then not be able to learn English.

How long did it take you niggas for all this shit to stick? I am struggling with remembering shit.

Friendly reminder you will never make it.
Perhaps just go into prostitution :)

I'm usually working with emberjs, which has a handy SCSS compilation and CSS autoreload.
Does anything like it exist for static pages for easy development?
I don't want to run a script everytime I change something and reload the entire page.

I think the main argument against it is, that people say that you should start with a typed language to get a better understanding how things work underneath, as JS is fairly high-level.
But personally I think it doesn't really matter.
JS is nice since you have such a broad area to apply it to with the web as the platform.

Webpack with its dev server.

Parcel may be easier to setup but less flexible. Haven't used it yet.

gulp watch combined with livereload or browser sync

thanks guys, will have a look at those

Programming languages don't work like that. Americans especially have a really tough time with it all because they pretty much just know english and only ever use english, but in programming you're guaranteed to use a variety of languages.
JS can be a good first language, it all depends on how you digest and internalize information. Some people have an easier time with python because of how things are presented.

Might want to look at your diet and habits, they could be making understanding things much worse, find new sources to learn from, or maybe even just recognize this isn't for you.

browsersync

I struggled with JS at first because of the pitfalls of not having types and ES6 was a hot topic, introducing a lot of stuff that were too confusing for beginners. Then I studied more "conventional" languages like Java and C# and it made much more sense when I came back to it.

It's different for everyone, I guess. Try it first and see how it goes.

testing

(193+118)%5 = 1

Attached: 1522595887325.jpg (750x746, 77K)

crypto subtle actually and webrtc, yes.

>course introduces you to things for 30 seconds, provides no examples or reasons to use it
"Nice, we've now learned ALL these things!"

Yeah epic dude I don't even remember what you were talking about

Help please I'm retarded.
I'm setting up a node server to fuck around with GraphQL but for some reason I can't get the Express router to work at all. None of the routes get triggered, it just loads forever.

// index.js
const appConfig = require('./config');
const express = require('express');
var app = express();

// Set up configuration variables according to the current execution environment
const environment = appConfig.environment;
const config = appConfig[environment];
const defaultPort = config.app.port;
const logLevel = config.app.logLevel;

// Set up modules
const logger = require('./src/logger')('server', logLevel);
const db = require('./src/db')(config);
const handler = require('./src/handler')(db);
const routes = require('./src/routes')(handler);

// Set up routes
app.use('/', routes);

// Start listening
const server = app.listen(process.env.PORT || defaultPort, function() {
const port = server.address().port;
logger.log('info', 'App now listening to port ' + port);
});

// src/routes/index.js
const logger = require('../logger')('routes');
const bodyParser = require('body-parser');
const express = require('express');
const router = express.Router();

module.exports = function(handler) {

logger.log('info', 'Setting up routes.')

router.use(bodyParser.json);

router.get('/', (req, res) => {
logger.log('info', '/');
res.send('Home Page');
});

router.get('/quotes', (req, res) => {
logger.log('info', '/quotes');
res.send('/quotes');
});

return router;
}

What am I missing here?

When you build a game using HTML5 canvas, what's the usual approach to making a UI for it? Do you just make the UI in HTML or do you render it within the canvas? The latter seems like a waste considering that HTML Does a ton of UI work for you.

is 'handler' being passed to the return of "./src/routes" correct?
I mean you don't need to find a library, that implements the window object.
"node webrtc" has enough results.
Node has it's own crypto module built in as well, but I don't know if that fullfills the same role as the browser API.

>is 'handler' being passed to the return of "./src/routes" correct?
afaik yes. I removed it from the code for now but handler is gonna be used inside of the routes defined in the routes module.

If it's a game which needs a gamepad, you can do what you want. But as soon as it needs keyboard / mouse you're gonna have to be careful with event listener focus. Relying on traditional HTML elements for input means you cannot switch around focus automatically.

If that's not an issue, go ahead and position:absolute all the HTML tags you desire and float them over the canvas as you wish.

>I mean you don't need to find a library, that implements the window object.
>"node webrtc" has enough results.
>Node has it's own crypto module built in as well, but I don't know if that fullfills the same role as the browser API.

I did find the the webrtc stuff, I might be able to get that to work, but the node crypto is a tiny subset, and the libs aren't fully implemented either. (none have all the stuff I need), and really few users at that. how can you trust them? I don't have time to audit their code.

I was expecting to simply plug the clientside code into the serverside, but I was sorely disappointed.

I "solved" it by building a proxy with sockets using a headless client as the "backend"

ugly, ugly, ugly.

Yeah so as expected, I'm just retarded.
The issue was that I called
app.use(bodyParser.json)
instead of
app.use(bodyParser.json())

How much does web dev overlap with mobile dev?

an969567.github.io/game14/

Hardly at all, unless your mobile app has online capabilities, in which case it will consume an API provided by a server which is consumed in the exact same way as you would do it from a web app.

Super-important tip you must never forget: always design your sites mobile-first. Use the Responsive Design panel on your web browser to view your site as if from a mobile phone first, before designing your site for desktop computer resolutions. Because the internet is on phones now and people carry those things around in their pockets, compared to laptops that are far chunkier and desktop PCs that hardly move at all.

generally, a lot
but the actual professions of web development vs (native) mobile development? not at all

It's a simple and "quick" language to use, e.g. type conversion without cast. The hate is usually because of ignorance or when it's used for stuff out of the web.

what's the most tranny language and why is it Ruby

indeed search for "vue developer" in my city, Houston TX:
>8 jobs
indeed search for "react developer" in my city, Houston TX:
>76 jobs

I bet the ones mentioning vue aren't even actually hiring vue but just using it for a keyword instead

Pls spoonfeed me, I'm a brainlet fag.
I want to make a camwhoring webpage in my shithole country where nobody speaks English. I don't have much money so I have to make almost everything by myself. To make a functional livestreaming page what should I learn. I guess the basics are HTML and CSS but what else?

you probably need backend too

React for employment, and plus its pretty cool.
Me, I switched over from Angular to React.
Vue just doesnt have the community and widespread use yet.
I'd also at least get somewhat familiar with Angular, and its components

It's a turn based game, so all the input happens through the UI. The canvas just renders the scene, it doesn't handle any input. Do you think I can get away with it?

Do all components that use forms need to be stateful in react?

Absolutely.

Udemy to me has the best straightforward, inexpensive python course by Zack Ruvacalba.

For the SQLite, i'd recommend the book 'PHP and 'MySQL Web Development' (4th or 5th Ed.) by Welling and Thompson. It's like a bible amongst PHP/MySQL folk. Also pdf version floating around, but i didnt say that.

you might want to skip the SQLite, and just go with basic MySQL using phpMyAdmin (or command line), it's just a bit more effort and will look much better on your resume, and phpMyAdmin makes MySQL much more user friendly. plus, you can build on it.

JS is super essential as you know, but take the best path to it, me thinks you'll get to it eventually.

me, i at first knew nothing of C legacy languages, hacked away at JS, went and learned PHP, came back, and JS was much easier (and Python too).

imho, being familiar with the whole C-legacy thing helps you learn languages so much faster.

I had exactly the same path. I used to dislike JS but now it's the exact opposite so JS and Python are my go-to languages for pretty much everything, programming and web dev related.

the very hugest thing with learning programming langs is actual use. you cant just read, you gotta do, even things in chapters that look 'easy', you gotta actually do them on your IDE. Then, make summary sheets of command syntax so you don't have to ref the huge book or tut all the time.
keep your skills freshened up periodically.

there's a lot of parallels to learning a spoken language: use, practice, quick ref sources

>the very hugest thing with learning programming langs is actual use. you cant just read, you gotta do, even things in chapters that look 'easy', you gotta actually do them on your IDE. Then, make summary sheets of command syntax so you don't have to ref the huge book or tut all the time.

Rewriting things from books is underrated. Literally doing it right now and I understand things much more.

Alexa please.

There isn't any point in learning web design any longer. There is too much competition out there.

id go with html UI, just makes the whole thing easier to set up. Or else your control area has to be drawn out and take up space you'd have to keep figuring in/out of your gameplay area.

use HTML5/Canvas animations, but i've never made a game with a UI, so I'm just supposing.

My Vue2 project is 100 KB with Webpack minification
I added vue-chartjs like this:
import VueCharts from 'vue-chartjs'
import { Bar, Line } from 'vue-chartjs'

Now dist/build.js is nearly 500 KB!
How can I make it smaller?

vue-chartjs.min.js is < 10 KB

looks like json object thing syntax

PHP, there's already a cheap script available to do that.

there's actually several ways to do that, but i found the PHP route quickest, probably because the scripts were available and i already knew PHP.
PHP is a good lang to learn anyway, if you have time. its an old warhorse

>How can I make it smaller?
Don't use Vue-chartjs charts, choose a smaller framework ?

yeah, actually i made all my summary sheets as I went along in Word, then, would make big pdfs. i put them on my phone, and when waiting some place with my phone in hand, i pick one out and scroll through it to refresh.

Is there a way to use Javascript stylesheets in the React Native format, but for regular React? I'd like to keep my styles reusable in case I ever decide to port my webapp over.

Does the browser router component really need to be on top of the application? Seems kinda weird.

that's actually a good topic for discussion.
the whole wix/squarespace/wordpress thing has divided web dev into different 'camps' now:
more advanced, less advanced (lacking deep JS and related), Wordpress, and lastly wix & squarespace.

there's a lot to it, its ever-changing.
Me, i'm pretty accomplished in langs, but learned all the wordpress stuff too just to add those clients, i tutor them too in it.

I'm doing the "advanced web developer bootcamp" but it's killing me inside, I'm learning pretty much nothing from it, I am really just not interested because the tutors that aren't Colt are just so bad. The information is there and they know what they are doing but I don't learn like that. It's like highschool school all over again, the teacher doesn't give a shit, they just give you the info and you copy it onto a page and that's it, I'm learning fucking nothing.

It's barely even a course, it's just like a set of videos you watch, there's no interactivity and when there is it's mostly copy-pasted code or pre-written and the tutor goes on 1.5x speed while saying what he's writing but never explains any reason behind it or why or anything, it's just so fucking bad.

Are there any intermediate courses for MERN other than this, or like paid subscription sites or anything? All I even want is a place to learn and be spoken to like a human not some sort of braindead robot.

Attached: thonkeng.jpg (861x1300, 126K)

I know Stephen Grider is popular and praised and he has a fullstack js course on Udemy called Node with React: Fullstack Web Development that might interest you. Personally, I found some of his other courses boring and I don't consider him a good teacher though he seems to be good at coding.
I don't know if this course is any different.

16.3 react comes with a better context API, is redux dead? Application wide state is pretty much what most people use it for.

This is wrong. I'm peanut butter and my calculations resulted with Creme.

me, i learn from whatever source i like, my mains are:

books: don't underestimate the quality of a well written current, well accepted book. good thing about books is they cover everything, many tuts and online just hit main topics, books offer a complete view. If I'm serious about a language, I get a good, fat book on it that has legacy praise. If not sure, look through your online public library catalog, and check out like ten or fifteen. chances are they wont be the most current editions, but you'll have a good idea. also consider learning what books universities use to teach their courses.

online courses: me, i go with Udemy, EdX, & Microsoft Academy (for better or worse)

Tutorials: Traversy Media on YouTube, definitely sub to him, his following is growing exponentially and his quality has improved over time. there's more really good as well.

and of course just hodgepodge bs like W3, blogs, etc.

What tip do you have for someone looking to really up their web development skills?

I feel like I've stagnated for over a year.

yeah chart.js is fairly huge.
In part because of moment.js, which brings with it all its useless locales, that you don't need.
There are ways to exclude these though and only leave in the english ones or whichever else you need.

You can load the .min version onto the window object, so that Chart.js won't load the full version itself.
But I don't know if that works with the Vue component.
Alternatively you can replace what gets loaded inside webpack and force it to use the .min no-locales version.
Or just use something else.

>Application wide state
What exactly does the Context API then?
Since it's probably more than just a shared single source-of-truth object, that you could always use.

do you have a personal project you like working on?

Attached: chart_moment.png (757x77, 13K)

My todo-list app is coming along, it's built mobile first so it looks ugly on desktop. I think that'll be my next step.

Attached: 1504586190303.png (833x1488, 117K)

Isn't setting a global state dangerous? Why would you want your whole application to get the state of things you can't/wont see (yet)? Shouldn't it be like

Global app
---Users component with state relevant to the users
---Something else with state that has nothing to do with users

Why would you want your app to have a global state? Aside from login info and notifications I guess

That pretty much looks like exactly what I was looking for actually, thanks

I do most of those things except read books, I just do them when I don't feel like doing something "serious" though, as they're usually one off random bits of info I can have on in the background and pick up a thing or two.

...

go over to themeforest and get a template you really like or something
then take it apart, deconstruct it, see how they did it. thats a quick skill boost

in the case of state management libraries, they will warn you, if you try to modify the state directly.
It works more like dispatching and handling events, which means, that you can see exactly which component interacts with the state, what is set, when, and even go back in time to previous state snapshots for debugging.

Having easy read access to it all is the useful part, writing to the global state without proper care is what has the potential to create a mess.

ReactDOM.render((



), document.getElementById('app')
);

Is this OK or should I put the inside ?

No, definitely not. Fuck the haters. It's a great first language. Learn JS and you can create all sorts of shit, and program anything: web applications, mobile applications, desktop applications, IoT devices, robots, etc. JavaScript is even used in fucking washing machines. With technologies like node, mongoDB, etc, you'll also be able to build full-stack applications, whereas in the past, you'd need to learn about 3 languages to do this.

You will learn all the essential shit you need to know, and the transition to other languages wont be so bad. You'll learn loops, conditionals, etc. etc. It's a full-fledged language.

the shadow applied to the left narrow color bars don't make sense
nav bar shadow is way too big
in general really think about how the shadows look, right now it's a nav bar then it dips down onto the first layer then it raises again per each task item and it looks really dysfunctional
do you really need the hamburger button
checkboxes are hideous
i also hate the FAB, the way google keep handles it is SO much nicer

There is nothing left to do.

Everything has already been done.

hey /wdg/ senpai, anyone else gotten into the habit of hoarding tutorials or ebooks but not actually making use of them? How do I fix this? Need to learn React and Go for a job.

i have hundreds of programming e-books that i have never read

Can someone share some examples of where Vue/Angular/React are actually used in the real world?

I don't understand when I should use it.

github.com/facebook/react/wiki/Sites-Using-React

gee, i wonder..
reacttraining.com/react-router/web/guides/basic-components

They are 2-way data binding language templates.

Whenever you have stateful things that your UI needs to know about they are good tools to use.

These frameworks seem to be very popular among people who don't understand HTML/CSS and just want to make shit more complicated to justify their own existence. Which is true - but they're also useful tools for building single page apps and anything that requires a lot of data to construct a page.

Angular is dead/dying, I'd avoid it.

Stop wasting your time, think of something you need and build it, pick something you will use everyday.

Can't do that / be bothered

> kys

You always use it.