/wdg/ - Web Development General

Is the rendered body inside another element
Do both pages have the vertical scrollbar present

I have a background in HTML/CSS/base JS development and have begun updating my knowledge about the newer technologies/frameworks in play but I've been confused about something.

It seems that unless one is building a static webpage that the start point shouldn't be an index.html file but an index.js file that simply loads templates? Does that mean that in deployment I just upload my files and run "node _whatever_.js" instead of creating an index.html?

Attached: 1490053144034.jpg (1000x650, 114K)

just inspect the source on both pages side by side
or use a difference checker

can blind people code? using braille system? ever heard of such a thing?

They use text2speech software. It's dope. vincit.fi/en/blog/software-development-450-words-per-minute/
Link related. Didn't pastebin because there's audio.

1st, get Normalize.css and place it before any stylesheet because good practices. Second, use your inspector to see if theres a wrapping element on that page thats causing thepadding to change, or see if your css is nested in such a way that your padding changes on the new page.

It depends.

as far as i can tell everything is the same EXCEPT that thing.

then i deleted all the body content.

keeping just the navbar and footer.

now even though no difference in the code. the web page is showing words in the navbar moving between the 2 files. (but the image is now in the same place on both).

will check out normalize.css
thanks guys!

Attached: samesame.png (410x724, 12K)

Are developers using a pattern wherein they have static HTML linked with normal JS and also run a node application, letting them exchange messages? Sorry, I'm unsure of the general project structure/execution at the moment as there are many new technologies that all appear to be variations on a theme. For example, I've read a lot of articles about webpack/gulp/grunt but it's difficult to see what services these tools provide when npm scripts is quite robust if used correctly?

Attached: 1490041004410.jpg (1024x769, 181K)

diffchecker.com/diff

>Using a node package to fix a trivial stylesheet problem
Mfw. It's also good practice to avoid loading your projects with unnecessary dependencies to fix trivial CSS issues.
Once you inevitably get into frameworks, 3rd party CSS tools will be completely useless as you'll have complete control over a stylesheet's scope.

Post your current tech stack. I'm assuming you're trying to use Express.
You still need an index.html. That's where your main javascript code will be tied to.

Attached: unamused.jpg (460x344, 106K)

woah!!!

Posted this in the last thread but anyway.

I'm trying to make a responsive CSS Grid in a page on wordpress. But no matter what I try I can't get it to go responsive on mobiles.

Send help.

.grid-container {
display:grid;
grid-gap: 1px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 200px 200px 200px;

}

.one {
grid-column: 1/ 4;
grid-row: 1/ 1;
background-image: url("onajourney.xyz/wp-content/uploads/2018/08/download-3.jpg");

}
.two {
grid-column: 1/ 3;
grid-row: 2;
background-color: #ffcc00;
}
.three {
grid-column: 2/ 4;
grid-row: 2;
background-color: #ffcc00;
}

.four {
grid-column: 1/ 4;
grid-row: 3;
background-color: #ffcc00;
}

@media screen and (max-width: 500px) {
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 30vh 30vh 30vh;
}
}

one>
two
three
four

What responsiveness do you want ? Tried the code and it fits to the page and stays in place, adjusting size to the viewport with no problem.

The grids and the background picture are not maintaining their size when viewd on mobile. I want it to look the same as it does on mobile as it does on desktop.

I'm still not sure I get your problem.
Here's a capture made on my desktop and another on my phone. The grid looks pretty much the same, at least in terms of layout. Of course their dimensions change to adjust to 100% viewport which is the whole point of the grid system originally.
For the image thing do you mean that you want it to view if fully on any device? look up the css rule w3schools.com/css/css3_object-fit.asp

Attached: Screenshot_2018-08-21 Screenshot.jpg (1478x656, 185K)

>do you mean that you want it to view if fully on any device?
Yes this is what it looks like on my Note 8.

I will try out the object-fit.

Attached: Screenshot_20180821-093927_Chrome.jpg (1440x2960, 608K)

Glad you got some help. Be aware that wordpress is supposed to give you tools to avoid this kind of coding, that's the whole point of this bloatware framework.
If you're going to do html and css manually, go for a more in depth front end framework like bootstrap or whatever.
If you want to stick with wordpress the easiest course would be to copy paste (ie steal) code from the wp themes out there.

How do I add a button/link to a webpage using userscript?
Basically a certain streaming website offer it's content that's in HD behind a pay wall, however the HD content is still available in the page source.
How do I make a button/link that direct to this, instead of going through the page source?

Attached: 1519196001505.jpg (714x1000, 198K)

This.
I first learned Ruby on Rails which is about as anti JS as possible.

Now that I had to learn JS and Node I realized it's fucking beautiful.

