#and i put autofill for one address line

[finnlongman]

tasty data, get your tasty data here

All right, I finished putting TBC2-LL into my Unhinged Spreadsheet, so here are some observations about this text. Long post incoming.

Caveat that this spreadsheet is a work in progress and all the data collection is being done manually, aka trawling the text with my own eyeballs and looking for words. It's entirely possible I've missed some.

A Mo Phopa

There are 47 instances of the word "popa" in this text that I've found.

I had to zoom out to fit them all in. This is so many.

What's really interesting, though, is how terms are paired. If I were to put the spreadsheet back in its original order, showing them in the order they occur in the text, we would see that the use of a phopa for Fergus is almost always accompanied by daltán or a variant ("fosterling, pupil, fosterson"): either Fergus addressing Cú Chulainn as a daltán, or Cú Chulainn identifying himself as such. That means the term in those contexts is firmly established as a fosterage term used with a generational difference.

On the other hand, when a phopa is used by Cú Chulainn to address Láeg, it's very often paired with Láeg addressing Cú Chulainn with an affectionate diminutive like a Chúcúc. The only other person to use a diminutive like this is Lug (or, well, Cú Chulainn's "friend from the Otherworld", who isn't named in this recension), and he only does so once. Láeg does so repeatedly:

By pairing this with a phopa, we're establishing an age difference, but the absence of obvious fosterage terminology and the subversion of expected hierarchies makes this seem more like a "big bro, little bro" relationship, as far as terminology is concerned. A Chúcúc is typically translated by O'Rahilly as "little Cú"; you could also go as far as "little Hound". It's very much both affectionate and emphasising Cú Chulainn's youth.

(In TBC1, by contrast, Láeg only uses a diminutive like this once.)

Putting the rest below a cut to save your dash, because it got long.

Gilla

The term "gilla" is a flexible one: it basically just means lad, boy, servant. It's often used in the narration for charioteers, but I noticed something interesting about its usage in dialogue as a term of address.

