cool, thanks!
-
Hey, guest user. Hope you're enjoying NeoGAF! Have you considered registering for an account? Come join us and add your take to the daily discourse.
Web Design and Development |OT| Pixel perfect is dead, long live responsive design
- Thread starter gutshot
- Start date
cool, thanks!
I routinely try VSC with the idea of finally replacing Atom because I totally dig how faster VSC is, but everytime I just need to go back to Atom because having projects with multiple root folders is kinda vital to me. 
(Also ESLint warnings are much more stylish on Atom, but yeah that's not really vital)
(Also ESLint warnings are much more stylish on Atom, but yeah that's not really vital)
Seems like no one is still using Sublime Text.
It's very slow on the updates -- though it got a big one some weeks ago.
I still love Sublime and have used it every day for the past 5 or so years.
I've tried VS Code a couple of times but couldn't bother getting all the shortcuts/plugins setup to somewhat match my Sublime configuration. I could see myself switching to it in the future though.
Atom is just a lost cause, it's way too slow.
It's very slow on the updates -- though it got a big one some weeks ago.
I still love Sublime and have used it every day for the past 5 or so years.
I've tried VS Code a couple of times but couldn't bother getting all the shortcuts/plugins setup to somewhat match my Sublime configuration. I could see myself switching to it in the future though.
Atom is just a lost cause, it's way too slow.
Next version of Atom will get a big startup time boost due to V8 snapshots. I think most people dropped sublime once Atom hit because it does all the same things but it's free. I wouldn't pay for something like WebStorm now either. If you are looking for a the most performant of editors keep an eye on https://github.com/google/xi-editor. It's very early days but if it matures it'll smoke anything out there.
Lister
Banned
I love mine. 1440p is what I was used to with my previous Dell 27", and the extra horizontal means I have sooo much more real estate for my IDE's.
I could never go back. 4K is good, but in order to match the horizontal screen space it would have to be TV sized.
Great for gaming too
Thanks. I'm a little concerned about how to actually use all the screen space tbh.
My code is about max 120 chars wide anyway, so I don't really need that much more for that. And splitting the screen means I have to look at the sides of this wide screen all the time.
Additionally the good ones are really expensive, I'll think about it.
Right now the Dell 24" 4k is my favorite. I'm fine with my non 4k 24"s screen real estate wise, but cant stand the fucking blurry text an anymore.
My code is about max 120 chars wide anyway, so I don't really need that much more for that. And splitting the screen means I have to look at the sides of this wide screen all the time.
Additionally the good ones are really expensive, I'll think about it.
Right now the Dell 24" 4k is my favorite. I'm fine with my non 4k 24"s screen real estate wise, but cant stand the fucking blurry text an anymore.
Syphon Filter
Member
Sketch is amazing and better than Adobe for UI/UX Design.
Any suggested reading for anything/everything ASPNet Core MVC w/ AngularJS?
Really, I'm at a loss as to why you would include AngularJS in the stack when aspnet core seems capable of handling everything. The reasons across the web seem to mostly be "JavaScript is awesome" and "Because you can". I've been doing JS for a very long time, including MEANjs, jQuery, etc.. so I'm not against JS or anything at all, I'm a huge proponent of it. But mixing languages/frameworks isn't something I'd consider lightly.
The only valid reason I've seen so far is that Razor is ugly, and Angular provides a better option for views (syntax-wise).
Really, I'm at a loss as to why you would include AngularJS in the stack when aspnet core seems capable of handling everything. The reasons across the web seem to mostly be "JavaScript is awesome" and "Because you can". I've been doing JS for a very long time, including MEANjs, jQuery, etc.. so I'm not against JS or anything at all, I'm a huge proponent of it. But mixing languages/frameworks isn't something I'd consider lightly.
The only valid reason I've seen so far is that Razor is ugly, and Angular provides a better option for views (syntax-wise).
The reason is because angular wants to use server-side rendering with angular universal. Angular take its templates and compiles them down into optimized javascript functions. If you don't do that on the server then you have to ship the angular compiler to the client which is a giant nasty blob of javascript and will easily cost you over a second of load time. So instead, you want the templates to be pre-compiled server-side via the angular compiler and you won't be using razor anymore.
Well the question really is, why not just use aspnet core mvc by itself? Answers I'm seeing are along the lines of "I like JavaScript"..
I get it, AngularJS is back-end independent and is a client-side framework. Thus, as an AngularJS developer, you seek out a back-end. NodeJS w/ Express is a valid backend, much more so because it's JavaScript on both ends. But why would a AngularJS developer choose aspnet core mvc? I could see valid answers such as- I need Windows Authentications, I have lots of Windows users and Active Directory, and I have existing SQL server DBs to use, etc.. so I need a back-end framework that is mature in the Windows world. That is implying that NodeJS modules that provide similar functionality are not as mature as their dotnet core counterparts.
The other half of the question is easier to answer. Why would a dotnet developer want to use AngularJS? "Razor sucks" is a valid answer.. so is, "there is a lot of stuff that the JS/npm/open-web offers", i.e. webpack, karma/mocha, HMR, etc..
Because they work in a Microsoft stack mostly. .NET core doesn't offer anything the average node.js dev doesn't already have, but it is a more familiar transition to devs who have worked in .NET MVC and devs/businesses that prefer to, either because of tradition or MS incentivises them to.
MS backed angular because it needs a horse in the front-end frameworks. Very few people build front-end javascript without one so they had to start setting a standard. Angular's project structure is not too different from something you'd see in .NET and typescript enhances that. But mainly it doesn't have "Can't sue Facebook agreements" that React has and vue/meteor/ember/etc are not popular. So MS strongly pushes it as a default.
I think Angular might have been an early fw that MSFT supported, likely due to the inclusion of TypeScript for ng2. But MSFT has support for ng2, react, react+redux, vue, knockout, and aurelia when it comes to using a front-end framework with aspnet core -- https://github.com/aspnet/JavaScriptServices/tree/dev/templates This is an official msft repo that maintains JavaScript frameworks + aspnet core generators.
The earliest framework I recall them backing was Knockout which never took off (It was MVVM based which MS more or less invented, and so it was a familiar paradigm to XAML devs).
They have to be open or people would drop them, only Apple devs still accept a closed stack because iOS money has a lot of sway. Satya Nadella's MS is supposed to be a big tent but that doesn't mean they don't make strategic investments and pushes, especially where they can optimize for their own services and tools. How many Angular devs are working outside of VS Code? I'd bet not a large amount because of first-class typescript support.
Royal_Phalanx
Member
Any good resources on how to link a database (in MongoDB or mySQL or something) to a simple web form and having that form submit data to the database? Want to do it as a side project to put on Github.
If you want to use MongoDB, then the MEANjs stack is a great option. Just clone their repo here https://github.com/meanjs/mean for a boilerplate example. More guides on their stack here http://meanjs.org/docs.html#overview
There is also a yo generator for this here http://meanjs.org/generator.html which can make setup easy.
Not to say that MEANjs is "simple" but getting it setup using yo, etc, is simple.
Lister
Banned
mongo db and most other document/No SQL databases usually have documentation and "getting started" tutorials on how to do just that covering various popular frameworks.
Firebase is fun, powerful and easy to use with React and Angular, for example, I would recommend looking into it.
Otherwise it'll depend on your server stack. What are you using?
Royal_Phalanx
Member
I intend on doing it locally on my PC.
Hello,
I need something easy to be made, but I'm just drawing a blank.
Basically I want a simple form where the user enters a text string and then that string is added to the domain name and voila that's the url they go to when they hit GO.
www.website.com/ [ ENTER SLUG ] [ GO BUTTON ]
I will send $30 via paypal
Edit: figured it out
I need something easy to be made, but I'm just drawing a blank.
Basically I want a simple form where the user enters a text string and then that string is added to the domain name and voila that's the url they go to when they hit GO.
www.website.com/ [ ENTER SLUG ] [ GO BUTTON ]
I will send $30 via paypal
Edit: figured it out
Code:
<script type="text/javascript">
function goToPage() {
var page = document.getElementById('page').value;
window.location = "http://tickrz.com/" + page;
}
</script>
<input type="text" id="page" />
<input type="submit" value="submit" onclick="goToPage();" />Lister
Banned
Hello,
I need something easy to be made, but I'm just drawing a blank.
Basically I want a simple form where the user enters a text string and then that string is added to the domain name and voila that's the url they go to when they hit GO.
www.website.com/ [ ENTER SLUG ] [ GO BUTTON ]
I will send $30 via paypal
Edit: figured it out
Code:<script type="text/javascript"> function goToPage() { var page = document.getElementById('page').value; window.location = "http://tickrz.com/" + page; } </script> <input type="text" id="page" /> <input type="submit" value="submit" onclick="goToPage();" />
This is a weird way to navigate.
Hello,
I need something easy to be made, but I'm just drawing a blank.
Basically I want a simple form where the user enters a text string and then that string is added to the domain name and voila that's the url they go to when they hit GO.
www.website.com/ [ ENTER SLUG ] [ GO BUTTON ]
I will send $30 via paypal
Edit: figured it out
Code:<script type="text/javascript"> function goToPage() { var page = document.getElementById('page').value; window.location = "http://tickrz.com/" + page; } </script> <input type="text" id="page" /> <input type="submit" value="submit" onclick="goToPage();" />
There's an address bar at the top of your browser that allows for the same functionality and behavior.
Daffy Duck
Member
Could someone advise on an issue I am having with a site that a friend has.
There is a a revolution slider on the site which is the latest version available and on initial load of this on one page in patricular it gives the error:
If I click through the site and navigate back to this page the slider loads OK without this error, anyone shed some light on what is going on there?
There is a a revolution slider on the site which is the latest version available and on initial load of this on one page in patricular it gives the error:
Code:
XMLHttpRequest cannot load https://www.creativedigitalcareers.co.uk/js/vendor/extensions/revolution.extension.layeranimation.min.js?version=5.4.1. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://creativedigitalcareers.co.uk' is therefore not allowed access.
XMLHttpRequest cannot load https://www.creativedigitalcareers.co.uk/js/vendor/extensions/revolution.extension.navigation.min.js?version=5.4.1. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://creativedigitalcareers.co.uk' is therefore not allowed access.
XMLHttpRequest cannot load https://www.creativedigitalcareers.co.uk/js/vendor/extensions/revolution.extension.slideanims.min.js?version=5.4.1. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://creativedigitalcareers.co.uk' is therefore not allowed access.If I click through the site and navigate back to this page the slider loads OK without this error, anyone shed some light on what is going on there?
It's a Same-origin policy error because you're requesting a resource from a subdomain.
www.example.com and example.com are treated differently.
https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
https://www.sitepoint.com/working-around-origin-policy/
www.example.com and example.com are treated differently.
https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
https://www.sitepoint.com/working-around-origin-policy/
Daffy Duck
Member
Oh lord, I see it now.
Thanks.
Thanks.
This is a weird way to navigate.
lol
It's for a stock site. Someone can just enter in a ticker symbol and it's a simple way to take the user to that stock page. For example you can enter "AAPL" and it takes you to the Apple page. The user might not know they can type website.com/stocks/aapl + it's a bit slicker. I'm sure there are much more elegant solutions but unfortunately I have no idea what I'm doing.
I love mine. 1440p is what I was used to with my previous Dell 27", and the extra horizontal means I have sooo much more real estate for my IDE's.
I could never go back. 4K is good, but in order to match the horizontal screen space it would have to be TV sized.
Great for gaming too
So, I just bought the Asus 24" 4K screen for my home office. I'm gaming there too, thats why I went with the Asus here.
In my office we will most likely get us some Dell 24" screens.
I wanted to get the real sharp "retina" effect and a 27" in scaled mode would probably cause UI lag and slowdowns on my macbook pro.
I hope I get a good one, can't wait to get rid of all the visible pixels.
Syphon Filter
Member
Ok so I am looking to get a domain and host. Some say to only get the domain and not host, anyone agree with that or what?
Depends entirely on what you're trying to do. If you're just trying to host your portfolio or frontend only website then get a domain name and use GitHub pages as the host for free.
If you need a database, periodic tasks to be run, etc then get a $5/10 Digital Ocean droplet in addition to the domain name IMO.
Syphon Filter
Member
Yea I am just trying to get my portfolio up, I am a designer mainly but it doesn't matter in this case right? What exactly is github? Should I still go that route even if I am a designer?
GitHub is a place to host code. Github Pages is a service that GitHub offers that lets you host web pages for free essentially. I don't necessarily think it's a bad route to go but there are probably much easier routes for designers that I'm not familiar with, hopefully someone else can chime in.
How did you build your site? I think the real thing to take away is that you need to buy a domain but you probably don't need to pay for hosting... there are lots of free options.
When I'm changing the stuff inside a web form (using <form>) that is javascript?
I changed a web form to calculate the value of any stock (discounted cash flow valuation model):
The 8.179 is Apple's cash flow per share, called from a data provider.
So for Apple the value is (using the following assumption for the discount rate and growth rate):
Cool!
I changed a web form to calculate the value of any stock (discounted cash flow valuation model):
Code:
<form onsubmit="return false" oninput="document.getElementById('z').innerHTML = Math.round((8.179 * Math.pow(1 + parseFloat(document.getElementById('y').value),1) / Math.pow((1 + parseFloat(document.getElementById('x').value)),1) + 8.179 * Math.pow(1 + parseFloat(document.getElementById('y').value),2) / Math.pow((1 + parseFloat(document.getElementById('x').value)),2) + 8.179 * Math.pow(1 + parseFloat(document.getElementById('y').value),3) / Math.pow((1 + parseFloat(document.getElementById('x').value)),3) + 8.179 * Math.pow(1 + parseFloat(document.getElementById('y').value),4) / Math.pow((1 + parseFloat(document.getElementById('x').value)),4) + (8.179 * Math.pow(1 + parseFloat(document.getElementById('y').value),5) / (parseFloat(document.getElementById('x').value) - parseFloat(document.getElementById('v').value)) ) / Math.pow((1 + parseFloat(document.getElementById('x').value)),5)) * 100) / 100;">
DISCOUNT RATE <input name="x" id="x" value="0.09" type="number" step="0.001" min="0">
NEAR TERM GROWTH RATE <input name="y" id="y" value="0.03" type="number" step=".005">
LONG TERM GROWTH RATE <input name="v" id="v" value="0.03" type="number" step=".005">
VALUE <output name="z" id="z" for="a b"></output>
</form>So for Apple the value is (using the following assumption for the discount rate and growth rate):
Cool!
`oninput` is a global attribute that you can use on any element. it's an event handler that is raised when something is input into it. It executes JavaScript. You could move all of that JS code into a script tag and format it so it's easier to manage and read, then execute it in the oninput event.
For example, instead of <form oninput="document.yada yada.....">
You might do,
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/oninput
Cool, I'm going to try to learn more about javascript.
DrAg0nBoY
Member
I have a question and I do hope this is the right thread.
So I am making a site in Prestashop 1.7 and I am regretting it from the start. But the big problem I have is now. I installed Akeeba Solo alongside of Prestashop right at the begining and it worked fine. But then I don't know what happened. I could make backups but when I restored the site the backup was not working properly. No matter how many times I did a backup, the end result was always the same. I was just getting the first page of the restored site, everything else was just throwing an error that the site does not exist.
So I deleted Akeeba Solo from the site just to install it again. Well here is my current problem. I can't install it. I always get the error that it can't connect to MySQL. The database informations are correct. I checked them a thousand times. I even made more databases and tried them. But it also won't work. I need to make a backup from the site so that I can restore it onto a different domain, where the site should be.
So my question would be, what can I do? Why isn't Akeeba connecting to the database (I have written to my hosting provider and they said they haven't done a thing for that not to work)? What are my other options to transfer the site, without the risk of losing everything I have now?
Thanks for the answers and help.
edit: Okay I got Akeeba somehow up and running. I tried to now do a site restore on a different domain. Now the problem I have is that it redirects me onto the previous domain name and not the new one. Any idea why this is happening?
So I am making a site in Prestashop 1.7 and I am regretting it from the start. But the big problem I have is now. I installed Akeeba Solo alongside of Prestashop right at the begining and it worked fine. But then I don't know what happened. I could make backups but when I restored the site the backup was not working properly. No matter how many times I did a backup, the end result was always the same. I was just getting the first page of the restored site, everything else was just throwing an error that the site does not exist.
So I deleted Akeeba Solo from the site just to install it again. Well here is my current problem. I can't install it. I always get the error that it can't connect to MySQL. The database informations are correct. I checked them a thousand times. I even made more databases and tried them. But it also won't work. I need to make a backup from the site so that I can restore it onto a different domain, where the site should be.
So my question would be, what can I do? Why isn't Akeeba connecting to the database (I have written to my hosting provider and they said they haven't done a thing for that not to work)? What are my other options to transfer the site, without the risk of losing everything I have now?
Thanks for the answers and help.
edit: Okay I got Akeeba somehow up and running. I tried to now do a site restore on a different domain. Now the problem I have is that it redirects me onto the previous domain name and not the new one. Any idea why this is happening?
megarockexe
Member
Does anyone have any experience designing HTML 5 animated banner ads? They seem interesting and I already have some After Effects experience and I've gathered many examples.
Hoping that with my basic HTML experience, I could get something nice done.
Hoping that with my basic HTML experience, I could get something nice done.
Lister
Banned
I don't, but am interested in the answers.
Are they mostly CSS driven now a days or canvas?
Syphon Filter
Member
Have you heard of lunar pages? I can get both a domain and host with a deal.
Very cool project by Lea Verou that lets you build web pages and simple apps with just declarative HTML, and uses free github hosting to save the edits:
https://www.smashingmagazine.com/2017/05/introducing-mavo/
https://www.smashingmagazine.com/2017/05/introducing-mavo/
I think it's much more dangerous, that no one knows how Javascript works under the hood these days.
Ask a developer who started building JS with ES6 what a prototype does... good luck fixing funny errors in classes
I forgot es6 classes don't support public fields after using transpilation so much. The worst is modules. With Common, AMD and fake ES6 modules everyone has to unlearn everything because it's all wrong.
I know many designer's put work up on Dribble and Behance, not really on GitHub as it is first and foremost a code repository.
GHG
Member
Don't get me wrong, I'm able to develop websites much quicker using it but you're literally typing 2 words and it's then writing lines and lines of code for you. The up side is the fact that I can get the basic skeleton of a whole website created in minutes, add my own classes and then get to work on the CSS/JS/PHP quicker. But on the flip side, I can imagine if you didn't have a clue about this stuff and learnt only using VS code extensions then you wouldn't have a clue what any of really meant and how it works.
I'm a believer that it's important to understand why your code is doing the things it's doing and the best way to do that is through coding from scratch, experimentation, making mistakes and generally getting your hands dirty.
So for experienced developers this is great but I can't help but feel that if I used it all the time there is the potential to become reliant on it and get a bit "rusty" so to speak. As such, I will switch it up. If I need to get something done quickly for a client then I will use VS Code and all the extensions I have installed but if it's a personal project or I'm learning a new API then back I go to trusty sublime text.
Easier ≠ Better.
Daffy Duck
Member
I can only assume Emmet, Beautifiers, Linters, HTML/CSS assists, and VScode's built in Intellisense.
megarockexe
Member
I don't, but am interested in the answers.
Are they mostly CSS driven now a days or canvas?
I took matters into my own hands and looked for an answer. Apparently Google Web Designer is a thing. Seems pretty simple. Using their templates, I figured out how a basic ad is structured. I was able to make a simple animation for an ad I designed. I haven't looked at any tutorials yet, and it's a bit of a learning curve because it's different from Adobe's products. But it's similar enough to After Effects and it seems to output submission-ready ZIPs.
It seems overall that this tool is great for quickly building out a simple ad and it gives you the control to go in there and add custom modifications through code. I haven't had much time to play with it, but it's really capable based on some of the examples I've found in the wild and on their featured samples page.
GHG
Member
Bootstrap 4 & font awesome snippets
Materialize Snippets
Intellisense for CSS
Debugger for Chrome
Sublime text keymap (because I can't let go)
I'm sure there are others I can install for JS/JQuery/PHP but I don't feel I'm comfortable enough with those languages to even think about "cheating" yet.