YOU LIED TO ME /WDG/, HOW COULD YOU ..!?!?

r8 my algorithm
let goingToCrashIntoEachOther = true;
const dont = () => {
goingToCrashIntoEachOther = false;
}

if (goingToCrashIntoEachOther) {
dont();
}

I copy pasted your 1st line, searched it, and got what seems to be a legit answer on stackoverflow.
Did you try that first or nah?

>Now that I had to learn JS and Node I realized it's fucking beautiful.
It's because you come from RoR
THe JS language is alright given it's an high level language and popular. But its webdev ecosystem is a fucking mess.
The creator of d3js posted some dependency mapping of the most popular libraries like webpack and such on twitter and it's awful.
This is the webpack dependency chart.

Attached: Dkv2JFaUwAA6BCY.jpg large.jpg (1928x1927, 448K)

Also this kind of nonsense
Fuck the js ecosystem

Attached: DkwDKUHUYAABtto.png large.png (1928x99, 33K)

im new to the new ecosystem of web tech, i'm an old dinosaur with php/mysql

i need to make a small simple system with a login page and user registration etc, so according to what i think this is what it is:

client: html+css+angular (client side js?)
server: nodejs (the actual application server, replacing httpd or apache?), express (actually running plain java, replacing php?)
model: mongo (no tables, only schemas/description?)

did i get this right?

>tfw you finally get your gatsby static blog up and running with netlify cms + gitlab CI deploy for medium cross-posting

There's actually nothing wrong with this.
Like I get you brainlets demand everything be a very monolithic "one way only", but there's absolutely nothing wrong with dependencies and working as a collaborative community.

and still no one will read your blog

you just did

no i didn't.

post the URL

postgres and express

>not using mdx
behind the curve!

>you can only do things if it's popular
absolute yikes my dude

Who said monolithic is good? Not me.
You can't deny the JS universe is full of barely maintained librairies taht half ass the work. It's a mess. The two most popular JS frameworks are bloatwares incarnate.
Angular out of the box unwraps more than 1500 js libraries just to display a fucking hello world for fuck's sake.

fix it?

that's what I thought...

Attached: 1519309361274.jpg (519x533, 94K)

>Who said monolithic is good? Not me.
This is exactly what the dependency argument boils down to.
Whoa.. it's almost as if... angular is built for more than just displaying Hello World! Who knew!?!?

Seriously, where do you brainlets come from? You bitch about shit you simply do not understand and instead of actually spending more time learning about it, you waste time bitching. It's sad and fickle.

>teacher is forcing me to use visual studio code
BUT I WANTED TO USE MY SUBLIME TEXT NOOOOOOOOOOOOOOOOOOOOOOOOOOOO

Attached: 15.jpg (700x700, 68K)

The most popular JS stack is MERN (model : MongoDB, middleware : Expressjs, frontend : React, server : Nodejs). If you want a simple system this might be overkill.
Angular is a mess IMHO.
You could try django for a small project cause it has registration and most security measures out of the box.
You can stick to php + mysql if you're aware of the security caveats.

wow nice emotional strength there bro

>visual studio code
what?

>This is exactly what the dependency argument boils down to.
Your need to go full damage control when your favorite language/framework is criticized shows that you lack maturity and should settle down a little. How about you accept the actual state of the webdev javascript ecosystem? It's an actual mess, full of shit libraries. That doesn't invalidate your degree or your nice work, you're just paddling in a see of piss and somehow feel the need to defend it, why?

I did, but it didn't work.
It created the button but how do I make it lead to the URL that I want?
Is it possible to make it look for a URL with certain format?

Does it matter that much whether I use Ubuntu or openSUSE for webdev stuff?

stackoverflow.com/questions/5025941/is-there-a-way-to-get-a-button-element-to-link-to-a-location-without-wrapping
First result with "javascript button to url"
Is this relevant? Can't be too specific with your info.

You can use pretty much any OS desu. It's mostly just elitism and ease of use that make people prefer a certain OS.

is this bait? why do you need a function for this?

Is this the tech support forum for Java?
For some reason using
String name = in.nextLine()
is just skipping taking input entirely, what gives?

post your entire program you fucking idiot

Still doesn't work.
This is the part that I want to make a button for, i want the button to lead to the URL in subStation

The fuck?
Did Jow Forums just filtered my post?
hastebin.com/ukaxunubag.xml

Is it possible to nest one Express app within another unrelated Express app? So I use Express for my portfolio site in order to make some aspects of managing it easier and I'd like to upload another app which will be at anonanonson.com/portfolio/anotherapp. If I place all the second app's files within the portfolio folder in the public directory of the base, can I run the Node script in pm2 without it interfering with the first Express app's script and will it also be accessible at /portfolio/anotherapp?

Install gentoo

Reposted from /dpt/

