Highlighted

CSS Conic-Gradients

Adobe Community Professional ,
Oct 13, 2018

Copy link to clipboard

Copied

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

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Views

1.2K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

CSS Conic-Gradients

Adobe Community Professional ,
Oct 13, 2018

Copy link to clipboard

Copied

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

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Views

1.2K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 13, 2018 0
Mentor ,
Oct 13, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 13, 2018 0
Adobe Community Professional ,
Oct 13, 2018

Copy link to clipboard

Copied

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.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 13, 2018 0
LEGEND ,
Oct 13, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 13, 2018 0
LEGEND ,
Oct 13, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 13, 2018 0
Mentor ,
Oct 13, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 13, 2018 0
Adobe Community Professional ,
Oct 13, 2018

Copy link to clipboard

Copied

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...

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 13, 2018 0
LEGEND ,
Oct 14, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 14, 2018 0
LEGEND ,
Oct 14, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 14, 2018 0
LEGEND ,
Oct 14, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 14, 2018 0
LEGEND ,
Oct 14, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 14, 2018 0
LEGEND ,
Oct 14, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 14, 2018 1
LEGEND ,
Oct 14, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 14, 2018 1
LEGEND ,
Oct 14, 2018

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 14, 2018 0
Adobe Community Professional ,
Oct 14, 2018

Copy link to clipboard

Copied

pziecina  wrote

Forget web sites, and think of browser based applications.

Exactly.  Progressive Web Apps. 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 14, 2018 0
LEGEND ,
Oct 14, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 14, 2018 0
Adobe Community Professional ,
Oct 14, 2018

Copy link to clipboard

Copied

as can I second you on that one.. this book is marvelous... sorry I've just modified the link... liveBook

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 14, 2018 0
Adobe Community Professional ,
Oct 14, 2018

Copy link to clipboard

Copied

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

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 14, 2018 0
LEGEND ,
Oct 14, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 14, 2018 0
LEGEND ,
Oct 14, 2018

Copy link to clipboard

Copied

osgood_  wrote

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.

I would be very surprised if anyone can direct you to one you can use. The problem with browser based web applications is that they are targeted at specific groups. I work on one that is specificly targeted at aerospace, and I think Birnou works on one targeted at the medical profession.

Both require log-in, authorisation to use (before you even get a user name and password) and more often than not, you must be a member of that profession with clearances. You may not think of Banking apps as requirering such user criteria, but if you think about it, all the above apply to some extent even to those.

People who work on such browser based apps, (or native apps) are more than likely subject to none disclosure, (would you have temp staff working on such apps?) but are compensated by better job security and a staff position.

This is also why I think that the inovation such apps create, takes years to filter down to the 'run of the mill' web designer, and why knowing code is not enough. One must also have the ability for 'idea creation', and never just rely on what everyone else is doing, or accept the conception that it is not possible, just because browsers do not all support a feature, or because others say so.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 14, 2018 0
LEGEND ,
Oct 14, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 14, 2018 0
LEGEND ,
Oct 14, 2018

Copy link to clipboard

Copied

So these PWAs arent replacing the traditional website its just another discipline as far as l can make out from the short clips and sound bytes l've been listening to. Must be because the few layout examples that l have seen look too simple to be websites.

As lve only got a couple of years left l dont really want to be expending enormous amounts of time learning something that has limited exposure as far as how it can benefit the kind of clients l work for. Sure an app sounds good but if it means writing something independent of a traditional website workflow lm not so sure my clients would be interesred in splashing the cash.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 14, 2018 0
Adobe Community Professional ,
Oct 14, 2018

Copy link to clipboard

Copied

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/

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 14, 2018 0
LEGEND ,
Oct 14, 2018

Copy link to clipboard

Copied

osgood_  wrote

So these PWAs arent replacing the traditional website its just another discipline as far as l can make out from the short clips and sound bytes l've been listening to. Must be because the few layout examples that l have seen look too simple to be websites.

As lve only got a couple of years left l dont really want to be expending enormous amounts of time learning something that has limited exposure as far as how it can benefit the kind of clients l work for. Sure an app sounds good but if it means writing something independent of a traditional website workflow lm not so sure my clients would be interesred in splashing the cash.

Forget the device specific apps that most produce, they are often just versions of the traditional website, and not worth the trouble. If you have an iPad look at things like 'Pages' and the Coda app.

Also think of what you would require to move a traditional large computer program adapted to match the clients overall requirerments to the web. That includes stock control, all reference material, animations of component assembly, parts catalogue,  booking systems, client and product records, then add anything else you can think of.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 14, 2018 0
Adobe Community Professional ,
Oct 14, 2018

Copy link to clipboard

Copied

pziecina  wrote

I would be very surprised if anyone can direct you to one you can use. The problem with browser based web applications is that they are targeted at specific groups.

Right.  Invitations, log-ins and security layers are mandatory.  So I can't post an actual example that you could view.

But consider a typical use case.  You get a replacement credit card in the mail.  The card label says, "activate this before using it by going to our website. "   The special URL asks for the activation code on your card.  Then it asks you to log-in with your username and password.  Then the app sends a text message to your mobile phone with a 6 digit verification code that you must enter to proceed.   Once verified, you get confirmation that your card has been activated and they invite you to do other things like update personal info, check your FICO scores, set-up automatic bill pay, etc.... 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 14, 2018 0
Adobe Community Professional ,
Oct 14, 2018

Copy link to clipboard

Copied

Yes, but this kind of scenario can happen whether it is a traditional website or a pwa... on the pwa side this is really what happens under the hood that differs and the javascript api that are used.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 14, 2018 0
LEGEND ,
Oct 14, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 14, 2018 0
LEGEND ,
Oct 14, 2018

Copy link to clipboard

Copied

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

... on the pwa side this is really what happens under the hood that differs and the javascript api that are used.

You could do it with a traditional web site, but then it would not be worth while, because at some point it would be necessary for the user to log-in, and at that point it becomes closed to unauthorised users.

Lets be honest the really interesting 'stuff' for users would be in the secure section, and not open to the general public.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 14, 2018 0
LEGEND ,
Oct 14, 2018

Copy link to clipboard

Copied

But that is just all backend stuff which has been around for donkies years. My electric and gas company uses an app to show me how much energy lve used in a particular peroid. I dont consider that kind of app something that a front end developer specialises in. I think what is being implied is that we are moving away from traditional websites to PWAs. The way l see it is the PWA is a drastically reduced version of the full website and may be useful for small sound bytes when you are offline and want to read news which is 4 weeks old.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 14, 2018 0
Adobe Community Professional ,
Oct 14, 2018

Copy link to clipboard

Copied

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

Yes, but this kind of scenario can happen whether it is a traditional website or a pwa... on the pwa side this is really what happens under the hood that differs and the javascript api that are used.

Yes, I know.  But the old websites were prone to many failures.  And I can tell immediately by the response rate that it's a PWA.   Everything is fast and seamless. 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 14, 2018 0