CSS Conic-Gradients

[Nancy OShea]

I see endless possibilities with this new CSS specification.

3.3. Conic Gradients:

But the only browser currently supporting it is Chrome.  

https://caniuse.com/#feat=css-conic-gradients

Good news for developers, there is a polyfill.

CSS conic-gradient() polyfill

[ALsp]

From a design point of view, it's kind of like fluff. Fluff can be nice sometimes, but it's got to make design sense. Your graphic makes me think of an old farmer, exhausted, laying on the ground beneath his favorite cow and staring up at her udder.

[Nancy OShea]

ALsp  wrote

From a design point of view, it's kind of like fluff. Fluff can be nice sometimes, but it's got to make design sense.

Arguably, all gradients are fluff.   But that doesn't stop designers from using them for visual interest,  And since it's just CSS, it will load fast without heavy graphics.

[osgood_]

Ugly.......l cant see any use for this at all personally, well not the example you posted anyway.......sorry its 0 points from the UK.

[pziecina]

osgood_  wrote

Ugly.......l cant see any use for this at all personally, well not the example you posted anyway.......sorry its 0 points from the UK.

It is possible to do pie charts with the css conic-gradients, which will probably be the most common usage. Though untill it is supported x-browser !

The problem with pollyfills, is that even though they make backwards compatability easy, historically with the exceptions of the html5 shiv and media-query shiv, many developers will not use them unless they are provided by default, and designers either do not know about them or if they do, look on them as too difficult to use.

[ALsp]

A more serious issue with the more complex polyfills is that they can cause issues in some browsers if they continue to be used after the browser in question actually begins to support the method. This is one of the reasons why so many web sites today behave erratically in Microsoft Edge... some the hacks for old IE are oozing through bad detection routines.

[Nancy OShea]

Polyfills are for people like us to experiment while other browsers catch up.  I have no intention of using this in the wild yet.  I'm playing with it because I can see more potential for this than just pie-charts.  Especially when you can combine conic with radial and linear gradients, clip-paths and keyframes and more...

[osgood_]

pziecina  wrote

It is possible to do pie charts with the css conic-gradients, which will probably be the most common usage. Though untill it is supported x-browser !

The problem with pollyfills, is that even though they make backwards compatability easy, historically with the exceptions of the html5 shiv and media-query shiv, many developers will not use them unless they are provided by default, and designers either do not know about them or if they do, look on them as too difficult to use.

I always think people use this shi*e because they are not very good when it comes to assessing what looks good visually, so they over-compensate by filling their pages full of unnecessary garbage.

If it can be used more subtely than the example provided then I'm willing to re-assess it but at the moment that just looks like a tit, as Al pointed out. I don't produce porn sites.

[pziecina]

The one I like, and can see being of use, especially when animated, (botton states eg, on, off) is the metalic button example -

https://codepen.io/thebabydino/pen/qdPRpN

[osgood_]

pziecina  wrote

The one I like, and can see being of use, especially when animated, (botton states eg, on, off) is the metalic button example -

https://codepen.io/thebabydino/pen/qdPRpN

Well its certainly more subtle than the previous example posted BUT I'm still not sure where it would fit in with my idea of what good design should look like. I tend to think 'less' is 'more' and the more complicated things get the more over-thought about and over worked they become, BUT that is just a natural thing to do if you don't come from a design background.

Maybe more applicable for front end apps - I dont build front end apps so I would not know but often graphic style icons are used in app building, so maybe its best suited for that.

[pziecina]

osgood_  wrote

Well its certainly more subtle than the previous example posted BUT I'm still not sure where it would fit in with my idea of what good design should look like. I tend to think 'less' is 'more' and the more complicated things get the more over-thought about and over worked they become, BUT that is just a natural thing to do if you don't come from a design background.

Maybe more applicable for front end apps - I dont build front end apps so I would not know but often graphic style icons are used in app building, so maybe its best suited for that.

I knew you would say that, so let me explain where I see the use.

Forget web sites, and think of browser based applications.

In engineering, electronics, medical, and many other areas, one of the biggest costs is not the equipment itself but training people to use it. Often this requires very expensive software to emulate the use of the equipment, which can and sometimes does cost more than the equipment itself, (can run into millions).

html, css, javascript, (along with lower level languages such as C++) are used to create the software, but there are a number of problem that are not just cost related -

Specialist courses many be required to train users.

Refresher courses are extreamly rare.

Even small Changes is the equipment software, can require re-certification for operators.

