/wdg/ - Web Development General

>Previous thread
>Free resources to get started
Get a good understanding of HTML, CSS and JavaScript.
MDN web docs offer a good introduction (independent of your browser choice)
developer.mozilla.org/en-US/docs/Learn
freecodecamp.com/
codecademy.com/

>Further resources
developer.mozilla.org/en-US/docs/Web - General documentation for HTML, CSS & JavaScript
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:

lmgtfy.com/?q=cheap hosting that accepts paypapl
webstack.de/blog/e/cloud-hosting-provider-comparison-2017/
udemy.com/the-web-developer-bootcamp
lmgtfy.com/?s=d&q=cheap hosting that accepts paypapl
css-tricks.com/snippets/css/a-guide-to-flexbox/
babeljs.io/learn-es2015/#ecmascript-2015-features
es6-features.org
login.microsoftonline.com/common/discovery/v2.0/keys
auth0.com/blog/navigating-rs256-and-jwks/
twitter.com/SFWRedditGifs

first for best web dev lang

please help, how can i refactor this
getTime(curTime, showTime){
let difference = showTime - curTime;
const d = ~~(difference / day);
difference -= d * day;
const h = ~~((difference / hour) % 24);
difference -= h * hour;
const m = ~~((difference / minute) % 60);
difference -= m * minute;
const s = ~~((difference / 1000) % 60)

return(
{`${s < 0 ? '-' : ''}${Math.abs(d)}d ${Math.abs(h)}h ${Math.abs(m)}m ${Math.abs(s)}s`}
)
}

where can I get a cheap hosting that accepts paypapl (no credit card)

for one, the function has 2 (or even 3) responsibilities (calculating the duration, formatting the duration as a string, and outputting html) so it should be split accordingly

lmgtfy.com/?q=cheap hosting that accepts paypapl

has anyone on /g actually made any full fledged websites? if so pls share.

>trusting goolag searches
oy vey goyim

wpfastest.com

//notAshill

>wordpress optimised

no, I need full root access though. fuck this shared shit...

i have an amazing idea

javascript but it's as fast as c

who wants to join my startup to make this reality?

I'm having this problem that drives me mad:

My components aren't responding to my change in store !


// imported stuff here
const App = ()=>(








)


App.propTypes = {
books: PropTypes.array.isRequired,
actions: PropTypes.object.isRequired
}


const mapStateToProps = state => ({
books:state.books
})

const mapDispatchToProps = dispatch => ({
addBook: (book)=>dispatch({type:'ADD_BOOK', book})
})

export default connect(mapStateToProps, mapDispatchToProps)(App);

I subscribe - and I see the store change! But the components do not respond to that change!

digitalocean and vultr both let you transfer funds with paypal

Disregard the "." at AddBook.


Also here is my index.js:

import engine from './reducers'

import App from './App'

let store = createStore(engine)

store.subscribe(()=>{console.log(store.getState())})

ReactDOM.render(


, document.getElementById('root'));

I see vividly that this changes the store, but the components aren't responding to that change; BookDisplay remains the same!

was for
isn't that what webassembly does?

you don't really need to be "as fast as C" in places where JS is used. V8 is already fast. also wasm exists
also this is not a startup yet. you need a business model

>show me your javascript alternatives
>user shows alternative
>it compiles to javascript

digital ocean is too expensive though.. those fucks want $10 per month, fuck them.

vultr sounds good though. I'll go wit them probably. anyone have experience with their hosting?

try grabbing books in your function declaration

like
const App = ({ books }) => {...


or in your jsx

also
const mapStateToProps = ({ books}) => {
return { books };
}

>$10
you can't do with the $5 one?
the human brain can't sense more than 512mb ram on a server anyways

unless you need to run the CLR or the JVM :^)

yeah well, then vultr or scaleway if you are in europe and want it cheaper, but still with a legit host.
I used them for a bit and can't complain. Pretty standard host on nearly the same level as DO but with some fewer extra features here and there, if you would directly compare it to the DO product section.