How would one make an interactive webpage without Javascript?

I hear all these stories about websites being made with Lisp, but how is that actually done? Do they compile the Lisp into JS and then run it?

Related question: If I want to make a fast, light website, should I be using frameworks? I've used Angular, and know it's bloated as all hell, but is it true for other frameworks?

browsers aren't packaged with Lisp interpreters, you will need to compile to JS or use a Lisp runtime written in JS

don't use a framework if you want your website to be light

your teacher is a bro

ClojureScript lets you compile Clojure to JS so that you can use it on website frontends. I'm not sure how using DOM APIs (for manipulating web page content) work when you're writing the Clojure code, but I'm sure they've thought through all that. I'm less sure about using ClojureScript in conjunction with a framework, but that could probably be done, at least in part.

>I hear all these stories about websites being made with Lisp
Where are you hearing those? And are they definitely talking about the frontend replacement for JavaScript as opposed to using Lisp as a backend language, like with Caveman2 or something?

>If I want to make a fast, light website, should I be using frameworks?
It really depends on how much interaction you need, and how big the project is going to get. Starting off with a framework will end up making your project more organized. The overhead on performance will probably be negligible, assuming you use the framework correctly. The main thing I would worry about is the actual learning process, since learning how to use the framework correctly and fully can be difficult.

If the project isn't too big, and you don't abuse the DOM API (like I know I have in the past) you can make a perfectly maintainable frontend web app without using a framework. Also if it's not too big, you can integrate a framework later without too much effort.

>fast, light website
need more info like always
Do you want member management, real programs running in the background or just an one pager to show some static content?

>without Javascript

stopped reading

Why not the FOSS DotNetCore/AspNetCore?

there is a website somene here posted that is pretty much a compilation of css hacks to make html interactive in like 10 specific cases/methods, google that shit, something like "you might not need javascript"

>reading

stopped reading there.

1) send a string of html directly from your backend to your client, not sure how you'd make anything but static websites

2) use webassembly to render something in webgl. this would be way more powerful than html+js but a lot more work

to my knowledge, you can't really make dynamic websites without js. when you read that something was made in lisp they're probably talking about backend.

aved

>How would one make an interactive webpage without Javascript?

Attached: 31d3a07956140d02eea01a30bdd9f465.jpg (550x740, 59K)

Hi /wdg/, I've been programming in Python (Flask, some Django) for a while, and while it's quite enjoyable for small programs, the lack of static typing is getting on my nerves. Without it I can't just refactor easily without having to double-check everything, and auto-completion in VSCode only works reliably if I plaster type hints everywhere.
Of course, for external libraries that make liberal use of **kwargs fuckery, the only way to know how to use them is to study (and then remember, or take notes) the source code directly.
Do any of you have experience with JVM based frameworks like Vert.x, Spark or Spring Boot? Do you recommend any of them? I want to use Kotlin if that makes any difference.

Attached: 1529381023816.png (615x597, 301K)

How bad it is to have a fetch request inside a .then of a fetch request

I only want to do something once the first request finishes, so it makes the most sense to do it that way

How does my landing page look for a project I'm building?

All honest feedback is appreciated.

Fuck forgot pic

Attached: homepage.png (1919x1013, 1.42M)

incoherent and disjointed
visual hierarchy is fucked up and is where you should get started on fixing shit

Itjobswatch.co.uk says for webdev in London, AngularJS appears in about 43% of listings where as React is 18%. Is it likely that this is both angular and AngularJS listings combined, and is it still worth me learning react with the goal being looking for work eventually.

Google and Facebook buttons on the sign-up panel may be redundant. Just create the user profile in the login flow if it doesn't already exist for social logins.
About that accent you have on top of the panels: maybe they would look better without a shadow of their own? Remember that shadows give an illusion of 3-dimensional hierarchy, and I would think that the accent is PART of the panel, not something floating on TOP of it.
There's no reason for which you should need a scrollbar in the login/sign-up page. Maybe that won't be a problem after removing the social login buttons from the sign-up panel.
Nitpick: unless you need to distinguish between components of a name for legal reasons, maybe you could get away with just "name"? There are countries where you have two last names, and other countries where names may have a even more complicated structure.
And this isn't a critique, but an observation: the whole color palette reminds me of Pluralsight.

Attached: 1526492003207.png (824x720, 435K)

i'm storing a lot of stuff via chrome.storage.local with the unlimited storage limit permission. is this okay? should i be going about this differently? is there a library to make managing this easier?

Thanks user, don't know why I didn't just put them on the login.

Hi, can you please help me with this function? I am not getting anywhere and I have wasted the last 6 hours.
What exactly does this line do there (result[value] || (result[value] = [])).push(key);
?
How can result be an empty object and then become not empty anymore. I don't understand this line at all. Thanks!