Notably, that in TBC1, Cú Chulainn never uses this term to address Láeg, but in TBC2-LL, he does (usually while giving orders, though the spreadsheet doesn't offer that level of detail) (yet). It's used in narration to describe Láeg, I think, but never as a term of address.

Is this a matter of date, and the shifting use of the term chronologically? TBC1 and TBC2-LL are close enough in date that I would be surprised if the term "gilla" had a significantly different meaning at the time of writing.

It does show up quite a bit in late texts, though, so there might be something in that. Need to look into that more.

Comalta, comaltus, daltae

TBC2-LL typically shows a lot more instances of fosterage terminology: comalta, comaltus, and daltae all show up more times. This might just be that TBC2 is wordier than TBC1 and likes to repeat itself more, but the mess of orange on my spreadsheet suggests it also has a greater preoccupation with the web of family, fosterage, and provincial connections between characters.

[ETA: it's just an error that lists one of the comaltas as pupil, fosterling; I think Excel got too enthusiastic with the autofill. The same error occurs below. It's not significant.]

Cú Chulainn once uses the term daltán to address Láeg in TBC1, which doesn't show up in TBC2. I did a post about that a while back; it comes in a line where Cú Chulainn is explaining something to Láeg, so might have a pedagogical usage, although also seems like it might be a little bit sarcastic. Need to explore that one further.

(Note that when Cú Chulainn appears in both the "used by" and "used for" columns, it's because he's describing himself, e.g. Fergus says, "Who's there?" and he says, "It's me, your fosterson and the fosterson of the Ulaid." The relationship given in the column after that is therefore the one being identified in those moments.)

Cara, cairdes, caratraid

TBC2-LL also has more uses of the word cara, friend, for a much wider range of relationships and hypothetical relationships. ("Be it friend or foe" kind of thing.) Cara is used for allies, fosterbrothers, family connections, and some relationships that look like "straightforward" friendship, i.e. there isn't any other clearer connection between the characters mentioned in the text.

The term caratraid for friendship shows up five times in TBC2, and never in TBC1. Three of these instances are to describe Cú Chulainn's relationship with Fer Baeth, one of his foster brothers; one is to describe his relationship with Fer Diad, another foster brother; and one is to describe his relationship with Lugaid mac Nóis, his ally in the Connacht camp (who is also, I think, a foster brother?).

Cairdes shows up three times in TBC2 - twice about Fer Baeth and once about Fer Diad - versus only once in TBC1, where it refers to Fer Baeth (and is in narration rather than dialogue). TBC2 also introduces "cardes sliasta", intimate friendship, with which Medb bribes men.

Fer Diad

Here are all the terms used for Cú Chulainn & Fer Diad's relationship across TBC1 and TBC2-LL:

Let's filter that to get a sense of TBC1 vs TBC2, bearing in mind that Comrac Fir Diad is way longer in TBC2 and therefore likely to have far more terms in it.

TBC1:

TBC2-LL:

So we've got a lot more repetition in TBC2, but we've also got some differences. TBC2 loses some of the endearments, like "a lóeg" and "a airer na súl", which are more typically found in romantic contexts. But it gains two instances of "inmain", beloved (a semantically wider term: we often get a mic inmain between family members, for example). Both use the term "dil" for "beloved", though, inserting it into Fer Diad's name: Fer dil Diad.

Both use the term "cocle", possibly "coicéile": comrade, friend, companion, vassal. TBC2 uses it a lot more, though. It also adds "cara", friend, and the related terms "cairdes" and "caratraid" to describe friendship.

Both use "acme" and "fine", in the same context/sentence: "you are/were my kith and kin". TBC also gives us "fir chomdéirgide", men who shared a bed. There is another reference to bed-sharing in TBC2, but it uses a different term, so this one is distinct. The term "dérgud" seems to refer to the making of a bed, so the vibe seems to be more "men who made a bed together": travelled together, made decisions together, shared intimacy, etc.

The term Cúa is etymologised as an insult in TBC1, but treated as a straightforward diminutive in TBC2. Meanwhile, TBC2 introduces the concept of Cú Chulainn as Fer Diad's "forbfer", or serving man/attendant, introducing hierarchies into their relationship. I was surprised this wasn't in both, but I guess the whole thing is just so much less developed in TBC1, and most of the backstory there comes from Fer Diad's conversations with his charioteer rather than his dialogue with TBC2. I do want to go back and double check it, though, in case there's another related term that slipped my notice.

Conclusions

What is the second recension of the Táin about? Well, statistically, it's about relationships between people.

TBC2 cares a lot about fosterage and the friendships that go with it.

A phopa is the most common term of endearment in this recension.

Combinations of terms tell us more than just looking at terms in isolation.

Spreadsheets can be fun, I guess.

Beyond that, I don't know. I need to add more texts before I can draw more meaningful conclusions about changes over time. But I thought you might like to see where we're at, anyway.

Next up is probably Cath Ruis na Ríg, for vibes, although I also need to add Stowe to this spreadsheet in case it changes anything about TBC2 compared to LL.

[misseffect]

Hi this is from DAYS ago but for the wip tag can I hear about sol’s wedding please the formula 1 AU sounds so cool?? 🥺👉👈

hi!!! absolutely!!!!!!! You've picked the one with maybe the most backstory I'm afraid 😅

In sum: Sol and Nyreen are getting married (🥹) and Shepard is very conspicuously Not Invited.

A few months before the wedding, Shepard causes a crash during a race which almost kills Garrus. That's his rocket-to-the-face equivalent for this fic: he's trapped in his burning car, Shepard's trying to help put it out. All very dramatique.

Sol is (understandably) fuming about the crash and Shepard's part in it, hence the lack of invite.

Garrus has a nice day, looks hot doing it (that post-scars glow-up 🤌🤌) and sleeps with Sol's bridesmaid's sister.

Shepard stalks Tiran Kandros's Instagram and stews 🥲

Solana blocked Shepard on Instagram months ago, Nyreen's profile is private, and Garrus's online presence amounts to an email address and a PayPal account. Who else is there? She doesn't know any of Sol's fancy UN friends and Nyreen -

Wait.

By the time she's typed Tiran Ka- the autofill's done the rest - and there's something on his story. Bingo.

Even under amateur photography conditions, the wedding looks every inch as chic and expensive as Shepard expected - all fresh, outdoorsy greens and shades of off-white. She skims through his story: bridesmaids chatting between pictures, Castis's vintage Cipritine 152 parked under a sprawling tree, a massive wood-beamed room hung with flowers and lined with tables, and -

best man gang 🤙🤙

It's a selfie; Tiran has a lopsided smile and black square-ish sunglasses and, over his shoulder, Garrus is holding his phone to his good ear, grinning distractedly into the camera. They're both in those dark, bottle-green suits. She's gotta hand it to Sol: they look better on a body than they did on a hanger. Shepard can't even bring herself to hate the bow ties.

Ask me about more WIPs here!

[kawaiianimeredhead]

I can not stand filling out forms on my freaking phone uhh

[secretcupcakesublime]

Good practices Design for CSS Grid

Now that people are using the

CSS

Grid Layout for production seems to be asking a very common question which seems to be "What are the best practices?

" The short answer to the present problem is to use the tactic of layout as began within the specification.. The exact aspects of the standard you want to use, and also how you mix Grid with other methods of layout like

Flexbox

, depends on what works with the patterns you are trying to create and how you and your team choose to work with. Looking deeper, I think maybe this call for "best practices" shows a lack of faith in the use of a system of layout which is very different from what had happened before. Maybe it's a concern that we're using Grid for things it wasn't designed for, or not using Grid when we should be. Maybe it's a matter of worrying about supporting older browsers, or how Grid fits into our development workflow. In this article, I'm going to try to cover some of the things that could be described as best practices, and some things that you probably don't need to worry about. THE SURVEY In order to help inform this post and to make this article strong, I wanted to find out how others used the Grid Layout in production, what were the difficulties they faced, what did they really enjoy? I had common queries, problems, or methods used. I put together a short survey to find out, asking questions about how people used the Grid System, and in particular what they enjoyed most and what they found difficult. I will reference and quote some of those responses directly in the article that follows. I will also be linking to several other sites, where you can find out more about the mentioned techniques. There was, as it turned out, much more than one article worth reading. ACCESSIBILITY If you need to take caution when using any aspect of the Grid specification, it is when using something that might trigger material to be re-ordered:

“Authors must use order and the grid-placement properties only for visual, not logical, reordering of content. Style sheets that use these features to perform logical reordering are non-conforming.”  —

Grid Specification: Re-ordering and Accessibility

But this isn't special to Grid, the ability to rearrange content in two dimensions so quickly makes Grid a bigger challenge. However, if you use any approach that enables the material to be reordered — be it Grid, Flexbox, or even utter positioning — you need to be careful not to disconnect the visual experience from the structure of the material in the text. Screen readers (and people who only use a keyboard to move around the document) will be following the order of things in the source.

The areas where you need to be especially careful are when using flex-direction to reverse the order in Flexbox; the order property in Flexbox or Grid; any positioning of Grid objects using any method when moving objects in the document out of the logical order; and using the grid-auto-flow dense packing mode.

For more information on this issue, see the following resources:·      

Grid Layout and Accessibility - MDN

·      

Flexbox and the keyboard navigation disconnect

WHICH GRID METHOD SHOULD I USE?

”With so much choice in Grid, it was a challenge to stick to a consistent way of writing it (e.g. naming grid lines or not, defining grid-template-areas, fallbacks, media queries) so that it would be maintainable by the whole team.”  —

Michelle Barker

When you first look at Grid, so many different ways of constructing a layout may seem daunting. However, in the end, it all comes down to stuff being moved from one grid line to another. You have options depending on the structure you are attempting to accomplish, and what fits best for the team and the site you are creating.

There's no right or wrong path forward. Below, I'll pick up some of the confusion themes. In the previous article "Grid Gotchas and Stumbling Blocks," I've already addressed several other possible areas of uncertainty. DO I GET AN IMPLICIT OR GRID EXPLICIT?

The grid you create is known as the Explicit Grid, with grid-template-columns and grid-template-rows.

The Clear Grid allows the Grid to label lines and also gives you the ability to mark the grid's end line by -1.

You can use a Specific Grid to do each of these things, and in general when you have an all designed layout and know exactly where the grid lines will go, and the track size.

I most frequently use the Implicit Grid for row directions. I want the columns to be specified but then rows will be auto-sized and will expand to contain the material. To some degree, you can control the Implicit Grid with grid-auto-columns and grid-auto-rows, but you do have less power than if you specify anything. You need to determine whether you know exactly how much material you have, and also how many rows and columns you have, in which case you will construct a Specific Grid. If you don't know how much material you have but just want to build rows or columns to keep whatever is there, you'll use the Implicit Grid.

Nonetheless, the two can be mixed.

I have specified three columns in the Explicit Grid and three rows in the CSS below, so the first three rows of content will be as follows: a track of at least 200px in height but expanding to take content taller, A track fixed at 400px in height, A track of at least 300px in height (but expands).

Any additional content will go into a line created in the Implicit Grid, and I use the grid-auto-rows property to make those lines at least 300px wide, extending to auto.

.grid {  display: grid;  grid-template-columns: 2fr 6fr 2fr;  grid-template-rows: minmax(400px auto) 800px minmax(600px, auto);  grid-auto-rows: minmax(600px, auto);  grid-gap: 40px; }

TA Compact GRID WITH A Fixed NUMBER OF COLUMNS By using Repeat Notation, Autofill, and Minmax, you can construct a pattern of as many tracks as you can fit into a container, removing the need for Media Queries to some degree.

This technique can be found in this video tutorial, and also illustrated in my recent article "Using Media Queries For Responsive Design In 2018" along with similar ideas. Choose this technique if you're happy with content falling below earlier content when there's less room, and are happy to allow a lot of sizing versatility. You explicitly asked for the show of your columns with a minimum scale, and for auto-filling. There were a few comments in the survey that made me wonder if people really wanted a grid with a fixed number of columns to choose this form. If you end up with an arbitrary number of columns at some breakpoints, it may be easier to set the number of columns — and redefine them as required with media queries — instead of using auto-fill or auto-fit. WHY TRACK SIZING SHOULD I USE?

In my article "How Big Is That Box? I mentioned track sizing in detail. Understanding Sizing In Grid Layout, "however, I still get questions about which way to use track sizing. In particular, I get asked about the difference between the size of the percentage and the unit fr. If you only use the fr unit as specced, it varies from using a percentage because it distributes space available. If you place a larger object in a track then the way the fr operates until that track takes up more room and distributes what is left over.

.grid { display: grid; grid-template-columns: 2fr 2fr 2fr; grid-gap: 40px; }

To allow the fr unit to allocate all the space in the grid container you need to use minmax) (to give it a minimum size of 0.

.grid { display: grid; grid-template-columns: minmax(0,4fr) minmax(0,4fr) minmax(0,4fr); grid-gap: 40px; }

You may also choose to use fr in any of these scenarios: those where you want auto-based space distribution (the default behavior) and those where you want equal distribution. Usually, I will use the fr machine because it figures out the sizing for you and allows you to use set tracks or gaps. instead, the only time I use a percentage is when I add grid components to an existing layout which also uses other layout methods.

If I want to match my grid components with a float- or flex-based layout that uses percentages, using them in my grid layout means it is using the same scaling process

AUTO-PLACE ITEMS OR SET THEIR POSITION?

Sometimes, you will find that you only need to put one or two elements in your layout, and the rest is focused on the order of the content. This is really a very successful indicator that you didn't disconnect the source and visual display.

If items fall pretty much into auto-placement-based location then they are generally in good order.

However, once I have decided where everything is going, I tend to assign everything a position. That means I don't end up with strange things happening when someone adds something to the document and grid auto places it somewhere unexpected, thus throwing the layout out. If all is placed Grid will position the element in the next available empty grid cell.

That may not be exactly where you want it, but it's definitely easier to sat down at the end of your layout than to hop into the center and move other things around. WHAT SYSTEM POSITIONS TO USE?

Ultimately all that comes down to moving objects from one line to another while dealing with the Grid Style. Essentially, everything else is an aid to that.   Decide with your team if you want to name the lines, use Grid Template Areas, or use a mix of different layout styles. I find I like using Grid Template Areas especially for small components. There's no right or wrong th re, though. Find out what's best for you. GRID IN CONJUNCTION WITH OTHER LAYOUT MECHANISMS

Note that Grid Layout is not the only true layout system to control all of them, it's designed for a certain form of the layout — two-dimensional layout in particular. Many methods of the layout are still in place and you should understand any pattern and what fits it best.

In fact, I think this is very difficult for those of us who used to hack around with layout methods to make them do something they weren't really built for. Taking a step back, looking at the layout methods for the tasks they were built for, and trying to use them for those tasks, is a very good time.

No matter how much I write about Grid versus Flexbox, in particular, I'll be asked which one person should use. There are many patterns in which either method of layout makes perfect sense and it is really up to you. No one will yell at you for preferring Flexbox over Grid, or Grid over Flexbox.

For my own work, I prefer to use Flexbox for components where I want to strongly regulate their layout through the natural size of objects, effectively moving the other objects around. I do often use Flexbox as I want alignment because the Box Alignment properties can only be used in Flexbox and Grid. I may have a one-child element Flex container, so I can align that child.

An indication that Flexbox may not be the method of layout that I would prefer is when I start applying percentage widths to flex objects and setting flex-grow to 0. The reason to apply percentage widths to flex products is mostly that I'm trying to line them up in two dimensions (it's exactly what Grid is for to line things up in two dimensions). Try both though, and see which seems to better fit the style of content or design. Via that, you are unlikely to cause any problems.  NESTING GRID AND FLEX OBJECTS

