-
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
The switch in popularity from Angular to React this year was amazing to see. I wonder if something similar will happen the next year.
Huh, I just noticed that. I figured that it'd be seeing a lot of use with all those frameworks popping up.
Edit: Shouldn't it be possible to implement something similar with proxy?
Huh, I just noticed that. I figured that it'd be seeing a lot of use with all those frameworks popping up.
Edit: Shouldn't it be possible to implement something similar with proxy?
PetriP-TNT
Member
That's a weird reason for not liking frameworks (showing that there's no need for a certain feature or spec, similar how the most popular frameworks accelerate specs that have been found working and useful in other implementations).
contains tons of caveats, making it easily disastrous to all devs a like. If you absolutely need , you can always use a polyfill, or maybe you could just use Proxies.You can but it's a lot more work. I'm probably going to try and polyfill it with that because I have my own framework that uses
.That's a weird reason for not liking frameworks (showing that there's no need for a certain feature or spec, similar how the most popular frameworks accelerate specs that have been found working and useful in other implementations).
There is a need though, if you've ever seen how frameworks do observables (and many do) it's a mess of polling and wrappers and that's exactly why there is no upgrade path for them. Some of the stuff I was using it for resulted in huge code reductions and with good performance. Proxies are a bit of different concept but it's an out at least.
Edit: granted I don't blame frameworks for
's demise, any codebase that needs cross-browser and has been publically adopted is essentially doomed to slowly die by bloat and legacy users but I was a little annoyed it was pulled for that reason, not like others couldn't have built much more modern frameworks and that's actually what prompted me to start my own.PetriP-TNT
Member
I have seen (and used heavily) observables across frameworks and languages and I was very hyped about Object.Observe few years ago (which in return is why I am so excited how React handles things) and there's obviously (some) need for observables in general: I just think that
was the wrong way to go in general: side-effect heavy and hard to debug.I have seen (and used heavily) observables across frameworks and languages and I was very hyped about Object.Observe few years ago (which in return is why I am so excited how React handles things) and there's obviously (some) need for observables in general: I just think that
Interestingly
was a great way to debug side effects.Anyone know a good tutorial on how to make a call to and connect an api?. I've never done it before and my friend may pay me as contract work for adding a functionality using JS/jQuery to his web app. Also feel like this may be an audition for a potential internship next year so wanna try and complete it on my own if possible. I've done some googling of course but was wondering if any devs here on GAF had any advice.
But besides that in other news posted in the programming thread but I finished my 1st web site. So confidence has gone up tenfold. And despite my best efforts I've continually failed to convince people I'm stupid since I've gotten 5 votes of confidence to start looking for dev jobs/internships already lol. Though aside from that I feel like I've had the network to land a job but I thought I needed to a minimum a beginner rock star to even be considered. And by that I mean I thought I needed a massive portfolio like all those bootcamp people usually have or a degree to even get my foot in the door.
But besides that in other news posted in the programming thread but I finished my 1st web site. So confidence has gone up tenfold. And despite my best efforts I've continually failed to convince people I'm stupid since I've gotten 5 votes of confidence to start looking for dev jobs/internships already lol. Though aside from that I feel like I've had the network to land a job but I thought I needed to a minimum a beginner rock star to even be considered. And by that I mean I thought I needed a massive portfolio like all those bootcamp people usually have or a degree to even get my foot in the door.
You mean like a REST API?
I guess. Not gonna lie still not entirely sure what that means =/ lol. Like I said still new at this and still feeling that impostor syndrome despite being told otherwise. But without going into too much detail, I need to add a random amount of items to a web page based on a user's location. So say you're in the San Francisco, every time you check the web page x amount of random names from people using the app should pop up.
JeTmAn81
Member
You'll be making AJAX calls to do this. Without getting too complicated, AJAX calls are for either sending something to a server or receiving something from a server. To make these calls work, you need two components:
1. A call from the client side. That's in your web page, done in JavaScript. There are a few different ways to do AJAX calls from JavaScript, but for simplicity's sake I'd Google how to do it using jQuery. You'll most likely want to do a Get call which uses the Get HTTP verb for getting data from the server.
2. A response from the server side. Since your client side call is reaching out to something to get data, there has to be something there to provide data. This is your API. You can host such an API on a webserver using a wide variety of technologies. The one I've used the most is WebAPI, which is Microsoft stuff. Basically I've just set up a bunch of C# code which is prepared to take calls to certain methods via certain verbs (Get, Post, etc.) and typically accesses a database and then returns the appropriate data.
So there's a good variety of different ways to accomplish both of these steps, but those are the broad strokes. You'll need to fill in on your own how to create whatever you're missing.
Thanks for the advice!. Some of that actually made sense to me since I've briefly used Ajax. I learned how it works at least when I was taking a class at a hackerspace. Also my friend did say just make an html file with jQuery and call the api. Anyway thanks again for making it clearer on what I have to do so I hopefully I'll have an easier time solving this.
PetriP-TNT
Member
Interestingly
Heh, that's true too. You can use Proxies trapping for that though.
So, I gave that Angular 2 quick start tutorial another look, and, wow, the Angular devs are all in Typescript? I really can't understand how such a successful framework can bet on a niche technique like Typescript for their next version.
The js code looks amazingly ugly, so I think that's not really an option, either.
Feel free to share your experiences with it, if anybody gives it a shot.
Btw: writing your own library from scratch is a great idea. I learned so much doing it, most notably how much friggin time you need to do so.
The js code looks amazingly ugly, so I think that's not really an option, either.
Feel free to share your experiences with it, if anybody gives it a shot.
Btw: writing your own library from scratch is a great idea. I learned so much doing it, most notably how much friggin time you need to do so.
JeTmAn81
Member
It sounds like you only have to write the client-side portion so that shouldn't be too bad. You should be able to write code that retrieves the data you want in about five lines or so. Be aware that remote API's can have specific requirements for how they will serve data, so if the API method you're accessing only allows GET requests, you'll need to make sure your request is using GET. Also, they usually specify which type of data they'll return (typically JSON) so you'll want to be aware of what kind of data you expect to receive before you process it.
WanderingWind
Mecklemore Is My Favorite Wrapper
Ha. Scoped being red across the board was funny. I don't use the same exact syntax as BEM, with the _ and -, but I use a similar system like .ThisName and .thisNAME.
On another note, did any of you see this sexiness on reddit?
JonathanEx
Member
I'm a big fan of BEM - and right now I'm doing it with the ITCSS method for ordering my SASS and breaking them down, so adds the component/object notation to the start of a class, eg o-list, o-list__item. Learnt about it from a colleague who went to one of Harry Robert's workshops so there's not one link I can share, but this covers a bit (and the video) and you'll find a few slidedecks on Google: http://www.creativebloq.com/web-des...-projects-new-css-architecture-itcss-41514731
At work I design a lot of sites in the same industry, so that makes it so easy to bring over some basic styles and has sped up my responsive builds incredibly. And as it's basically a methodology rather than relying on external things or frameworks, it's no harm if I want to change those higher level settings. I'll throw a pic/link of the structure of a recent project if it's of interest.
Ahh thanks again for the advice. 5 lines of code?. That doesn't sound terrifying at all lol. Ok sounds like I can possibly finish it this week.
edit: Ok stopped lagging and finally decided to give this project a go. Well still kinda lost since I'm rusty doing anything JS or jQuery related but with some googling I kinda understand what my friend wants me to do. Like I'm looking at similar code and it's starting to click as to how to implement an api. Some code looks familiar but yeah I feel like I'm on the verge of figuring out how to implement it on my own.
runningjoke
Member
To edit some text I'm using Ckeditor wired up with React. I'm using this React component in an Angular directive that fetches data from RSS feeds. This Angular app builds Twig templates that you can use to send email. I know this works because if I push F5 right now it says Hello World.
I once thought frontend development would be somewhat tangible
I once thought frontend development would be somewhat tangible
phillipgessert
Member
I design books, and in the process I work with a lot of very long (book-length) HTML files that are pretty iffy semantically. Most every element just has a <p> tag around it, so I go in and manually retag all the headings and other elements.
Is there a tool or a method that can be used to simplify this process? Nokogiri was mentioned in a video relating to bookmaking, but it wasn't obvious to me how it was used (or whether it could even be used for this). It's tough for me to imagine that this could be anything but a manual process, but figured I'd ask in case I'm overlooking some common tool.
Is there a tool or a method that can be used to simplify this process? Nokogiri was mentioned in a video relating to bookmaking, but it wasn't obvious to me how it was used (or whether it could even be used for this). It's tough for me to imagine that this could be anything but a manual process, but figured I'd ask in case I'm overlooking some common tool.
That actually sounds like a job for regex? If there is syntactical consistency with every element that needs to be tagged (for example, headings start with a number or are a single line) then you would strip all the existing tags and then add them back in the proper places using expressions.
You would still need some manual editing though but for a broad pass it seems like it could work.
You would still need some manual editing though but for a broad pass it seems like it could work.
PetriP-TNT
Member
phillipgessert
Member
Thanks very much, my regex skills aren't too hot but it sounds like something I'd better put some time on.
Maybe you want to post some example markup you have to deal with? You could replace the actual text with some lorem ipsum if needed.
Writing search score algorithms.
I have no idea how valid any of these are, so I'm just gonna write a shit ton of them and run them all concurrently (leaving the current one as active) and have a look at the resulting values/ordering.
Not entire sure what I'm even looking for.
I have no idea how valid any of these are, so I'm just gonna write a shit ton of them and run them all concurrently (leaving the current one as active) and have a look at the resulting values/ordering.
Not entire sure what I'm even looking for.
phillipgessert
Member
It could be stuff like:
Code:
<p>Chapter 1.</p>
<p>Call me Ishmael.</p>
<p<Chapter 2.</p>
<p>Call me Queequeg.</p>But it can also be stuff like:
Code:
<p>ONE</p>
<p>I received the following letter:<p>
<p<Dear Sirs,</p> <!--I'd have to make this part a blockquote-->Or stuff like:
Code:
<p>In which Ishmael writes a grocery list.</p> <!--I'd have to interpret this as a chapter head-->
<p>1. Apples</p> <!--I'd have to make this part a ordered list.-->
<p>2. More Apples</p>…so it's pretty darn variable. Seems like I'd better get my head around regex so I can figure out how to target stuff that's between the tags, based on search criteria that'd vary book-by-book, and I'd also better accept that there's a limit to what that can do and at best it'd just get me a decent "first pass".
JeTmAn81
Member
There's definitely a number of things you could do with regular expressions, though they'd have to be tailored pretty darn specifically to the format of whatever book you're working on. For instance, if you know that the chapters are going to begin with a number spelled out between opening and closing p tags, you could do something like:
<p>\s*(ONE|TWO|THREE|FOUR)\s*</p>
Of course, since you have to spell out the numbers like that you might want to write something that creates that string ("ONE|TWO|THREE...") up to a high number for you automatically and then paste that into your regular expression pattern.
At that point, you only have something which matches that specific type of chapter beginning. You'd then need to further develop your regular expression pattern to account for what follows if you want to be able to reformat that content as well.
Doing something like that blockquote automatically would be rather difficult, since when is the context around a blockquote going to be consistent? If there's nothing consistent, how can you match it with a pattern?
A list would be easier, as long as that's consistent.
You would probably end up having to write a bunch of rules to fit different scenarios. Could be a bit nightmarish if they start interacting with each other in unexpected ways. But there may be some easy patterns you can use to cut down on some of the busy work you encounter.
Hi all you people much smarter and more talented than me. I don't really know what I'm doing when it comes to web design some I'm hoping some kind soul here can help me out a little bit. I know you are all busy people and I'm not asking for a handout, just a little bit of help!
I'm working on a wordpress website, using a template, and trying to speed it up. Google gives it a 52/100 on the page speed insight page. Some of their suggestions I understand and am trying to fix myself, but the main one that Google says I "should fix" I am having trouble understanding what exactly I should do, even with googling solutions.
Google says:
Anyone got any kind of simple step by step guide on how to do this? I'd appreciate you forever.
I'm working on a wordpress website, using a template, and trying to speed it up. Google gives it a 52/100 on the page speed insight page. Some of their suggestions I understand and am trying to fix myself, but the main one that Google says I "should fix" I am having trouble understanding what exactly I should do, even with googling solutions.
Google says:
Anyone got any kind of simple step by step guide on how to do this? I'd appreciate you forever.
PetriP-TNT
Member
Concatenation and minification is a good start. As you are using Wordpress, try https://wordpress.org/plugins/bwp-minify/ plugin first. There's an async plugin too: https://fi.wordpress.org/plugins/async-javascript/
Thanks! I'll give it a go and see how it affects performance and report back.
It's saying you likely have a lot of CSS and JS in the <head> tag. Best practice is to put non-essential CSS (i.e. CSS not needed to show the very first screen) at the bottom of the <body> tag. JS should always go at the bottom of the body unless marked async. Critical CSS used in the first screen should be inlined.
That said, separating your CSS by critical path like that is a huge amount of work for little gain so I'd worry less about it. The bigger is issue is that you seem to have huge amounts of separate CSS and JS files you're trying to load. The easy win here is concatenation. You can create a build script (most often gulp or grunt) that takes all your JS and all your CSS and lumps them into single files. Since the browser can usually only have about 4 open connections everything else has to wait until those are fetched before it can move on to the next thing and by reducing the number of files you greatly speed up the initial load.
I'm using a theme I bought so I guess all that stuff in the head is from them? I have no idea how to do a build script or anything else you said. So the easy win in my case would be hiring a web dev I guess?
PetriP-TNT
Member
The Wordpress plugins I provided before should do the things Somnid describes for you automatically.
Sweet. Gonna give it a go right now.
Edit: Those plugins brought it up to 76/100. Any other general advice for speeding up a site? I'm compressing all my images (it's a photography website so there are lots of them) and I read I should resize them to the actual pixel size that the page will render them at?
Also my mobile speed score is still shit (51) and still recommends eliminating render blocking javascript (8) and CSS resources (7) above the fold.
Thanks so much for all the help so far. Very much appreciated.
The Albatross
Member
A lot of WordPress plugins expect their stylesheets and JS to load in the head, especially if they're for photo galleries, modals, etc. There is another plugin that will move all non-essential JS to the footer. But, it's not going to improve your Google PageSpeed report as long as at least one script is in the header, Google will ding you for it, especially on the mobile score.
I used this for a client's website that had a shit load of plugins (39 active plugins, 52 if you consider the inactive ones):
https://wordpress.org/support/plugin/scripts-to-footerphp
I used this plugin because the client would not have the stomach to pay me to re-engineer their site so that everything works the same while all of their scripts are concatenated, minified, in the footer, and still working reliably. PLUS, because they're using 3rd party plugins (and so many of them) as soon as they update one of them, there's a decent chance I'd either have to do that process all over again for them, or it would potentially break something.
The fact is, though, that if you have 36 javascript or CSS calls anywhere, it will render fairly slowly. Concatenating all of those scripts and minifying them, while still having your plugins work how you expect them to, will be a slow process.
I used this for a client's website that had a shit load of plugins (39 active plugins, 52 if you consider the inactive ones):
https://wordpress.org/support/plugin/scripts-to-footerphp
I used this plugin because the client would not have the stomach to pay me to re-engineer their site so that everything works the same while all of their scripts are concatenated, minified, in the footer, and still working reliably. PLUS, because they're using 3rd party plugins (and so many of them) as soon as they update one of them, there's a decent chance I'd either have to do that process all over again for them, or it would potentially break something.
The fact is, though, that if you have 36 javascript or CSS calls anywhere, it will render fairly slowly. Concatenating all of those scripts and minifying them, while still having your plugins work how you expect them to, will be a slow process.
WanderingWind
Mecklemore Is My Favorite Wrapper
Indent softwrapped lines is the best Brackets extension crafted by the hands of man.
WanderingWind
Mecklemore Is My Favorite Wrapper
Does anybody know what this is called? It's just (in theory) an image with points that users can click on to get a text balloon. I want to do something like this, but that example seems crazy bloated. I don't know what to call it to start looking for tutorials though.
Hotspots maybe?
It's not that hard though. Place the marker absolutely above the picture with percentage values to make it responsive, and open the tooltip with a tooltip library or by yourself.
WanderingWind
Mecklemore Is My Favorite Wrapper
Cheers. Thanks again. Okay, so I got the absolute and all that good jazz, but I'm not grasping how to make it responsive.
Jfiddle: https://jsfiddle.net/d1L06o08/1/
It's fine at fullsize, but on resize the markers move. How can I prevent that?
Your markers are absolutely positioned, yes, but relatively to the body.
Put everything inside a "position: relative" container instead.
https://jsfiddle.net/asnvupqx/1/
Wolf Akela
Member
This is not really Web dev, but do you guys create a separate Google account for your dev stuff? Worried that there'd be some dumb Google dev rule which would affect affect my personal account. I heard a lot of horror stories of cap support for Google play devs.
WanderingWind
Mecklemore Is My Favorite Wrapper
Ah, shit. lol. Thanks.
Anybody know of a good, mobile friendly way of using popovers? Is there a standard js plugin or way to use pure CSS?
WanderingWind
Mecklemore Is My Favorite Wrapper
How do you trigger it then on tap and click without js?
If you're using Bootstrap, there's a popover component included.
Or you could do that in pure CSS fiddling with the :focus pseudoclass on the marker elements to toggle the popover.
https://jsfiddle.net/373n8ggu/
PetriP-TNT
Member
Using <input type="checkbox"> is one option. Using :focus is another. Both have their shortcomings: :focus doesn't toggle and checkbox is harder to get triggered off when clicked off canvas
WanderingWind
Mecklemore Is My Favorite Wrapper
So, js is pretty much necessary then. I'll do some more digging, see if I can't find a suitable plugin that isn't dependent on Bootstrap. Of course, that just works, so if it plays nice within the legacy CSS I have to deal with, maybe I'll just use that. Thanks for the pointers.
What is a good approach to handle "likes" in your api?
It looks like Twitter maps the likes by the authenticated user to the statuses in the backend.
Otherwise it seems pretty common that you have to make a separate api call to fetch likes.
If you have say something like the neogaf forum with topics and related posts, I guess the optimal way would be to fetch the likes of the authenticated user by an array of post ids.
How do you guys like to work with likes/favorites?
It looks like Twitter maps the likes by the authenticated user to the statuses in the backend.
Otherwise it seems pretty common that you have to make a separate api call to fetch likes.
If you have say something like the neogaf forum with topics and related posts, I guess the optimal way would be to fetch the likes of the authenticated user by an array of post ids.
How do you guys like to work with likes/favorites?