One of the main drawback has always been the emulation of button and dial functions, which has always ment that the web was only of very basic help, (often just images, a description of operation, and a video). Now it is almost possible, (and now tablets and desktops have become faster and touch controlled) to built browser based emulators, cutting costs, allowing refresher training, and opening the possibility of new 'fringe cases' to be included.

Admitedly this type of use is seen as very specialised and expensive, but cost wise for the equipment manufacturer and user, it is cost effective.

[osgood_]

pziecina  wrote

osgood_   wrote

Well its certainly more subtle than the previous example posted BUT I'm still not sure where it would fit in with my idea of what good design should look like. I tend to think 'less' is 'more' and the more complicated things get the more over-thought about and over worked they become, BUT that is just a natural thing to do if you don't come from a design background.

Maybe more applicable for front end apps - I dont build front end apps so I would not know but often graphic style icons are used in app building, so maybe its best suited for that.

I knew you would say that, so let me explain where I see the use.

Forget web sites, and think of browser based applications.

In engineering, electronics, medical, and many other areas, one of the biggest costs is not the equipment itself but training people to use it. Often this requires very expensive software to emulate the use of the equipment, which can and sometimes does cost more than the equipment itself, (can run into millions).

html, css, javascript, (along with lower level languages such as C++) are used to create the software, but there are a number of problem that are not just cost related -

Specialist courses many be required to train users.

Refresher courses are extreamly rare.

Even small Changes is the equipment software, can require re-certification for operators.

One of the main drawback has always been the emulation of button and dial functions, which has always ment that the web was only of very basic help, (often just images, a description of operation, and a video). Now it is almost possible, (and now tablets and desktops have become faster and touch controlled) to built browser based emulators, cutting costs, allowing refresher training, and opening the possibility of new 'fringe cases' to be included.

Admitedly this type of use is seen as very specialised and expensive, but cost wise for the equipment manufacturer and user, it is cost effective.

Well if it serves a specialist environment all well and good BUT its likely to invade into places it doesnt really belong due to poor understanding of where its most applicable to use. Look at Bootstrap, was never meant for front end development as it produces a mess but some  idiot thought I'll plaster this crap all over the place and it sticks like sh*te and little by little we end up rather than seeing progress just websites littered with poor coding and poor design solutions. What about css animations, how abused have they become - nearly all websites you visit now have some stupid thing flying in from the left, right, top, bottom, twirling around........for what purpose other than, it's there so I'll use it and hope my client thinks they are getting more bang for their buck.

People arent responsible any longer and cant be trusted to use the tools at their disposal sensibly or appropriately. Only those with some degree of design background and some degree of coding experience should be allowed to participate, everyone else is not applicable and should be arrested for violation of the web and bringing the profession into disrepute, that's what I think anyway

[pziecina]

osgood_  wrote

People arent responsible any longer and cant be trusted to use the tools at their disposal sensibly or appropriately. Only those with some degree of design background and some degree of coding experience should be allowed to participate, everyone else is not applicable and should be arrested for violation of the web and bringing the profession into disrepute, that's what I think anyway

The web is changing, but not most small sites and the people who create them.

It is the more specialised coders and the teams that support them, that are/have moved away from what was/is traditionally thought of as the normal, be that frontend or backend. Most sites and applications are dead before they go live, simply because they are the webs version of a 1pence paperback. Maybe we should blame designers who still think of the web as an off-shoot of traditional publishing, or clients that accept 3rd rate sites with no future as the norm.

It is even possible that we could blame programs such as Dw, (before rwd) or Muse which made visual layouts a possibility, but allowed the creation of 'more of the same'. Or even the dot net boom, which promised much, delivered little, and sent what one could charge through to the basement, cut price market.

[osgood_]

I think the issue these days is the ease of which anyone can create a web presence with the aid of automated programs without really knowing much about what they are creating so you end up with more and more poor cheap solutions, thats what is changing rapidly,

Even todays professionals  jump straight into frameworks which have been engineered, designed and largely suited to huge companies like, Twitter, Facebook and Google etc, without first wanting to  learn the basic code which they are based upon, so really you have a situation now where less and less is being built using solid foundations and good, sensible practices for what is required, resulting in an ever increasing, complex and overkill workflow.

I'll just keep on doing what lm doing and believing in what lm doing, have faith!

[Nancy OShea]

pziecina  wrote

Forget web sites, and think of browser based applications.

Exactly.  Progressive Web Apps. 

[osgood_]