This also comes up a lot, and having a Grid Element also a Grid Container is absolutely no problem, thus nesting one grid within another. With Flexbox, you can do the same, making both a Flex Element and Flex Container. You can also make a Grid Item and Flex Container or a Grid Container Flex Item — none of these items are a problem!

What we can't do at the moment is nest one grid inside another, and use the grid tracks that are specified on the parent overall. This will be very helpful, which is what the Grid Specification subgrid proposals in Level 2 aim to solve. A nested grid is currently transforming into a new grid so you'd need to be careful about sizing to ensure it aligns with any parent tracks.

You Can Have Multiple Grids On One Page A comment popped up a few times in the survey which surprised me, there seems to be an idea that a grid should be limited to the main layout, and that many grids on one page are maybe not a good thing. You can have any grid you want! Use the grid for big items and small things, only use the grid if it makes sense as a grid.

 FALLBACK AND OTHER OUTDATED BROWSERS

“Grid used in conjunction with @supports has enabled us to better control the number of layout variations we can expect to see. It has also worked really well with our progressive enhancement approach meaning we can reward those with modern browsers without preventing access to content to those not using the latest technology.”  —

Joe Lambert

working on

rareloop.com

Nonetheless, in the survey, several people listed older browsers, there was a fairly even split between those who thought it was difficult to help older browsers and those who thought it was simply due to feature queries and the fact that Grid overrides certain methods of the layout. In "Using CSS Grid: Supporting Browsers Without Framework," I've written extensively about the complexities of creating such fallbacks. In general, modern browsers are far more interoperable than their previous predecessors. We prefer to see far less real "browser bugs" and if you correctly use HTML and CSS, you can find that what you see in one browser is the same as in another.

Of course, we do have cases where one browser has not yet shipped support for a standard, or parts of a standard. With Grid, we were very lucky that, within a short time, the browsers shipped Grid Layout in a very complete and interoperable way. And our testing criteria appear to be comparing browsers with Grid and without Grid. You may have opted to use the -ms prefixed version in IE10 and IE11, which would then entail a third form of browser checking.

Browsers that support modern grid layout (not version IE) support feature queries as well. This means you can check the support for Grid before you use it.

TESTING BROWSERS THAT DON’T SUPPORT GRIDS

By using browser failbacks without Grid Layout support (or using the -ms prefixed version for IE10 and 11), you'll want to check how certain browsers render Grid Layout. You need a way to imagine your site in an example browser to do this.

I wouldn't take the approach of breaking your Function Question by searching anything nonsensical for support or misspelling the value list. This method will only work if your stylesheet is extremely simple, and within the function queries you've put absolutely everything to do with your Grid Layout. This is a very fragile and time-consuming way of working, particularly when you're using Grid extensively. Additionally, an older browser would not only lack support for the Grid Style, but other CSS properties will also be unsupported. If you're looking for "best practice," set up yourself to be in a good place to check your work is up there!

There are a few simple ways to set up a reliable system of checking the failbacks. The best option is to use a service such as BrowserStack — if you have a fairly good internet connection and don't mind paying a subscription fee — This is a program that allows websites (even those in progress on your computer) to be accessed on a whole host of actual browsers. BrowserStack does provide open-source projects with free accounts. My recommendation to check locally would be to use a Virtual Machine built with your target browser. Microsoft provides free downloads of Virtual Machine with IE versions back to IE8, and Edge as well. The older version of a plugin with no support for Grid can also be installed on the VM. To get a copy of Firefox 51 or below, for example. Be sure to turn off automatic updates after updating your older Firefox as explained here otherwise it will update itself quietly! You can then check your site on one VM in IE11 and in non-supporting Firefox (a much less vulnerable solution than values that are misspelled). It might take you an hour or so to get set up, but then you'll be in a really nice position UNLEARNING OLD HABITS

Many of the respondents to the survey discussed the need to unlearn old habits and how it would be easier for people who are completely new to CSS to learn Style. I prefer to go along. While experienced developers try hard to return the grid to a one-dimensional form of the layout when teaching people in person total beginners have no problem using Grid. I've seen attempts at "grid systems" using CSS Grid that add the requisite float or flex-based grid wrappers back in the row. Don't think about trying out new strategies. If you have the opportunity to check in a few browsers and remain aware of possible usability problems, then you can't really go too far wrong. And if you come across a perfect way to build a c “Grid Layout is the most exciting CSS development since media queries. It's been so well thought through for real-world developer needs and is an absolute joy to use in production - for designers and developers alike.”  —

Trys Mudford

working on

trysmudford.com

KEY POINTS: To end, here's a really short list of current best practices! If you have found things that work in your own case, or do not work well, add them to the comments.

Be very conscious of the possibility of reordering content. Check that the visual display isn't detached from the order of the text.

Test using a local or remote Virtual Machine with specific target browsers.

Do not forget older methods of the layout are still true and useful. To attain trends try different ways. Don't get stuck on using a grid.

Know that you are going to have a whole range of preconceptions as an accomplished front-end developer on how the interface works. Consider looking at these new approaches anew

As a reputed Software Solutions Developer we have expertise in providing dedicated remote and outsourced technical resources for software services at very nominal cost. Besides experts in full stacks We also build web solutions, mobile apps and work on system integration, performance enhancement, cloud migrations and big data analytics. Don’t hesitate to

get in touch with us!

[truemedian]

iOS 13 vs. Android 10: Which is more secure?

iOS 13's walled garden, or Android 10's open-source sandbox?  Jason Cipriani/CNET For years, iOS has maintained an iron grip on its reputation as the most secure mobile operating system, but Android 10's new granular controls over app permissions and increased efforts toward security updates are a noticeable improvement. Both Android 10 and iOS 13 (released Thursday) have new security features that up the ante by giving you more control over how often apps can access your location, ways to stop apps from scanning nearby Bluetooth and Wi-Fi networks to guess your location, and a new sign-in method for third-party apps. Here's how the two measure up. 

Updates

Winner: iOS 13When it comes to keeping your mobile device secure, your first and easiest line of defense is to keep your OS up to date. This defense alone, as Kaspersky Labs notes, can stop entire families of malware in their tracks. When it comes to getting updates from the mothership to your palm, Apple still maintains the kind of control over its manufacturing chain, carrier network contracts and underlying code to make it happen quickly and effectively. While some users still uphold the tradition of complaining about iOS' notorious lack of customization, Apple's highly patrolled walled garden has also ensured iPhone users largely stay ahead of malware without having to think about it.A hopeful sign, however, came for security-minded Android fans in May, when Google Senior Director for Android Stephanie Cuthbertson told Google I/O attendees that Android security updates will finally be automated. "Your Android device gets regular security updates already, but you still have to wait for the release and you have to reboot when they come. We want you to get these faster," she said. The process will happen in the background much like Google updates its apps, and will no longer require you to reboot your phone. While it's great to hear Android security modules will get updates even if your OS isn't, that still doesn't solve Google's enormous problem with delayed OS updates. Manufacturers and carrier networks release their own customized versions of Android on their own schedule (often not at all), meaning people generally aren't updating their Android phones. With surges in mobile malware in the Google Play Store, Google's moves to push security updates couldn't come sooner. But letting AT&T or Verizon stall on giving your OS an update is the tradeoff Google made long ago in exchange for a dominant US market share that's now eroding as people flee from escalating security threats. 