generally overall DO has the best features set imo
Vultr has nearly the same, but better price/performance
Scaleway has the best performance/$, especially their ARM cloud servers, which were surprisingly even quite a bit faster, than the x86-64 ones they offer at the same price, but they lack in all other features like locations, backups and such things. (Their BareMetal ones on the other hand didn't bench nearly as good, when I last tried it)

linked this one last thread, which gives a rough but good overview regarding the hardware
webstack.de/blog/e/cloud-hosting-provider-comparison-2017/

That's not how the industry works..

Story time:
>smart guy develops amazing webserver in C
>nobody gives a damn
>same guy decides to rewrite parts in JavaScript
>everyone freaks out
>new industry standard

Of course it's the story of Node.


Nice one.
Have fun seeing your server going down with Fail2Ban and some workers at the same time. Oh what, you want to scale an Avatar picture in the background? Sorry, this site is temporarily not available, please try again later..

what the fuck are you using to scale your avatar pictures, a headless electron app running inside a vagrant container?

Anyone here use wordpress?
Is it worth paying for? What kind of CSS/JS options do you get?

I'd use my own domain but I fucking despise front-end web development and wordpress handles almost all the HTML/CSS. It's just the fancy stuff I want to do.

Asked this in /sqt/ but I guess I should try here too.
Building a personal project that has a web front-end as the UI. Intending to implement the backend in Ruby but not sure on which framework to use, I've heard bad things about Rails but I have a little experience with it. Any opinions?

So basically asm.js? It's a subset of JavaScript (i.e. you only use some of the JavaScript's features), and certain browser engines are able to run it much faster due to assumptions they can make about what the code is and isn't doing.

Of course you don't actually write the JavaScript; you compile it from C using Emscripten. And the only real reason that it's JavaScript and not some new language is so that it can run in any browser, including old ones that don't support asm.js speedups.

>isn't that what webassembly does?
WebAssembly is a similar project except instead of compiling to JavaScript, it compiles to a new bytecode that newer browsers are able to run.

The advantage of WebAssembly is that the bytecode format is faster to run/process than asm.js and I think smaller. The advantage of asm.js/Emscripten is that it's backwards compatible with any browser that supports JavaScript (albeit without the performance speedup in the older browsers).

crawling html is actually a lot of work btw

>refactor
what does "refactor" means?

Wordpress is a free and open-source web framework that enables people to create a website easily using a variety of different themes, many of which are freely available.

These themes are built with HTML/PHP, CSS, and (sometimes) JS, and basically let you display your custom content in a somewhat customized layout.

WordPress.com is a commercial hosting service run by the same company that primarily develops the free WordPress software. They provide hosting and other services, similar to many other hosts who specialize in WordPress sites.

If you want to build a site using the WordPress framework, you can use basically any host; you're not restricted to using WordPress.com.

WordPress.com lets you host for free using a WordPress.com subdomain, e.g. "mywebsite.wordpress.com". Some other sites offer similar deals. But most of them you'll have to pay for if you want to use your own domain, e.g. "mywebsite.com".

I'd recommend looking at different hosting providers that specialize in WordPress hosting, and see which offers the best deal. If you're hosting a small site, then a host with a "shared" plan is probably fine.

Anyway, what do you mean by "fancy stuff"?

it means rewriting a piece of code without changing functionality. the intend may be generalization, improved readability, increased performance, less lines, getting rid of repetition.. etc

>tfw still living in the userscript world
My fascination with Sup Forums X when it came out along the other userscripts is what lead me to teach myself about JS, what led you guys to do so?

>webstack.de/blog/e/cloud-hosting-provider-comparison-2017/
thx bro, your link should be in the OP

what you think about EC2?

I figured I might as well repost this question here since this is /wdg/.