const _ = require('lodash');

console.log(
_.reduce(
{a: 1, b: 2, c: 1},
function(result, value, key) {
(result[value] || (result[value] = [])).push(key);
return result;
},
{}
)
);

// { '1': [ 'a', 'c' ], '2': [ 'b' ] }

Why the fuck nobody wants to be a php or node developer anymore?
Why do young people want to become go or dotnet developers?

From a glance I can see the code between the brackets is written to work like a conditional, where it is saying "the value in 'result' which matches the parameter 'value', or a new empty array assigned to the value in 'result' which matches the parameter 'value'".

And then dot push 'key' into that.

How does this look now with the oauth removed from the signup, and logo gone?

Attached: homepage2.png (1917x1016, 1.45M)

My question is why do young people want to work for other people so bad. All this talk about interview questions and learning the right stuff for the privilege of being hired by somebody else. You young people are millennials, don't work for a manager and fall into that trap. Work for yourselves dammit, show some of that individualism and spirit Disney movies hammered into you when you were all kids.

i'm more for simple designs

Attached: 22.png (1145x489, 30K)

Yeah you are right. Look here is more or less the 'inside' of the reduce function, which I actually do understand. But my previous example is still no comprehensible for me.
You can display the 'reduce' function like this:
function reduce(array, combine, start) {
let current = start;
for (let element of array) {
current = combine(current, element);
}
return current;
}

console.log(reduce([1, 2, 3, 4], (a, b) => a + b, 0));
// 10

(result[value] || (result[value] = [])).push(key); is equivalent to
if(result[value])
result[value].push(key);
else
{
result[value] = [];
result[value].push(key);
}

>My question is why do young people want to work for other people so bad.

because 95% of the time they don't have another choice

I need help explaining the difference between HTML/CSS and JavaScript to a normal person. LIke how the markup languages can be difficult in their own way and how the problems web developers encounter with them aren't the same kind of problems you encounter with JS and regular programming. How do you explain that JS and programming is tough with constant problem-solving while HTML/CSS are tough with "how do I make this element look like how I want to", which is a different kind of problem-solving that is kind of tough but not the same? Looking for comparisons really, like when people say Java is to JavaScript like car is to carpet

When people talk about Silicon Valley though, that's what gets me all pissed off for them. I can let working for a small company fly, since you would still be a relatively major figure and the boss will actually know you exist. But those bitches who try their absolute hardest to suck Zuckerberg's dick and land their dream job at Facebook are the kind of people I loathe. Acting like complete bitches willfully. May as well just take a whip to their beloved interview so they can be punished harder.

Thx, that helps a little bit but I guess the main issue I have is the 'relation' of result[value].
I can understand all examples of 'reduce' with arrays, but as soon as objects get involved I am lost.

>all site point material for $9
>desperate

Fullstack demand.

This is the kind of shit you hear from people who have been in the industry for 10+ years and never had to deal with fickle cost-of-living, college debt, or inproportional exceptions of experience coupled with a Bachelor's degree. It's so easy to freelance when you're paying minimal mortgage on a home you bought in the 80s for bird seed and wax your desires to live vicariously through younger people.

Exactly. Most entry-level dev jobs at corporations are stepping stones before you catch that "want to be free" bug and do a startup for kicks.

So I am currently working on my portfolio site so I can hopefully get an internship and something I would like to learn to do is to make it so that when someone clicks on an image it is brought up larger with out fucking up the whole layout.

Any Ideas as to how I should go about doing this? I am using PHP for most of my actions and such. I guess the easy way would be to simply just enlarge it but I would rather do something cleaner and more professional than that but can't think of any ideas to approach the situation.

Any advice or tips would be appreciated.

don't know lodash, and havent used .reduce in as long as i can remember. try jewgle

Attached: 1531655503023.jpg (749x749, 35K)

Let's be real, Sublime Text has fallen way behind the plugin train. It's still great if you just want a raw editor, but if you really want to be productive it's far better to roll with VS Code comparatively.

Sublime is comfy af tho.

visual hierarchy is still fucked user
only ever display one form at a time
the entire right side is just wasted space
get rid of the quote and just use the form centered

php is tainted due to wordpress
people still want node
young people want a variety of tools and languages, go and dotnet included

it's almost as if you need proper experience to know how to fully run shit efficiently so you don't become yet another dead biz statistic

I like it, but toss having both Sign Up and Login displayed at the same time. Too much visual clutter. Perhaps put a tab above the gradient line allowing users to switch between the two while keeping the login container the same size.

Also, change up your color focus. When you see that page, your eyes go right to the right side where the majority of the color is. Make the typewriter background white, and have the login screen be the purple so user's eyes are drawn to it first.