Permission control 

Winner: Android 10 Outside of keeping your OS updated, the biggest threat to your mobile security comes from apps that demand excessive permissions to access your phone's data -- and then leak it. While the velvet rope of the strictly controlled App Store is largely credited with keeping out the malware riff-raff that affects a disproportionate number of Android users, iPhone users are not immune to attacks. Just this June, researchers from Positive Technologies found more iOS apps than Android apps had security weaknesses. In August, after taking a year-long beating in the press for pervasive malware in its Play Store, Google got to push back when it found security flaws in the iPhone which it said let websites hack away for years. But iOS 13's mandatory privacy tool, Sign In, goes a long way to help Apple save face and maintain its reputation. The security feature uses your Apple ID, not your email address, to verify your credentials while logging into your apps. It also means no more using Facebook to log into a shady-looking quiz you found online, and no more creating fake email addresses to try new services (Sign In will create a throwaway for you). But Android 10 isn't out of the race here. It's got an entirely new dedicated Privacy section in its Settings app where you can monitor and then block permission requests from any app. Why does Facebook need your location data? It doesn't. Permission denied. Previously, tracking Android app permissions was frustratingly difficult. But a one-click reject button for each item in a condensed list? That's the kind of control I want if I'm working in Google's open-source playground. Not-quite-buried in the new Android 10 menu is the Advanced section. The intuitive grouping puts common security concerns in one place to control instead of spread out across multiple menus: Lock screen information display, Google's Autofill service, Activity information and how you want your device to handle advertising requests. While this control over permissions is an improvement, malware apps with no permissions are still able to piggyback on other apps you've afforded permissions. That alone led researchers in July to discover more than 1,000 apps in Google Play Store stealing users' data. It begs the question: How good are Android 10's permission controls if Google Play Store apps are the problem?

Geotracking

Winner: Android 10 Another privacy boost for both OSes comes in the form of new location-blocking options.iOS 13 graciously offers the option of sharing photos without sharing your location data. The option to strip private location data from a photo while in the Photos app means each picture no longer leaves a data trail when it makes its way across social media, email or messages -- all while the photo can still be geotagged privately. And the process is simple: Select a photo (or photos) you want to share in the Photos app, then tap on Options at the top of the screen and turn off Location under the section labeled Include.Android 10 is on par. To strip location data prior to sharing a photo, go to your Android phone's Photos app, tap the menu and select Settings, then tap Remove geo location. Android 10 is making its own strides here, though. While previous versions only allowed you to say yes or no to an app's location request, Android 10 is taking a more granular approach to geolocation controls. Now you'll have three options: Deny permissions, accept them, or let an app access your location information only while you're actively using the app. 

No more Bluetooth sniffing 

Winner: TieOnce you turn off permissions for an app to access your location via GPS, it can still start sniffing around for Bluetooth and Wi-Fi signals. Once it finds them, it can quickly parse out your location. Worse yet, Bluetooth is increasingly becoming a vulnerability, as smart home connections outpace security fixes. Thankfully, both Android 10 and iOS 13 offer you control over which apps are allowed to sniff out Wi-Fi and Bluetooth signals nearby. 

Bonus round

Winner: iOS 13On the surface it might seem like a novelty built around the need for a social convenience, but Android 10's Wi-Fi password feature could be a great security measure. The new feature lets you create a QR code for your Wi-Fi network that your guests can scan to join it. Make your password as strong as you can, and never worry about forgetting it or having to slowly spell it out for your friends. But Apple wins the bonus round in a landslide, thanks to iOS 13's expanded HomeKit security features, created now that its smart home platform HomeKit is gaining support for secure routers and encrypted home-security cameras. You want control over whether your smart fridge is talking to your other appliances? You got it. The potential for a culinary mutiny aside, bulkheading your data is the best way to shore up security. The crown jewel here for Apple fans is that HomeKit cameras will soon have encrypted video capabilities and iCloud storage, and all HomeKit Secure Video that gets uploaded will be encrypted. We could have used that technology back in January.

$899

CNET may get a commission from retail offers. Read More Read the full article

[easyweight101]

Neuro Clarity Review: Don’t Buy Before You Read This!

What is it?

Neuro Clarity is an all-natural supplement that boosts cognitive function. This product also provides users with reduced stress and anxiety with use.

Neuro Clarity is made using a blend of holistic ingredients designed to improve brain function without any stimulants. Neuro Clarity says it safely helps the brain become more efficient, improving memory, focus and more.

As far as mental support goes, Memotenz is the best supplement for bringing users the improved performance and cognitive effects that users are looking for in a daily pill. Click here for a closer look at what makes Memotenz so unique.

Do You Know the Best Brain Enhancement Supplements of 2017?

Neuro Clarity Ingredients and Side Effects

The Neuro Clarity website has provided a list of ingredients used to make this product. Here’s a quick glimpse as to what you can expect to find within the formulation:

St. John’s Wort Glutamine Phosphatidylserine Acetyl-L-Carnitine DMAE Bacopa Monnieri Gingko Biloba Vinpocetine

St. John’s Wort: A plant that has long been used medicinally, St. John’s Wort may be effective in treating some forms of depression, by increasing serotonin levels in the brain.

Glutamine: An amino acid produced naturally by the body. Glutamine is used to protect the health of the immune system, as well as improve mood, reduce anxiety and depression and improve athletic performance.

Phosphatidylserine: A substance found in all cells in the human body, this ingredient is used to treat Alzheimer’s disease, age-related memory loss and cognitive decline, ADHD and may help improve athletic performance.

Side effects may include insomnia and an upset stomach.

Acetyl-L-Carnitine: An amino acid found in the body, ALC is used to treat a variety of mental health concerns such as depression, memory loss, anxiety, Alzheimer’s disease and more. ALC is also key in helping the body produce energy, and maintaining a healthy heart and brain.

DMAE: A chemical used in the production of another chemical called acetylcholine, which is essential in helping brain cells communicate. DMAE may improve red blood cells function, ADHD, memory, mood and more.

Vinpocetine: A chemical substance used in the treatment of Alzheimer’s disease, dementia, and cognitive decline resulting from aging. Vinpocetine is also used to reduce brain damage resulting from stroke, or improving short term memory in healthy users.

Side effects may include upset stomach, nausea, sleeping problems, flushed skin, nervousness and headache.

Gingko Biloba: A supplement used to boost memory and sharpen the mind, gingko biloba has long been used in Chinese medicine, and is thought to boost blood flow to the brain.

Bacopa Monnieri: An herb used in traditional Indian medicine, bacopa is thought to improve memory and cognition, as well as treat and prevent symptoms of Alzheimer’s disease.

Click here for a look at the best nootropics, herbs and more for improving focus without the crash.

EDITOR’S TIP: Combine this product with a proven brain enhancement supplement such as Memotenz for better results.

Neuro Clarity Quality of Ingredients

The ingredient profile of Neuro Clarity looks pretty good. The supplement contains a well-rounded blend of ingredients with few side effects associated with use.

We like that this product contains ingredients like bacopa monnieri, St. John’s Wort and gingko biloba, and even phosphatidylserine and vinpocetine have minimal side effects and should be safe for most users.

The one concern we have about this product, is, there’s no official website, just the Amazon profile. While the label is posted online ad can easily be accessed, we don’t know if this product has undergone any form of clinical testing, and users will need to count on consumer reviews to get a sense of whether it’s safe or not.

Get the expert guide to the supplements that can give you the mental edge you need to power through the day.

The Price and Quality of Neuro Clarity

