-
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
While I'm diving through Webpack, Material and an ES6 implementation of Angular 1, I started thinking of how to approach a REST backend.
Considering my roots in PHP, I thought, eh, why not using it.
Now, though, it's been a while since the last time I actually touched some PHP outside WordPress and I suddenly remembered Composer and how I never got to learn it and how it would be cool to do so now amidst my whole skills-revamping process.
But, my question is a different one.
As I was a Mac user until recently, back then I used MAMP as an AMP stack and when I switched back to Win, I still kept using MAMP because why not.
Fact is... on Win there are definitely other choices: XAMPP, WAMP, Bitnami WAMP and even a Softaculous AMPPS which apparently bundles in MongoDB too (that was a huge pain to install on Win).
So, on one hand I'd like to know if there's a clear winner between these easy solutions, but even more I'd like to know if there's a proper harder solution, like, if it's worth trying to manually install the single packages instead or if there's a cool CLI thing like the JS task runners or whatever.
(thanks in advance as always!)
Considering my roots in PHP, I thought, eh, why not using it.
Now, though, it's been a while since the last time I actually touched some PHP outside WordPress and I suddenly remembered Composer and how I never got to learn it and how it would be cool to do so now amidst my whole skills-revamping process.
But, my question is a different one.
As I was a Mac user until recently, back then I used MAMP as an AMP stack and when I switched back to Win, I still kept using MAMP because why not.
Fact is... on Win there are definitely other choices: XAMPP, WAMP, Bitnami WAMP and even a Softaculous AMPPS which apparently bundles in MongoDB too (that was a huge pain to install on Win).
So, on one hand I'd like to know if there's a clear winner between these easy solutions, but even more I'd like to know if there's a proper harder solution, like, if it's worth trying to manually install the single packages instead or if there's a cool CLI thing like the JS task runners or whatever.
(thanks in advance as always!)
do you have to use PHP or is node an option? There is nothing more natural than an express (or any other) node server running side by side with your frontend. Feels good.
If you want to stick to PHP there are gulp/grunt tasks doing that for you. (https://www.npmjs.com/package/gulp-connect-php)
I got so used to have the whole development stack in my repository and this worked ok the time I tried and used it.
(BTW, my backend team mate loves Laravel, it's really good in building rest apis)
If you want to stick to PHP there are gulp/grunt tasks doing that for you. (https://www.npmjs.com/package/gulp-connect-php)
I got so used to have the whole development stack in my repository and this worked ok the time I tried and used it.
(BTW, my backend team mate loves Laravel, it's really good in building rest apis)
I don't have to use anything, it's a learning side project and I can do whatever I want!
I'd stick with PHP mostly because my super low cost hosting service doesn't provide a Node plan (nor CLI access and whatnot) and anyway those are usually considerably more expensive than standard LAMP.
But even so, I remember fondly of the days I started this job and how I loved PHP back then, and how I grew far from it while diving through pure JS front-end development.
Eventually I got to miss a lot of stuff in the PHP world, mostly all the frameworks like Laravel or Slim ecc., and I'd love to re-discover PHP with all these "new" bells and whistles.
Last but not least: I could go with Heroku for a free MEAN stack, but I'm kinda scared of how fast I'm forgetting PHP, and I think writing an app jumping from PHP to JS and back would do wonders for my mental agility.
I guess I was just so surprised of how, thanks to my utter un-specialization, I was comfortable fixing bugs in a Java/Hibernate backend, and I simply don't want to lose it.
Nothing wrong with PHP imho. I know it gets a lot of hate in the web, and I think it's not a language that you use because it's a beautiful one. But it matured a lot in the last years and feels pretty solid. It's dead simple and cheap to host.
We use it because we are fast building things with it. Nothing comes close to it.
Have a look at the grunt/gulp php server tasks, they work well and you don't have to worry for any local setups. On my Mac I still use Mamp Pro though if I need a seperate server.
We use it because we are fast building things with it. Nothing comes close to it.
Have a look at the grunt/gulp php server tasks, they work well and you don't have to worry for any local setups. On my Mac I still use Mamp Pro though if I need a seperate server.
WanderingWind
Mecklemore Is My Favorite Wrapper
Oh my frog. How. How do I make this magic happen?
https://www.ux-app.com/device/view?s=MRGG9547&l=1&pg=36662
https://www.ux-app.com/device/view?s=MRGG9547&l=1&pg=36662
I don't have to use anything, it's a learning side project and I can do whatever I want!
I'd stick with PHP mostly because my super low cost hosting service doesn't provide a Node plan (nor CLI access and whatnot) and anyway those are usually considerably more expensive than standard LAMP.
But even so, I remember fondly of the days I started this job and how I loved PHP back then, and how I grew far from it while diving through pure JS front-end development.
Eventually I got to miss a lot of stuff in the PHP world, mostly all the frameworks like Laravel or Slim ecc., and I'd love to re-discover PHP with all these "new" bells and whistles.
Last but not least: I could go with Heroku for a free MEAN stack, but I'm kinda scared of how fast I'm forgetting PHP, and I think writing an app jumping from PHP to JS and back would do wonders for my mental agility.
I guess I was just so surprised of how, thanks to my utter un-specialization, I was comfortable fixing bugs in a Java/Hibernate backend, and I simply don't want to lose it.
Have you checked out AWS prices? You can get a server for MEAN for close to free. The specs for their free tiers are pretty inadequate for MEAN, but I've been able to work with AWS servers up 24/7 on MEAN for ~$3/month.
MEAN is magical and awesome and you should use it. AWS will be your best friend, but I have heard good things about Heroku as well (never used it myself).
WanderingWind
Mecklemore Is My Favorite Wrapper
lol. Fair enough.
What I was actually trying to get at. How do you make that happen with CSS on a real site and not a mockup. Is that all CSS animation? If so, what's a good source for learning the basics of that? I would use that like, in every single one of my mobile designs forever. I've mocked something like that up in Photoshop, but got sidetracked and never went back to it. But that mockup is so....clean. I want to keep tapping it.
What I was actually trying to get at. How do you make that happen with CSS on a real site and not a mockup. Is that all CSS animation? If so, what's a good source for learning the basics of that? I would use that like, in every single one of my mobile designs forever. I've mocked something like that up in Photoshop, but got sidetracked and never went back to it. But that mockup is so....clean. I want to keep tapping it.
Everything there can be done with CSS transitions, that's what the source code looks like.
The elements themselves seem to be generated via Javascript, which is why their `styles` attribute is so bloated in the inspector. They're absolute positioned elements that expand via:
So at a guess, the first part is calculating where each 'entry' should be using Javascript, positioning them there by manipulating `style` and absolute coordinates, calculating the height of all the tabs added together, and then a event listener that changes the `style` on click.
Even the transition seems to be defined through Javascript. Maybe it's using a library...?
The MDN page for transitions is okay, a bit esoteric: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
The elements themselves seem to be generated via Javascript, which is why their `styles` attribute is so bloated in the inspector. They're absolute positioned elements that expand via:
Code:
left: 0
top: 0
height: <whatever the max is>So at a guess, the first part is calculating where each 'entry' should be using Javascript, positioning them there by manipulating `style` and absolute coordinates, calculating the height of all the tabs added together, and then a event listener that changes the `style` on click.
Even the transition seems to be defined through Javascript. Maybe it's using a library...?
The MDN page for transitions is okay, a bit esoteric: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
WanderingWind
Mecklemore Is My Favorite Wrapper
Awesome. You gave me a great jumping off point. If that can be accomplished with CSS animations, I need to start studying those. I've seen plenty of semi versions of this on places like SI.com, Medium and a few others, but nothing that looked so simple and perfect for text-heavy articles. I've tried messing with this over on Codrops but it's so very, very bloated.
I think once I learn how to bleed the animation outside of it's div, but restrain it within another div, I may be able to understand it.
I think once I learn how to bleed the animation outside of it's div, but restrain it within another div, I may be able to understand it.
The element isn't actually "bleeding" outside of its DIV. It's the DIV itself that's being expanded over other DIVs since they're not under normal flow (see; position: absolute) and z-index is being manipulated to make sure the expanding element is "on top".
WanderingWind
Mecklemore Is My Favorite Wrapper
...nah. That can't be it. It can't be that easy. lol
How does it know to constrain itself? Say the mainContainer div is a no color background div that is the primary "lane" for the content. (Background is some kind of pattern). Each "content" div is white, filled with a say a picture and some text underneath. Is it possible to have it animate so it fits the lane div and not the entire page? Is that a thing?
<div id="mainContainer>
<div id="maxSizeContainer">
<div id="content">
<p>ipsum derp</p>
</div>
</div>
</div>
For that application specifically, I'm confident it caches values in the scripts like:
So when it changes the styles, it just injects these values.
If I were to attempt it with pure CSS I would use something along the lines of:
Container:
Content:
An absolutely positioned element inside a relatively positioned element will respect the container's dimensions with regards to top/bottom/left/right so that CSS effectively says "expand this thing to cover the entire container".
Read about relative and absolute here: https://css-tricks.com/absolute-positioning-inside-relative-positioning/
Code:
container-height: 500px;
container-width: 300px;So when it changes the styles, it just injects these values.
If I were to attempt it with pure CSS I would use something along the lines of:
Container:
Code:
position: relative
Code:
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;Read about relative and absolute here: https://css-tricks.com/absolute-positioning-inside-relative-positioning/
WanderingWind
Mecklemore Is My Favorite Wrapper
Thanks for the pointers. I'm going to play with this on Thursday, see if I can't at least replicate a basic version. At the very least, I know what I want my mobile version to look like.
Oh but I love PHP! My past is full of fond PHP memories of my first steps into this job!
And yes, building a backend with PHP/PDO is so absurdly simple and straightforward that... yeah, MEAN is super shiny and fun to code, but at some point you just have to jump through so many hoops, and learning so many collateral things, that eventually you're gonna ask yourself if it's actually worth it...
Anyway, I think the PHP tasks are a tad too simple for what I need. So I guess I'll just install MAMP again and call it a day.
I've never really looked at AWS because, well, it's not free and I'm a cheapskate!
Heroku offers several somewhat limited free plans that are actually more than enough to learn, deploy and see if what you're doing is cool enough to invest some money in it.
And you deploy on it with git, so it's also comfortably "embeddedable" in an already structured workflow, having to worry only to choose which components you're going to use and to git push every now and then.
WanderingWind
Mecklemore Is My Favorite Wrapper
I swear I just got this in my email. Codyhouse is monitoring NeoGaf.
PetriP-TNT
Member
You weren't kidding O.O ow.
PetriP-TNT
Member
React 0.14. introduces some huuuge changes, especially with separating DOM to react-dom
http://facebook.github.io/react/blog/2015/10/07/react-v0.14.html
http://facebook.github.io/react/blog/2015/10/07/react-v0.14.html
I like the idea but I don't trust people to use it. There's always going to be that one and oh and then this thing and that thing and... eventually you're back to serving 3mb of js.
reading the documenation all I could think about was motherfuckingwebsite.com
PetriP-TNT
Member
Microsoft promises to end support for IE<11 which is nice.
https://technet.microsoft.com/en-us/ie/mt163707?f=255&MSPPError=-2147217396
I have proactively tried to refuse working with IE<9 for a while now and it been working out very well for myself
https://technet.microsoft.com/en-us/ie/mt163707?f=255&MSPPError=-2147217396
I have proactively tried to refuse working with IE<9 for a while now and it been working out very well for myself
Well, end of support did not force people to stop using windows xp
Normally we do IE9 as the lowest of IE with some drawbacks (less animations and things like that), but that will change soon and we will only support the latest IE, too.
MS is autoupdating IE on Win 8/10 these days, right?
Normally we do IE9 as the lowest of IE with some drawbacks (less animations and things like that), but that will change soon and we will only support the latest IE, too.
MS is autoupdating IE on Win 8/10 these days, right?
Microsoft promises to end support for IE<11 which is nice.
https://technet.microsoft.com/en-us/ie/mt163707?f=255&MSPPError=-2147217396
I have proactively tried to refuse working with IE<9 for a while now and it been working out very well for myself
Up until when I had my own web company, I pretty much completely banned IE support (even tho, of course, I guaranteed minimum readability on IE9, which was the latest back then), mostly because 99% of my clients read their sites on iPad. Good times indeed. Much better than now, that my target browser is fucking IE8.
Btw as for React, I dunno, I kinda feel my mindset is a bit to rooted on Angular (and its two-way binding) and how to reproduce what I want in React I'd have to write double the code, even though I totally know how Angular gets bloated really fast.
Or maybe I'm just lazy, or getting old, and can only learn so many things until getting burnt out.
I'm too old (or too stupid ) to seriously use more than one large framework. Web development is complicated enough, I can't do ALL the things.
Personally, I don't like Angular, and I love React. So it's an easy choice for me. But I build A LOT of "normal" websites where these frameworks are the wrong tool to use, I stick with web components (sort of at least) there.
Anyway, I can understand that React looks crazy. I would say you have to witness at least one larger project with it too see it's glory and pitfalls
) to seriously use more than one large framework. Web development is complicated enough, I can't do ALL the things.Personally, I don't like Angular, and I love React. So it's an easy choice for me. But I build A LOT of "normal" websites where these frameworks are the wrong tool to use, I stick with web components (sort of at least) there.
Anyway, I can understand that React looks crazy. I would say you have to witness at least one larger project with it too see it's glory and pitfalls
WanderingWind
Mecklemore Is My Favorite Wrapper
What is the benefit to all of these frameworks, btw? Are they just pre-compiled CSS and Javascripts that you can use in projects so as to have to do everything by hand? Is there a good site for seeing what is possible with say, React or similar frameworks?
Is it common to use them? Is there any stigma behind using them?
tl:dr:
Is it common to use them? Is there any stigma behind using them?
tl:dr:
PetriP-TNT
Member
What is the benefit to all of these frameworks, btw? Are they just pre-compiled CSS and Javascripts that you can use in projects so as to have to do everything by hand? Is there a good site for seeing what is possible with say, React or similar frameworks?
Is it common to use them? Is there any stigma behind using them?
tl:dr:
What's the benefit? The benefit comes when your sites start to get more complex and more ambitious. At best they enable you to do so much more so much faster. Could you do it all with just vanilla JS? Of course, but most likely the end result would be slower, more buggier implementation a thing tens or thousands of people have worked relentlessly for months or years. Basically they help you to reach the end goal, but they arent (or using them) isn't the end goal themselves.
Billions of websites use all kinds of frameworks (and libraries). There's some stigma, of course, but most of that comes from using the wrong tool (framework, or library) for the right job. Bloat is always a problem, but modern frameworks (and the tool chains around them) aim for performance first solutions which make the issues much more smaller.
Of course then it's for the end user to use the libraries right: for example Bootstrap, the most popular front-end framework: you can always just include all of the styles and code to your project, but you can also cherry pick just the components you want to for optimal performance.
See http://todomvc.com/ for MV* comparisons (for React, Angular, Backbone, Ember... and even Vanilla, jQuery ones) for example.
Bots are better than you
Banned
I think that old proverb "All/Many roads lead to Rome" is the perfect metaphor for web development. With all those server/backend and frontend frameworks, libraries, packages, etc. it's just that there is an overwhelming amount of roads and branches. ^^
In the end, you have to decide whats the best approach for the available time and budget.
If you're stuck with some small regional companies (like me), whose sentiment is basically "we want everything, have no idea what we're talking about, and you have a budget like my childrens pocket money" and/or a agency with literally zero technical progress or the urge to get updated with new technologies (also like me), you're very limited in what you can use.
Also, yes, i need a new job, i know.
Although in my private time, i really like to tinker with the new hot stuff ... which is not so new and hot by the time i get around to tinker with it. ^^
But i have to say, the fragmentation, and branching of branches, etc. is reaching rather stupid levels. Was really happy when IO and Node got back together.
In the end, you have to decide whats the best approach for the available time and budget.
If you're stuck with some small regional companies (like me), whose sentiment is basically "we want everything, have no idea what we're talking about, and you have a budget like my childrens pocket money" and/or a agency with literally zero technical progress or the urge to get updated with new technologies (also like me), you're very limited in what you can use.
Also, yes, i need a new job, i know.
Although in my private time, i really like to tinker with the new hot stuff ... which is not so new and hot by the time i get around to tinker with it. ^^
But i have to say, the fragmentation, and branching of branches, etc. is reaching rather stupid levels. Was really happy when IO and Node got back together.
runningjoke
Member
Up until when I had my own web company, I pretty much completely banned IE support (even tho, of course, I guaranteed minimum readability on IE9, which was the latest back then), mostly because 99% of my clients read their sites on iPad. Good times indeed. Much better than now, that my target browser is fucking IE8.
10% of my Chinese users are still on IE8 so I'm forced to keep supporting it. Nothing will look right or animate smoothly if at all, but it needs to remain functional. For me this situation is much better than writing html emails for Lotus Notes, Outlook 2007 and Gmail.
WanderingWind
Mecklemore Is My Favorite Wrapper
Thanks. So, React is a set of pre-written Javascript configured toward UX elements? Am I understanding that right?
Also, am I going crazy or did Brackets used to have CSS code hinting?
EDIT: Forget the brackets question. Just had to refresh it.
PetriP-TNT
Member
Yeah, Brackets has had CSS code hinting for a long time
Your first statement is explained bit weirdly but basically yes. It's a Javascript library that can be used to create robust UX elements, commonly referred as components.
Consider something like an element that consists of picture of an cat and a caption that says the cats name
Code:
<div class="cat">
<img src="john-the-cat.png" alt>
<span>John the Cat</span>
</div>Now you have to create 10 of those with different cats, so you copy paste and change the names.
Code:
<div class="cat">
<img src="john-the-cat.png" alt>
<span>John the Cat</span>
</div>
<div class="cat">
<img src="pete-the-cat.png" alt>
<span>Pete the Cat</span>
</div>
<div class="cat">
<img src="wind-the-cat.png" alt>
<span>Wind the Cat</span>
</div>Now you want a page 100 cats. So you do it again. Then your boss tells you that you have to add the species as another <span> to all of the cats. So you go and change that to all of the cats by hand.
Compare this to a React like approach. We'll create a Cat-component (cat.jsx) and run it through Babel (ES6 code + JSX transform so you can use it in a regular browser);
Code:
import React from "react";
class Cat extends React.Component {
render() {
let src = this.props.name.toLowerCase() + "-the-cat.png"
return (
<div className="cat">
<img src={src} alt />
<span>{this.props.name} the Cat</span>
</div>
);
}
}
export default Cat;Now you can just use it as an component
Code:
import React from 'react';
import ReactDOM from "react-dom";
import Cat from './cat.jsx'
ReactDOM.render(<Cat name="John" />, document.getElementByID("#foo"))>Instead of calling 100 ReactDOM.renders, you can just create a wrapper and loop through an array of say, 100 cat names to create the cats instead. If your array changes, you'll cats also get rerendered automatically, making stuff like dynamically adding cats possible too. And much much more.
At work we use lots of mustache/jquery/backbone though many newer projects are using angular. Personally I just use a consistent vanilla js module pattern if it's not enterprise quality coding or needs really old browser support.
On personal projects where I can do whatever I want, I built my own templating library with 2-way binding that's significantly smaller and less complex than any existing one I've seen. Also, unlike knockout, angular and react it actually keeps a clean separation between code and markup which a huge pet peeve of mine. It depends heavily on object.observe, template element, a bit of symbols and mutation observers. Obviously it doesn't work in all browsers due to the high ECMAscript requirements.
https://github.com/Somnid/tmpl
On personal projects where I can do whatever I want, I built my own templating library with 2-way binding that's significantly smaller and less complex than any existing one I've seen. Also, unlike knockout, angular and react it actually keeps a clean separation between code and markup which a huge pet peeve of mine. It depends heavily on object.observe, template element, a bit of symbols and mutation observers. Obviously it doesn't work in all browsers due to the high ECMAscript requirements.
https://github.com/Somnid/tmpl
WanderingWind
Mecklemore Is My Favorite Wrapper
Yeah, Brackets has had CSS code hinting for a long time
Your first statement is explained bit weirdly but basically yes. It's a Javascript library that can be used to create robust UX elements, commonly referred as components.
Consider something like an element that consists of picture of an cat and a caption that says the cats name
Code:<div class="cat"> <img src="john-the-cat.png" alt> <span>John the Cat</span> </div>
Now you have to create 10 of those with different cats, so you copy paste and change the names.
Code:<div class="cat"> <img src="john-the-cat.png" alt> <span>John the Cat</span> </div> <div class="cat"> <img src="pete-the-cat.png" alt> <span>Pete the Cat</span> </div> <div class="cat"> <img src="wind-the-cat.png" alt> <span>Wind the Cat</span> </div>
Now you want a page 100 cats. So you do it again. Then your boss tells you that you have to add the species as another <span> to all of the cats. So you go and change that to all of the cats by hand.
Compare this to a React like approach. We'll create a Cat-component (cat.jsx) and run it through Babel (ES6 code + JSX transform so you can use it in a regular browser);
Code:import React from "react"; class Cat extends React.Component { render() { let src = this.props.name.toLowerCase() + "-the-cat.png" return ( <div className="cat"> <img src={src} alt /> <span>{this.props.name} the Cat</span> </div> ); } } export default Cat;
Now you can just use it as an component
Code:import React from 'react'; import ReactDOM from "react-dom"; import Cat from './cat.jsx' ReactDOM.render(<Cat name="John" />, document.getElementByID("#foo"))>
Instead of calling 100 ReactDOM.renders, you can just create a wrapper and loop through an array of say, 100 cat names to create the cats instead. If your array changes, you'll cats also get rerendered automatically, making stuff like dynamically adding cats possible too. And much much more.
I understand now, even if it's going to be a good long while before I need to delve into anything of the sort.
For instance, my great battle of the day was getting this stupid nav bar to be responsive. I have like, 7 media queries. Next up is getting a sidebar on the first two pages. And then I'm tackling the animations. End goal is for it to function like that mockup I posted a couple of days ago.
And then, you know. Make it not look like ass.
I'm trying to make some step navigation to filter a collection.
If you can imagine choosing a week number to edit a specific day, it would look something like this:
Step 1
Step 2
My Vue.js code (should be very similar to AngularJS) is written below. Is there a better way to structure this? If I have many steps it quickly becomes a mess of multiple if-statements.
If you can imagine choosing a week number to edit a specific day, it would look something like this:
Step 1
Step 2
My Vue.js code (should be very similar to AngularJS) is written below. Is there a better way to structure this? If I have many steps it quickly becomes a mess of multiple if-statements.
Code:
// html
<div class="card-nav" v-if="!week">
<h3>Days</h3>
<ul class="list-group">
<li class="list-group-item" v-repeat="week in weeks" v-on="click:setWeek(week)">
{{ week.title }}
</li>
</ul>
</div>
<div class="card-nav" v-if="week">
<h3>{{ week.title }}</h3>
<ul class="list-group">
<li class="list-group-item" v-on="click:unsetWeek()">Go back</li>
<li class="list-group-item" v-repeat="day in week.days" v-on="click:setDay(day)">
{{ day.title }}
</li>
</ul>
</div>
Code:
// collection
weeks: [
{
title: 'Week 1',
days: [
{ title: 'Monday' },
{ title: 'Tuesday' },
{ title: 'Wednesday' }
]
},
{
title: 'Week 2',
days: [
{ title: 'Monday' },
{ title: 'Tuesday' },
{ title: 'Wednesday' }
]
}
]Quick UX question... What are your thoughts on a blog that presents posts on their homepage as cards with Masonry js (If you're not familiar about Masonry, think about Pinterest's presentation of items)?
The context is that the posts are text driven (city guides, tips, offers), was thinking how a user scan or browse along the homepage. I'm leaning more that this kind of post layout caters more into a visual type of posts... say a gallery or portfolio but not text headlines and a summary.
The context is that the posts are text driven (city guides, tips, offers), was thinking how a user scan or browse along the homepage. I'm leaning more that this kind of post layout caters more into a visual type of posts... say a gallery or portfolio but not text headlines and a summary.
PetriP-TNT
Member
Google's Material Design#Cards offers pretty good insight (IMO) when to use cards and when not
See the feed reader example that sounds like your situation
PetriP-TNT
Member
Sucks when you start a site with support for IE8/9 (aka no flex) only to have a major vendor drop support for everything IE10 and below... So much hard work that was only hard because we couldn't just target real modern browsers
Just call it Regressive Enhancement and bill your client double prices
runningjoke
Member
I know a few blogs that have the posts in 3 columns, I don't like it. But then I'm weird and it might work great for your target audience
Personal experience / preference:
There's a blog I maintain, and even tho there are dozens of people writing on it, I consider it a personal project, where I can afford to try stuff and change the layout every other day just for fun.
Content is text-oriented with, of course, featured images.
At some point, some years ago, I decided to try the Masonry approach, IIRC with 3 cards (containing image, title, excerpt, author and comments count) per line top at the largest width breakpoint (I guess 1440, that was my own screen width back then).
It was kind of a disaster.
While the readers could easily check out many more posts at once, it got all messy quickly.
My guess is that Masonry is great for pictures and tumblr-like blogs, where the focus is on quickly scannable contents.
Proper blogs, where you have to lead readers to click into the single post page, should have a "calmer" approach.
All in all, I guess it all depends on where you're trying to put the focus: homepage or single post pages.
Masonry layouts are known to lack the ability to afford proper hierarchy, sense of chronology and overall simplicity a good design usually needs, as Copon's experience highlights. It's best used when the content can do away with all of these necessities and on relatively small scale zones where the effect doesn't get dizzing. It's for instance pretty neat on galleries.
WanderingWind
Mecklemore Is My Favorite Wrapper
Masonry is the devil.
Zombie James
Banned
Anyone have any experience with Docker and Dokku? I'm thinking of offering my own hosting for clients and it sounds like it might be a great way to avoid all the usual server maintenance shit I hate to do.
New Dreamweaver on the horizon.
I've tried the new version with the dark UI. Looks good, feels good.
I've tried the new version with the dark UI. Looks good, feels good.
Can someone help me out. I have no idea why my background isn't showing a parallax effect when scrolling down the page.
This is my problem:
The huge whitespace in the middle is not showing the background-image or background: I'm giving it when testing it out on a HiDPI screen. However, it works on other screen sizes like MDPI and smaller ones (at least according to Chrome). I tried using a separate .parallax class with the following:
but that didn't work nor did it work with the code that's in the image.
I'm using the Material Design Lite framework and I think it's that that's causing the issue. When I go into the Inspect Element view and remove both display: flex and display: webkit-flex on the .mdl-layout class, it seems to work.
This is my problem:
The huge whitespace in the middle is not showing the background-image or background: I'm giving it when testing it out on a HiDPI screen. However, it works on other screen sizes like MDPI and smaller ones (at least according to Chrome). I tried using a separate .parallax class with the following:
Code:
.parallax{
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}but that didn't work nor did it work with the code that's in the image.
I'm using the Material Design Lite framework and I think it's that that's causing the issue. When I go into the Inspect Element view and remove both display: flex and display: webkit-flex on the .mdl-layout class, it seems to work.