I've gotten fairly comfortable with HTML, CSS, JS, and PHP, but only to the extent where I can make decently functioning websites; I don't know deeper CSS, JS, or PHP, but I can survive. Something that's been on my mind is the fact that whenever I make a consistent layout for a website, and I need to make a change to it, I need to manually update the HTML code in all of the other websites using the same layout. This is really bad since the more .html files I have, the more time I have to spend editing them. I've written a program in Java to generate HTML files for me given a template and a structured collection of parameters in a text file, but I can't help but feel that there is a better and conventional way to do this. When I asked this somewhere else, I was told to use a CMS, but when I did research on CMS, it seemed more for designers and not developers, and even found articles warning against using a CMS.

So, I'm wondering; how do websites consistently update an "HTML template"? What should I learn? Am I going to have to write custom scripts for all of my webpages? Also, if my question reflects on some critical lack of knowledge, what should I read to learn more about modern web development? Thanks

sry, have no experience with AWS.
Their massive catalog of products always seemed quite daunting and too much of a hurdle to get into, but I also never had the need to deploy on a massive scale, what you probably use such a service rather for. But again, talking with no experience here, since nothing I ever did expanded beyond the capacity of single vps instances.

So you are re-using the same HTML layout for different websites?
Don't think there is an easy way if you are mixing your HTML template with the content "hard inserted" right into it. That pretty much makes it not a template anymore.
Normally CMS would be good if some non-dev needs to edit the content, but what else would you do in your case?
You can fit your template to some CMS you freely choose and then you can change the layout, without breaking anything, since the content is inserted by the cms.
If I understand your correctly.

depends on your needs. you can use a static page generator -- a custom made one (basically what you already described you're doing with Java) or already existing third-party one (for example Jekyl), if any of those fits your needs.
you can also do the rendering server-side (with PHP, Java or whatever) on every request and use some templating engine there (Smarty for PHP, Thymeleaf for Java, etc.)
or you can do it client-side with JavaScript. this is called a Single Page Application. for templating, you would typically use a templating engine (like Handlebars) or a view-layer framework like React
anyway, it's a strange question to be asking if you really know some PHP, because I image you would know that you can do very basic templating with PHP by just having your basic template in one file, and using include() to populate it with content depending on requested subpage.
or maybe I completely misunderstood your question, I'm not sure

Not quite, different layouts for different websites, but the same layout for the same page if that makes any sense; for example, if you browse an online blog, you'll find multiple pages that have different content, but the same layout. Or any website really, eBay, Amazon, So would the solution be to learn some sort of CMS? Is this the best way?

Hmmm, that's interesting. I'm guessing that the server-side rendering would be done with more flexible requests where it's not efficient to have all of the pages preloaded, like eBay searches, right? I can guess what a Single Page Application is; I've seen some webapps where the overall site itself stays, but the HTML is edited/injected depending on input, right?

I'll be honest, I actually do not know very much out of PHP outside of using it to run MySQL queries. I'm comfortable in PHP in the sense that I can guess most of the syntax and read the documentation to figure out how to do something, but I really do not know it from a deeper level. Perhaps I need to do more reading in the right places, I'm just not quite sure where to look. Your reply gave me a lot of new places to look, though, thanks! If you happen to know any relevant books/topics I could explore, I'd be more than grateful.

udemy.com/the-web-developer-bootcamp

if you google, you can find coupons to get this for $10

have fun

Is ok to just use bootstrap for designs and layouts if I'm mostly just interested in backend webdev or is there a reason to move past bootstrap and actually make my own stuff with css?

lmgtfy.com/?s=d&q=cheap hosting that accepts paypapl
better?

bootstrap is bloated and unnecessary now that flex exists.

this ?
css-tricks.com/snippets/css/a-guide-to-flexbox/

yes

For mockups it is fine to use a CSS Framework. Even popular admin templates (jQuery or MVC ones) are based on Bootstrap.

yes. i don't know if bootstrap 4 is based on flexbox but it doesn't matter, we also have the grid system in vanilla css that pretty much makes bootstrap's 12-column grid system obsolete. just needs a bit more browser support.

What about stuff like formatting buttons? How hard is it to create stuff like that without bootstrap's classes?

really easy, takes a second

How many different UI elements do you plan to add to the website?

>sry, have no experience with AWS.
I'm using their EC2 instance for a client right now (he pays for it).

They are pretty cheap, but they rrequire credit card sadly.

>code works perfectly in your machine
>passes all the tests
>works wonderfully in the test server
>it fucking doesn't in the production server
>3 hours have passed with the site down and my boss is visibly angry

well, some extensions use different defaults when ENV is set to production

also, minification could fuck up the frontend code

>Not using docker

Looks like I'm going to have. I didn't know uwsgi didn't work with python3. It's 2017 fucking seriously.

>if you browse an online blog, you'll find multiple pages that have different content, but the same layout.
In that case there should be only a single site/page with that layout, that then gets filled with the content depending on what the user is requesting. (whether it's populated from JSON in a single-page-app with react/vue or something rendered server-side with some template engine)
Even when you use a static-site-generator and your output are multiple files with the same structure, they still should take one single template-file as their source.
You should never have to manually edit multiple different files with the exact same HTML structure really.

I really really want to get back into (vanilla) Javascript
Where2begin? I did the codecademy courses a few years back but things have apparently evolved a lot since, ES6 and all.

1) How do I ensure I don't fill my mind with obsolete bullshit?
2) Best resources to learn? Writing code is the best way to learn sure but wes bos keeps shilling the wonders of ES6 and I'm somewhat intrigued