Neuro Clarity is sold on Amazon for $19.99, for a bottle containing 60 servings. If you decide to enroll in the ‘subscribe and save’ program, you can save a dollar per bottle. The savings seem a bit too minimal to warrant any automatic shipping, but some users may find it convenient.

Plus, the fact this is sold through Amazon offers more protection for consumers who may end up opting out of the subscription service.

There’s no official website for Neuro Clarity, so it looks like Amazon may be the only option for orders at this time. The company that makes this product offers a 100% satisfaction guarantee and free shipping to Prime customers.

Keep your brain running at full capacity. Click this link to learn more.

Business of Neuro Clarity

The business behind Neuro Clarity is known as Nutrition Essentials, and they have not provided any contact information to new or existing customers.

Aside from the Amazon page, there’s no clear way to get in touch with this company, and upon running a Google search, several unrelated results come up, due to the incredibly vague brand name.

Because we don’t know much about the company that makes Neuro Clarity, we don’t have a good sense of whether or not the product has been tested for efficacy and safety, we don’t know if the information on the label is accurate or anything else.

But, this product does have over 6,500 reviews posted on Amazon, which demonstrates some level of legitimacy. Many of those reviews are positive, so users are likely safe taking this product. It’s just a good reminder that users should do some research before purchasing a new supplement, and consult with their doctor if there are any concerns.

EDITOR’S TIP: For the best results, our experts recommend using brain enhancement supplements for at least 3 months. Save your money by buying a few bottles at once.

Customer Opinions of Neuro Clarity

There are a number of positive reviews on Amazon for Neuro Clarity, most claim this product hasn’t dramatically improved their brain function, but many users feel that recall and focus have been improved. Here’s a look at some of the many reviews we sifted through:

“I have not noticed anything major, but I’m able to rely less on autofill settings on my various gadgets and can recall my passwords. I don’t notice much else, but I think it’s doing something good.”

“This product helps me focus on running my business. Started taking his recently and ordered a year’s worth of product to save a few bucks. No crazy changes, but it helps with the brain fog for sure.”

“This product made my head hurt after the first few doses, and I was kind of tired. A week later, I noticed things got a little clearer. Patience is key, I think it’s helping improve my memory.”

“The pills are super hard to swallow. It’s helped me focus on work, as well as with my anxiety. I don’t think I’ll keep taking it because of the pill size, but it definitely does something.”

It doesn’t seem like Neuro Clarity offers users the kind of sweeping changes to their productivity or really battles severe cognitive decline, but the amount of people that like this product is really telling. More than half of the users reviews come from verified purchases, as well, so there isn’t the issue of the Amazon page being overrun with paid reviews.

We’ve put together an expert guide to the pills that best boost memory, cognition and mood, click to learn more.

Conclusion – Does Neuro Clarity Work?

Taking a closer look at Neuro Clarity, it seems this product could be beneficial to a wide range of people. Particularly healthy individuals who are looking for a boost when it comes to focus on work or school, as well as the ability to recall certain details like passwords or where they set down their keys.

Some people also claim this product improved issues like anxiety or improved their overall mood and well-being. Based on the information we found, it’s clear this isn’t for people with Alzheimer’s, serious depression or severe anxiety or ADHD. Those experiencing these problems will need to find another type of treatment that more aggressively addresses these issues.

One thing we did not like about Neuro Clarity was, there’s no official webpage detailing things like clinical trials or even providing a direct line of communication from seller to consumer. While the major presence on Amazon seems to help Nutrition Essentials find a way around this problem, and users can be comforted by the fact that such a large amount of users have also tried this product.

Overall, we think Neuro Clarity could be a good choice, but everyone’s brain is different and what works well for one person, may not be the best choice for you. The effects of Neuro Clarity seem to be subtle, but there. If you’re looking for something more effective, medication or a stronger nootropic may be a better option.

We’ve reviewed a wide range of supplements before discovering Memotenz best addresses the mental concerns many of us have when faced with growing older. With its natural formulation of gingko biloba, St. John’s Wort and bacopa monnieri, this product gives users improved thinking, recall and cognitive function with daily use.

The makers of Memotenz operate under strict FDA-guidelines to ensure they are putting out the best supplement possible. Click here for a deeper look into why Memotenz is the best solution on the market.

from Easy Weight Loss 101 http://ift.tt/2ouBnvz via The Best Weight Loss Diet In The World

[secretcupcakesublime]

Good practices Design for CSS Grid

Now that people are using the CSS Grid Layout for production seems to be asking a very common question which seems to be "What are the best practices?

"The short answer to the present problem is to use the tactic of layout as began within the specification.. The exact aspects of the standard you want to use, and also how you mix Grid with other methods of layout like Flexbox, depends on what works with the patterns you are trying to create and how you and your team choose to work with. Looking deeper, I think maybe this call for "best practices" shows a lack of faith in the use of a system of layout which is very different from what had happened before. Maybe it's a concern that we're using Grid for things it wasn't designed for, or not using Grid when we should be. Maybe it's a matter of worrying about supporting older browsers, or how Grid fits into our development workflow. In this article, I'm going to try to cover some of the things that could be described as best practices, and some things that you probably don't need to worry about. THE SURVEY In order to help inform this post and to make this article strong, I wanted to find out how others used the Grid Layout in production, what were the difficulties they faced, what did they really enjoy? I had common queries, problems, or methods used. I put together a short survey to find out, asking questions about how people used the Grid System, and in particular what they enjoyed most and what they found difficult. I will reference and quote some of those responses directly in the article that follows. I will also be linking to several other sites, where you can find out more about the mentioned techniques. There was, as it turned out, much more than one article worth reading. ACCESSIBILITY If you need to take caution when using any aspect of the Grid specification, it is when using something that might trigger material to be re-ordered:“Authors must use order and the grid-placement properties only for visual, not logical, reordering of content. Style sheets that use these features to perform logical reordering are non-conforming.”  —

Grid Specification: Re-ordering and Accessibility

But this isn't special to Grid, the ability to rearrange content in two dimensions so quickly makes Grid a bigger challenge. However, if you use any approach that enables the material to be reordered — be it Grid, Flexbox, or even utter positioning — you need to be careful not to disconnect the visual experience from the structure of the material in the text. Screen readers (and people who only use a keyboard to move around the document) will be following the order of things in the source.

The areas where you need to be especially careful are when using flex-direction to reverse the order in Flexbox; the order property in Flexbox or Grid; any positioning of Grid objects using any method when moving objects in the document out of the logical order; and using the grid-auto-flow dense packing mode.

For more information on this issue, see the following resources:·      

Grid Layout and Accessibility - MDN

·      

Flexbox and the keyboard navigation disconnect

WHICH GRID METHOD SHOULD I USE?”With so much choice in Grid, it was a challenge to stick to a consistent way of writing it (e.g. naming grid lines or not, defining grid-template-areas, fallbacks, media queries) so that it would be maintainable by the whole team.”  —

Michelle Barker

When you first look at Grid, so many different ways of constructing a layout may seem daunting. However, in the end, it all comes down to stuff being moved from one grid line to another. You have options depending on the structure you are attempting to accomplish, and what fits best for the team and the site you are creating.

There's no right or wrong path forward. Below, I'll pick up some of the confusion themes. In the previous article "Grid Gotchas and Stumbling Blocks," I've already addressed several other possible areas of uncertainty. DO I GET AN IMPLICIT OR GRID EXPLICIT?

The grid you create is known as the Explicit Grid, with grid-template-columns and grid-template-rows.

The Clear Grid allows the Grid to label lines and also gives you the ability to mark the grid's end line by -1. You can use a Specific Grid to do each of these things, and in general when you have an all designed layout and know exactly where the grid lines will go, and the track size.

I most frequently use the Implicit Grid for row directions. I want the columns to be specified but then rows will be auto-sized and will expand to contain the material. To some degree, you can control the Implicit Grid with grid-auto-columns and grid-auto-rows, but you do have less power than if you specify anything. You need to determine whether you know exactly how much material you have, and also how many rows and columns you have, in which case you will construct a Specific Grid. If you don't know how much material you have but just want to build rows or columns to keep whatever is there, you'll use the Implicit Grid.

Nonetheless, the two can be mixed.