Can either of you provide some url  examples of thrse PWAs because l have no idea what they look like or if l have ever come across any......most websites l visit just look like websites to me and don't do anything that special other than show a bit of information. About the most complex offering l've come across is a calculator.

[Nancy OShea]

My bank and credit card company websites are all using PWAs now.  No more downloading and installing apps from stores.  The web-based apps are very fast and efficient.

Progressive Web Apps  |  Web  |  Google Developers

[osgood_]

Which bank is that? Ive just watched some bloke trying to explain what a PWA is but it just looks to me like an app not a website, so how do the 2 relate. I mean  he only showed the app which was quite simple not  what the coresponding  website looked like so lm having trouble seeing  how it works as a whole.

[pziecina]

I've just thought of a possible better example of what a browser based web app can do.

It's called Dreamweaver. Everything Dw can do I, (and may others) could do as a browser based web app. Even much of Photoshop or MS Word can be done as a browser based web app.

[B i r n o u]

let's forget static sites with non-dynamic pages (both in terms of content data and display templates)....

we could call it, dynamic sites, webapp, web applications... no matter... the name we give them... all these content representations from a browser, will systematically encounter the same types of problems...

namely... is the user always connected or does he encounter connection or bandwidth problems, as his cache will be managed... I'm going to have to juggle with the cache updates every time and reload what hasn't changed...

and what happens if the user enters data when he's not logged in??

and what to do when a user is logged in on a page but the content has to change because he just changed on the server...

and then what if I don't want to show the site in a browser but in full screen especially on mobile devices... etc etc etc etc.....

all these questions has an answer... and all browsers nowadays integrate solutions in a native way... this type of site and approachs take the name PWA..

... so it is better to use them and develop our sites in this way... of course... if the browsers are not of the latest generation the system integrates fallback management to guide the user... .

either if it is not a realistic demo way.. you can run https://pwa.rocks/

[osgood_]

Is a bit hit and miss. Im struggling to find one that looks as though it works as an app in the serious section. I dont know if the FT one works as it should do offline as l dont have a subscription and the only other one that looks remotely sensible - cloud4 - only downloads a short cut icon to the desktop, its just an ordinary website becsuse apart from a standard page saying 'you seem to be offline' it shows bugger all else..........humm.

I can see a point of creating a short cut icon to the website if you are online but l cant see much point of an offline version which only shows half of that available online. For instance some of the images on the FT example were missing offline and l encountered broken links.........hummm

The rest of the examples seemed like standalone silly games which you would expect to work as apps as they are solitary components.

[pziecina]

For most features in an application the user must be online, but limited functionality is (or could be) made available offline.

I don't think any of us can give you anything close to a good example, as most people will never have experiance in what a specific profession other than their own requires. I'm a qualified aerospace engineer, and everyone except for the security and back-end teams are also in specialised aerospace professions before moving to web development, (2nd professions).

The reason we do it that way, is because we have all then had practical experience in what is required, something anyone outside the profession will never know.

[osgood_]

I guess l dont call what you are talking about a progressive web application whereever that damn terminology suddenly sprang from. The kind of web apps you are talking about have been around for severalmyears l think in industries like banking and insurance, more recently utilities companies etc and are a highly specialised practice, nothing to do with websites or front end development in my opinion.These new progress web applications for mobile devices seem to be either short and sweet stand alone applications from a specific company like a currency convertor with a link to the main website or an attempt at bringing partial information in an app format to mobile devices.

I quite like the idea of a short cut icon to the main website, why not if you visit that website frequenty as it saves opening your browser and going to your bookmark, but cant you do that on mobile anyway - create a short cut icon on your desk top in mobile like you can on your desk top device. It might not look so pretty though and l guess a lot would not  know how to do that so if something pops up and asks if you want to download the short cut its useful

[pziecina]

osgood_  wrote

I guess l dont call what you are talking about a progressive web application whereever that damn terminology suddenly sprang from. The kind of web apps you are talking about have been around for severalmyears l think in industries like banking and insurance, more recently utilities companies etc and are a highly specialised practice, nothing to do with websites or front end development in my opinion.

That's where we differ, as everything I do in those types of applications is open to everyone who develops any type of web site. It is all html, css, js, server-side and now with a little bit of C# or C++ thrown in thanks to web assembly.

[osgood_]

Yeah but even though lm pretty good at all the languages you mention lm still not in that kind of league to be able to create the types of applications l think you are talking about.........theres php and theres php on another level thats all lm implying