babeljs.io/learn-es2015/#ecmascript-2015-features
es6-features.org
Shouldn't take too long to get the gist of ES6.
There is no need to learn everything in that list immediately, but it's sure good to look at let/const, arrow functions, template literals and promises (and async/await)

Hi guys/gurls,
I need to make a basic website using html/css/javascript. I am new to this and finished html/css/js courses. But think its handy to have a template to start/ Like a basic website i can modify.

Could any1 help? I struggle to begin with it.

Any1 please? Deadline is creeping up :(

>Hi guys/gurls,
>I need to make a basic website using html/css/javascript. I am new to this and finished html/css/js courses. But think its handy to have a template to start/ Like a basic website i can modify.
>Could any1 help? I struggle to begin with it.
Bulma.io + google Bulma templates.

How do I replace jQuery .on() with pure JS addEventListener? For example, I need to add event to a div container and listen if mouse enters in the child div of that container, i.e. in jQuery:

$('.container').on('mouseenter', 'div', callbackFunction)

How would I translate this into pure JS?

Given that webhosting costs around $10/month, and a raspberry pi goes for $30, how bad of an idea is it to use a rasp pi as my home server? Of course, not for any traffic-intensive sites, but just for the shit I have on my portfolio that I want to finally put up as live sites.

Any tips/ideas?

mdn addeventlistener
more like 5$
depends on how important connection quality and importance of other ease of use features is.
Someone looking up your portfolio surely won't have fun, if it's at a time when you are blasting away on your home connection.

then maybe ask for a cheap vps and not cheap hosting you fucking retard

I have mental health appointment today, what should I talk about with my counselor?

Html5
Section/Article or Divs?

Which, why? Whats the point?

do you want to get the time difference then use moment js

var a = moment([2007, 0, 29]);
var b = moment([2007, 0, 28]);
a.diff(b, 'days') // 1

//To get the difference in milliseconds
var a = moment([2007, 0, 29]);
var b = moment([2007, 0, 28]);
a.diff(b) // 86400000

Followup:
Can you give article ids?
Can I style with css using articles?

It's purely semantic. It doesn't matter at all.

You can do whatever you want, yes.

I have a question about promise behaviour in JavaScript.

// axios is an HTTP request library, which returns a promise when calling some API
import axios from 'axios';

function apiRequester() {
return axios.get(someApiUrl).then(results => return results).catch(err => throw err);
}


If I call apiRequester, what is returned? A promise, or the results/err of the API call?

Hey /wdg/, what laptops do you use?

I'm thinking of buying something new but can't decide on specs. How much RAM do I really need to compile a Java server? Do I really need a quad core for running PostgreSQL locally? What do you recommend?

why not try it and see what happens. Wouldn't that be the faster option instead of waiting for someone to explain things?

I’m hipster scum so I actually use a MacBook Pro.

>want to learn Django
>Too brainlet for OOP

Just end my life

start with java. it's the best language to learn that concept.

you should go to /adv/ ?
but if it is serious go to a phyc and get meds plz senpai.

Any auth0 expert here?
why is it more secure to renew short-lived tokens with repeated silent authentication instead of just having a token with a longer or infinite expire time?

To hijack someones login with a long-lived access_token you would need that token, but from what I understand so far, to hijack silent authentication you would just need the auth0 cookie instead? Kind of confused by that.

What specs and year?

It seems easy to spoof JWTs.

Why are they signed with the public key?

I could grab the nonce off an implicit flow, make my own request, decode the request, change the json, encode and resign with the key.

Im supposed to be making a single signon through jwt and I can login as anyone.

Also I can't verify an id_token, only an auth code which is a different request and doesn't give me what I need. So...why, Microsoft, are you not giving me an endpoint to verify the session?

whoever was asking about cheap hostibg, woot hosting just put up a deal on lowendbox.com
for some really cheap vps with decent specs, like less than 20$ a year

you need the private key

>Why are they signed with the public key?
where?
isn't the token signed with a private secret and then just verified via the public key?

validation is the worst btw

What is an easy way to host a web service on a raspberry pi? The Pi would take data from sensors via an Arduino.
I don't know how to push the data incoming from the Arduino to the web service.

I have done some simple web services using WCF (.NET Fag here) but i dont know where to begin in a linux environment.

your backend of choice and post the data to a rest api on the pi

just use a module or library for that. it's not recommended to implement validation (except for very basic ones) or encryption/hashing from scratch by yourself.

Help, I'm brainlet. I've tried replacing this:
with this:
container.addEventListener('mouseenter', function(event) {
let hoveredElement = event.target;
console.log(hoveredElement);
if (hoveredElement.tagName === 'div') {
myFunction(hoveredElement);
}
});


But event.target, targets the container div, instead of the child div. How do I target specific child? Because container contains lots of other div's withing itself.

lucky you, i did this a couple days ago

event.currentTarget instead of event.target is what you want

I've been thinking - is there any kind of listing of commonly used web libraries which are GPL licensed, and likely being breached all over the internet?

Ok, how do I verify a signature with this?
login.microsoftonline.com/common/discovery/v2.0/keys

I can match the key id or 'kid' but what's this 5xt 5xc stuff? What do I use to generate the sig to compare?

I must be doing something wrong. It still applies myFunction to the container div, instead of child div.

People said it was easy to replace jQuery with pure JS ;_;

Why would you ever want to do that?
SPA Frameworks > jQuery > Vanilla JS

fuck is this for

Everybody on the internet say that jQuery is dead and pure JS is enough. I don't understand why so much hate about the library.

JWTs.

If you want to manually mutate DOM you probably should use jQuery.
The other way (and probably what you should be learning) is not touching the DOM at all and just going with a single page app.

post jsfiddle
JSON Web Key Set
auth0.com/blog/navigating-rs256-and-jwks/

Will php 7 give PHP its former glory it deserves ?

Probbaly noob questions, but if any1 is bored enought to help. I searched a bit but cant make it work yet.

As a example of my javascript"skills" i made a button to print the time. But when I refresh the time keeps going. How can I stop it so it only start when I press the button and ends on exit/refresh?

function printTime() {
var d = new Date();
var hours = d.getHours();
var mins = d.getMinutes();
var secs = d.getSeconds();
document.getElementById("demo").innerHTML = hours+":"+mins+":"+secs;
}
setInterval(printTime, 1000);


Is webdev or coding allot of copy pasting? I hardly coded anything yett just look up and modify.

That's how events work user, look up for event bubbling and capturing if you want the proper behavior.