I have specified three columns in the Explicit Grid and three rows in the CSS below, so the first three rows of content will be as follows: a track of at least 200px in height but expanding to take content taller, A track fixed at 400px in height, A track of at least 300px in height (but expands).

Any additional content will go into a line created in the Implicit Grid, and I use the grid-auto-rows property to make those lines at least 300px wide, extending to auto.

.grid {  display: grid;  grid-template-columns: 2fr 6fr 2fr;  grid-template-rows: minmax(400px auto) 800px minmax(600px, auto);  grid-auto-rows: minmax(600px, auto);  grid-gap: 40px; }

TA Compact GRID WITH A Fixed NUMBER OF COLUMNS By using Repeat Notation, Autofill, and Minmax, you can construct a pattern of as many tracks as you can fit into a container, removing the need for Media Queries to some degree. This technique can be found in this video tutorial, and also illustrated in my recent article "Using Media Queries For Responsive Design In 2018" along with similar ideas. Choose this technique if you're happy with content falling below earlier content when there's less room, and are happy to allow a lot of sizing versatility. You explicitly asked for the show of your columns with a minimum scale, and for auto-filling. There were a few comments in the survey that made me wonder if people really wanted a grid with a fixed number of columns to choose this form. If you end up with an arbitrary number of columns at some breakpoints, it may be easier to set the number of columns — and redefine them as required with media queries — instead of using auto-fill or auto-fit. WHY TRACK SIZING SHOULD I USE?

In my article "How Big Is That Box? I mentioned track sizing in detail. Understanding Sizing In Grid Layout, "however, I still get questions about which way to use track sizing. In particular, I get asked about the difference between the size of the percentage and the unit fr. If you only use the fr unit as specced, it varies from using a percentage because it distributes space available. If you place a larger object in a track then the way the fr operates until that track takes up more room and distributes what is left over.

.grid { display: grid; grid-template-columns: 2fr 2fr 2fr; grid-gap: 40px; }

To allow the fr unit to allocate all the space in the grid

container you need to use minmax) (to give it a minimum size of 0.

.grid { display: grid; grid-template-columns: minmax(0,4fr) minmax(0,4fr) minmax(0,4fr); grid-gap: 40px; }

You may also choose to use fr in any of these scenarios: those where you want auto-based space distribution (the default behavior) and those where you want equal distribution. Usually, I will use the fr machine because it figures out the sizing for you and allows you to use set tracks or gaps. instead, the only time I use a percentage is when I add grid components to an existing layout which also uses other layout methods.

If I want to match my grid components with a float- or flex-based layout that uses percentages, using them in my grid layout means it is using the same scaling process

AUTO-PLACE ITEMS OR SET THEIR POSITION?Sometimes, you will find that you only need to put one or two elements in your layout, and the rest is focused on the order of the content. This is really a very successful indicator that you didn't disconnect the source and visual display. If items fall pretty much into auto-placement-based location then they are generally in good order.

However, once I have decided where everything is going, I tend to assign everything a position. That means I don't end up with strange things happening when someone adds something to the document and grid auto places it somewhere unexpected, thus throwing the layout out. If all is placed Grid will position the element in the next available empty grid cell.

That may not be exactly where you want it, but it's definitely easier to sat down at the end of your layout than to hop into the center and move other things around. WHAT SYSTEM POSITIONS TO USE?Ultimately all that comes down to moving objects from one line to another while dealing with the Grid Style. Essentially, everything else is an aid to that.  Decide with your team if you want to name the lines, use Grid Template Areas, or use a mix of different layout styles. I find I like using Grid Template Areas especially for small components. There's no right or wrong th re, though. Find out what's best for you. GRID IN CONJUNCTION WITH OTHER LAYOUT MECHANISMSNote that Grid Layout is not the only true layout system to control all of them, it's designed for a certain form of the layout — two-dimensional layout in particular. Many methods of the layout are still in place and you should understand any pattern and what fits it best. In fact, I think this is very difficult for those of us who used to hack around with layout methods to make them do something they weren't really built for. Taking a step back, looking at the layout methods for the tasks they were built for, and trying to use them for those tasks, is a very good time.

No matter how much I write about Grid versus Flexbox, in particular, I'll be asked which one person should use. There are many patterns in which either method of layout makes perfect sense and it is really up to you. No one will yell at you for preferring Flexbox over Grid, or Grid over Flexbox.

For my own work, I prefer to use Flexbox for components where I want to strongly regulate their layout through the natural size of objects, effectively moving the other objects around. I do often use Flexbox as I want alignment because the Box Alignment properties can only be used in Flexbox and Grid. I may have a one-child element Flex container, so I can align that child.

An indication that Flexbox may not be the method of layout that I would prefer is when I start applying percentage widths to flex objects and setting flex-grow to 0. The reason to apply percentage widths to flex products is mostly that I'm trying to line them up in two dimensions (it's exactly what Grid is for to line things up in two dimensions). Try both though, and see which seems to better fit the style of content or design. Via that, you are unlikely to cause any problems.  NESTING GRID AND FLEX OBJECTS

This also comes up a lot, and having a Grid Element also a Grid Container is absolutely no problem, thus nesting one grid within another. With Flexbox, you can do the same, making both a Flex Element and Flex Container. You can also make a Grid Item and Flex Container or a Grid Container Flex Item — none of these items are a problem!

What we can't do at the moment is nest one grid inside another, and use the grid tracks that are specified on the parent overall. This will be very helpful, which is what the Grid Specification subgrid proposals in Level 2 aim to solve. A nested grid is currently transforming into a new grid so you'd need to be careful about sizing to ensure it aligns with any parent tracks.

You Can Have Multiple Grids On One Page A comment popped up a few times in the survey which surprised me, there seems to be an idea that a grid should be limited to the main layout, and that many grids on one page are maybe not a good thing. You can have any grid you want! Use the grid for big items and small things, only use the grid if it makes sense as a grid.

FALLBACK AND OTHER OUTDATED BROWSERS

“Grid used in conjunction with @supports has enabled us to better control the number of layout variations we can expect to see. It has also worked really well with our progressive enhancement approach meaning we can reward those with modern browsers without preventing access to content to those not using the latest technology.”  —

Joe Lambert

working on

rareloop.com

Nonetheless, in the survey, several people listed older browsers, there was a fairly even split between those who thought it was difficult to help older browsers and those who thought it was simply due to feature queries and the fact that Grid overrides certain methods of the layout. In "Using CSS Grid: Supporting Browsers Without Framework," I've written extensively about the complexities of creating such fallbacks. In general, modern browsers are far more interoperable than their previous predecessors. We prefer to see far less real "browser bugs" and if you correctly use HTML and CSS, you can find that what you see in one browser is the same as in another.

Of course, we do have cases where one browser has not yet shipped support for a standard, or parts of a standard. With Grid, we were very lucky that, within a short time, the browsers shipped Grid Layout in a very complete and interoperable way. And our testing criteria appear to be comparing browsers with Grid and without Grid. You may have opted to use the -ms prefixed version in IE10 and IE11, which would then entail a third form of browser checking.

Browsers that support modern grid layout (not version IE) support feature queries as well. This means you can check the support for Grid before you use it.

TESTING BROWSERS THAT DON’T SUPPORT GRIDS By using browser failbacks without Grid Layout support (or using the -ms prefixed version for IE10 and 11), you'll want to check how certain browsers render Grid Layout. You need a way to imagine your site in an example browser to do this.

I wouldn't take the approach of breaking your Function Question by searching anything nonsensical for support or misspelling the value list. This method will only work if your stylesheet is extremely simple, and within the function queries you've put absolutely everything to do with your Grid Layout. This is a very fragile and time-consuming way of working, particularly when you're using Grid extensively. Additionally, an older browser would not only lack support for the Grid Style, but other CSS properties will also be unsupported. If you're looking for "best practice," set up yourself to be in a good place to check your work is up there!

There are a few simple ways to set up a reliable system of checking the failbacks. The best option is to use a service such as BrowserStack — if you have a fairly good internet connection and don't mind paying a subscription fee — This is a program that allows websites (even those in progress on your computer) to be accessed on a whole host of actual browsers. BrowserStack does provide open-source projects with free accounts. My recommendation to check locally would be to use a Virtual Machine built with your target browser. Microsoft provides free downloads of Virtual Machine with IE versions back to IE8, and Edge as well. The older version of a plugin with no support for Grid can also be installed on the VM. To get a copy of Firefox 51 or below, for example. Be sure to turn off automatic updates after updating your older Firefox as explained here otherwise it will update itself quietly! You can then check your site on one VM in IE11 and in non-supporting Firefox (a much less vulnerable solution than values that are misspelled). It might take you an hour or so to get set up, but then you'll be in a really nice position UNLEARNING OLD HABITSMany of the respondents to the survey discussed the need to unlearn old habits and how it would be easier for people who are completely new to CSS to learn Style. I prefer to go along. While experienced developers try hard to return the grid to a one-dimensional form of the layout when teaching people in person total beginners have no problem using Grid. I've seen attempts at "grid systems" using CSS Grid that add the requisite float or flex-based grid wrappers back in the row. Don't think about trying out new strategies. If you have the opportunity to check in a few browsers and remain aware of possible usability problems, then you can't really go too far wrong. And if you come across a perfect way to build a c “Grid Layout is the most exciting CSS development since media queries. It's been so well thought through for real-world developer needs and is an absolute joy to use in production - for designers and developers alike.”  —

Trys Mudford

working on

trysmudford.com

KEY POINTS: To end, here's a really short list of current best practices! If you have found things that work in your own case, or do not work well, add them to the comments.

Be very conscious of the possibility of reordering content. Check that the visual display isn't detached from the order of the text.

Test using a local or remote Virtual Machine with specific target browsers.Do not forget older methods of the layout are still true and useful. To attain trends try different ways. Don't get stuck on using a grid.

Know that you are going to have a whole range of preconceptions as an accomplished front-end developer on how the interface works. Consider looking at these new approaches anew

As a reputed Software Solutions Developer we have expertise in providing dedicated remote and outsourced technical resources for software services at very nominal cost. Besides experts in full stacks We also build web solutions, mobile apps and work on system integration, performance enhancement, cloud migrations and big data analytics. Don’t hesitate to

get in touch with us!

Source:

whizzystack.co

#b2b ecommerce

#b2b content marketing

#Ecommerce

[technicallyelegantruins]

Good practices Design for CSS Grid

Now that people are using the CSS Grid Layout for production seems to be asking a very common question which seems to be "What are the best practices?

"The short answer to the present problem is to use the tactic of layout as began within the specification.. The exact aspects of the standard you want to use, and also how you mix Grid with other methods of layout like Flexbox, depends on what works with the patterns you are trying to create and how you and your team choose to work with. Looking deeper, I think maybe this call for "best practices" shows a lack of faith in the use of a system of layout which is very different from what had happened before. Maybe it's a concern that we're using Grid for things it wasn't designed for, or not using Grid when we should be. Maybe it's a matter of worrying about supporting older browsers, or how Grid fits into our development workflow. In this article, I'm going to try to cover some of the things that could be described as best practices, and some things that you probably don't need to worry about. THE SURVEY In order to help inform this post and to make this article strong, I wanted to find out how others used the Grid Layout in production, what were the difficulties they faced, what did they really enjoy? I had common queries, problems, or methods used. I put together a short survey to find out, asking questions about how people used the Grid System, and in particular what they enjoyed most and what they found difficult. I will reference and quote some of those responses directly in the article that follows. I will also be linking to several other sites, where you can find out more about the mentioned techniques. There was, as it turned out, much more than one article worth reading. ACCESSIBILITY If you need to take caution when using any aspect of the Grid specification, it is when using something that might trigger material to be re-ordered:“Authors must use order and the grid-placement properties only for visual, not logical, reordering of content. Style sheets that use these features to perform logical reordering are non-conforming.”  —

Grid Specification: Re-ordering and Accessibility

But this isn't special to Grid, the ability to rearrange content in two dimensions so quickly makes Grid a bigger challenge. However, if you use any approach that enables the material to be reordered — be it Grid, Flexbox, or even utter positioning — you need to be careful not to disconnect the visual experience from the structure of the material in the text. Screen readers (and people who only use a keyboard to move around the document) will be following the order of things in the source.

The areas where you need to be especially careful are when using flex-direction to reverse the order in Flexbox; the order property in Flexbox or Grid; any positioning of Grid objects using any method when moving objects in the document out of the logical order; and using the grid-auto-flow dense packing mode.

For more information on this issue, see the following resources:·      

Grid Layout and Accessibility - MDN

·      

Flexbox and the keyboard navigation disconnect

WHICH GRID METHOD SHOULD I USE?”With so much choice in Grid, it was a challenge to stick to a consistent way of writing it (e.g. naming grid lines or not, defining grid-template-areas, fallbacks, media queries) so that it would be maintainable by the whole team.”  —

Michelle Barker

When you first look at Grid, so many different ways of constructing a layout may seem daunting. However, in the end, it all comes down to stuff being moved from one grid line to another. You have options depending on the structure you are attempting to accomplish, and what fits best for the team and the site you are creating.

There's no right or wrong path forward. Below, I'll pick up some of the confusion themes. In the previous article "Grid Gotchas and Stumbling Blocks," I've already addressed several other possible areas of uncertainty. DO I GET AN IMPLICIT OR GRID EXPLICIT?

The grid you create is known as the Explicit Grid, with grid-template-columns and grid-template-rows.

The Clear Grid allows the Grid to label lines and also gives you the ability to mark the grid's end line by -1. You can use a Specific Grid to do each of these things, and in general when you have an all designed layout and know exactly where the grid lines will go, and the track size.

I most frequently use the Implicit Grid for row directions. I want the columns to be specified but then rows will be auto-sized and will expand to contain the material. To some degree, you can control the Implicit Grid with grid-auto-columns and grid-auto-rows, but you do have less power than if you specify anything. You need to determine whether you know exactly how much material you have, and also how many rows and columns you have, in which case you will construct a Specific Grid. If you don't know how much material you have but just want to build rows or columns to keep whatever is there, you'll use the Implicit Grid.

Nonetheless, the two can be mixed.

I have specified three columns in the Explicit Grid and three rows in the CSS below, so the first three rows of content will be as follows: a track of at least 200px in height but expanding to take content taller, A track fixed at 400px in height, A track of at least 300px in height (but expands).

Any additional content will go into a line created in the Implicit Grid, and I use the grid-auto-rows property to make those lines at least 300px wide, extending to auto.

.grid {  display: grid;  grid-template-columns: 2fr 6fr 2fr;  grid-template-rows: minmax(400px auto) 800px minmax(600px, auto);  grid-auto-rows: minmax(600px, auto);  grid-gap: 40px; }

TA Compact GRID WITH A Fixed NUMBER OF COLUMNS By using Repeat Notation, Autofill, and Minmax, you can construct a pattern of as many tracks as you can fit into a container, removing the need for Media Queries to some degree. This technique can be found in this video tutorial, and also illustrated in my recent article "Using Media Queries For Responsive Design In 2018" along with similar ideas. Choose this technique if you're happy with content falling below earlier content when there's less room, and are happy to allow a lot of sizing versatility. You explicitly asked for the show of your columns with a minimum scale, and for auto-filling. There were a few comments in the survey that made me wonder if people really wanted a grid with a fixed number of columns to choose this form. If you end up with an arbitrary number of columns at some breakpoints, it may be easier to set the number of columns — and redefine them as required with media queries — instead of using auto-fill or auto-fit. WHY TRACK SIZING SHOULD I USE?

In my article "How Big Is That Box? I mentioned track sizing in detail. Understanding Sizing In Grid Layout, "however, I still get questions about which way to use track sizing. In particular, I get asked about the difference between the size of the percentage and the unit fr. If you only use the fr unit as specced, it varies from using a percentage because it distributes space available. If you place a larger object in a track then the way the fr operates until that track takes up more room and distributes what is left over.

.grid { display: grid; grid-template-columns: 2fr 2fr 2fr; grid-gap: 40px; }

To allow the fr unit to allocate all the space in the grid

container you need to use minmax) (to give it a minimum size of 0.

.grid { display: grid; grid-template-columns: minmax(0,4fr) minmax(0,4fr) minmax(0,4fr); grid-gap: 40px; }

You may also choose to use fr in any of these scenarios: those where you want auto-based space distribution (the default behavior) and those where you want equal distribution. Usually, I will use the fr machine because it figures out the sizing for you and allows you to use set tracks or gaps. instead, the only time I use a percentage is when I add grid components to an existing layout which also uses other layout methods.

If I want to match my grid components with a float- or flex-based layout that uses percentages, using them in my grid layout means it is using the same scaling process

AUTO-PLACE ITEMS OR SET THEIR POSITION?Sometimes, you will find that you only need to put one or two elements in your layout, and the rest is focused on the order of the content. This is really a very successful indicator that you didn't disconnect the source and visual display. If items fall pretty much into auto-placement-based location then they are generally in good order.

However, once I have decided where everything is going, I tend to assign everything a position. That means I don't end up with strange things happening when someone adds something to the document and grid auto places it somewhere unexpected, thus throwing the layout out. If all is placed Grid will position the element in the next available empty grid cell.

That may not be exactly where you want it, but it's definitely easier to sat down at the end of your layout than to hop into the center and move other things around. WHAT SYSTEM POSITIONS TO USE?Ultimately all that comes down to moving objects from one line to another while dealing with the Grid Style. Essentially, everything else is an aid to that.  Decide with your team if you want to name the lines, use Grid Template Areas, or use a mix of different layout styles. I find I like using Grid Template Areas especially for small components. There's no right or wrong th re, though. Find out what's best for you. GRID IN CONJUNCTION WITH OTHER LAYOUT MECHANISMSNote that Grid Layout is not the only true layout system to control all of them, it's designed for a certain form of the layout — two-dimensional layout in particular. Many methods of the layout are still in place and you should understand any pattern and what fits it best. In fact, I think this is very difficult for those of us who used to hack around with layout methods to make them do something they weren't really built for. Taking a step back, looking at the layout methods for the tasks they were built for, and trying to use them for those tasks, is a very good time.

No matter how much I write about Grid versus Flexbox, in particular, I'll be asked which one person should use. There are many patterns in which either method of layout makes perfect sense and it is really up to you. No one will yell at you for preferring Flexbox over Grid, or Grid over Flexbox.

For my own work, I prefer to use Flexbox for components where I want to strongly regulate their layout through the natural size of objects, effectively moving the other objects around. I do often use Flexbox as I want alignment because the Box Alignment properties can only be used in Flexbox and Grid. I may have a one-child element Flex container, so I can align that child.

An indication that Flexbox may not be the method of layout that I would prefer is when I start applying percentage widths to flex objects and setting flex-grow to 0. The reason to apply percentage widths to flex products is mostly that I'm trying to line them up in two dimensions (it's exactly what Grid is for to line things up in two dimensions). Try both though, and see which seems to better fit the style of content or design. Via that, you are unlikely to cause any problems.  NESTING GRID AND FLEX OBJECTS

This also comes up a lot, and having a Grid Element also a Grid Container is absolutely no problem, thus nesting one grid within another. With Flexbox, you can do the same, making both a Flex Element and Flex Container. You can also make a Grid Item and Flex Container or a Grid Container Flex Item — none of these items are a problem!

What we can't do at the moment is nest one grid inside another, and use the grid tracks that are specified on the parent overall. This will be very helpful, which is what the Grid Specification subgrid proposals in Level 2 aim to solve. A nested grid is currently transforming into a new grid so you'd need to be careful about sizing to ensure it aligns with any parent tracks.

You Can Have Multiple Grids On One Page A comment popped up a few times in the survey which surprised me, there seems to be an idea that a grid should be limited to the main layout, and that many grids on one page are maybe not a good thing. You can have any grid you want! Use the grid for big items and small things, only use the grid if it makes sense as a grid.

FALLBACK AND OTHER OUTDATED BROWSERS

“Grid used in conjunction with @supports has enabled us to better control the number of layout variations we can expect to see. It has also worked really well with our progressive enhancement approach meaning we can reward those with modern browsers without preventing access to content to those not using the latest technology.”  —

Joe Lambert

working on

rareloop.com

Nonetheless, in the survey, several people listed older browsers, there was a fairly even split between those who thought it was difficult to help older browsers and those who thought it was simply due to feature queries and the fact that Grid overrides certain methods of the layout. In "Using CSS Grid: Supporting Browsers Without Framework," I've written extensively about the complexities of creating such fallbacks. In general, modern browsers are far more interoperable than their previous predecessors. We prefer to see far less real "browser bugs" and if you correctly use HTML and CSS, you can find that what you see in one browser is the same as in another.

Of course, we do have cases where one browser has not yet shipped support for a standard, or parts of a standard. With Grid, we were very lucky that, within a short time, the browsers shipped Grid Layout in a very complete and interoperable way. And our testing criteria appear to be comparing browsers with Grid and without Grid. You may have opted to use the -ms prefixed version in IE10 and IE11, which would then entail a third form of browser checking.

Browsers that support modern grid layout (not version IE) support feature queries as well. This means you can check the support for Grid before you use it.

TESTING BROWSERS THAT DON’T SUPPORT GRIDS By using browser failbacks without Grid Layout support (or using the -ms prefixed version for IE10 and 11), you'll want to check how certain browsers render Grid Layout. You need a way to imagine your site in an example browser to do this.

I wouldn't take the approach of breaking your Function Question by searching anything nonsensical for support or misspelling the value list. This method will only work if your stylesheet is extremely simple, and within the function queries you've put absolutely everything to do with your Grid Layout. This is a very fragile and time-consuming way of working, particularly when you're using Grid extensively. Additionally, an older browser would not only lack support for the Grid Style, but other CSS properties will also be unsupported. If you're looking for "best practice," set up yourself to be in a good place to check your work is up there!

There are a few simple ways to set up a reliable system of checking the failbacks. The best option is to use a service such as BrowserStack — if you have a fairly good internet connection and don't mind paying a subscription fee — This is a program that allows websites (even those in progress on your computer) to be accessed on a whole host of actual browsers. BrowserStack does provide open-source projects with free accounts. My recommendation to check locally would be to use a Virtual Machine built with your target browser. Microsoft provides free downloads of Virtual Machine with IE versions back to IE8, and Edge as well. The older version of a plugin with no support for Grid can also be installed on the VM. To get a copy of Firefox 51 or below, for example. Be sure to turn off automatic updates after updating your older Firefox as explained here otherwise it will update itself quietly! You can then check your site on one VM in IE11 and in non-supporting Firefox (a much less vulnerable solution than values that are misspelled). It might take you an hour or so to get set up, but then you'll be in a really nice position UNLEARNING OLD HABITSMany of the respondents to the survey discussed the need to unlearn old habits and how it would be easier for people who are completely new to CSS to learn Style. I prefer to go along. While experienced developers try hard to return the grid to a one-dimensional form of the layout when teaching people in person total beginners have no problem using Grid. I've seen attempts at "grid systems" using CSS Grid that add the requisite float or flex-based grid wrappers back in the row. Don't think about trying out new strategies. If you have the opportunity to check in a few browsers and remain aware of possible usability problems, then you can't really go too far wrong. And if you come across a perfect way to build a c “Grid Layout is the most exciting CSS development since media queries. It's been so well thought through for real-world developer needs and is an absolute joy to use in production - for designers and developers alike.”  —

Trys Mudford

working on

trysmudford.com

KEY POINTS: To end, here's a really short list of current best practices! If you have found things that work in your own case, or do not work well, add them to the comments.

Be very conscious of the possibility of reordering content. Check that the visual display isn't detached from the order of the text.

Test using a local or remote Virtual Machine with specific target browsers.Do not forget older methods of the layout are still true and useful. To attain trends try different ways. Don't get stuck on using a grid.

Know that you are going to have a whole range of preconceptions as an accomplished front-end developer on how the interface works. Consider looking at these new approaches anew

As a reputed Software Solutions Developer we have expertise in providing dedicated remote and outsourced technical resources for software services at very nominal cost. Besides experts in full stacks We also build web solutions, mobile apps and work on system integration, performance enhancement, cloud migrations and big data analytics. Don’t hesitate to

get in touch with us!