Say Ola! to Bootstrap 4

So it’s now a being 4 years to see Bootstrap in market and now Bootstrap already launch 4th version, so many sites already migrate to bootstrap 4 from 3 and some people still in middle to take a call to wait for some time or go for bootstrap 4.

So let’s see what is new we get in Bootstrap 4 and how its help us

    1. Goodbye Less, Hello SassBootstrap 4 is now on Sass and that’s why bootstrap will complies faster than ever thanks to Libsass. So now we will be having change in directory hierarchy
      Bootstrap 3
      Bootstrap3
      Bootstrap 4

      Bootstrap4
      I know you notice that font folder is missing in Bootstrap 4. Yes, font folder is not missing in Bootstrap 4 it’s got eliminated because bootstrap 4 will no longer support glyphicons anymore.
    2. Better Grid System based on “rems”
      Bootstrap grid still follows the same HTML syntax, but the underling architecture changed quite a bit. However bootstrap 4 classes used ems not pixels and they’ve added one new tier for extra large screens.

      • col-xsfor extra small display (screen width less than 34em)
      • col-smfor smaller display (screen width 34em and up)
      • col-mdfor medium display (screen width 48em and up)
      • col-lgfor larger display (screen width 62em and up)
      • col-xlfor extra large display (screen width 75em and up)

      The container has max-width set in rems. A row now has a negative left and right margin of -.9375rem while columns have default left and right padding of 0.9375rem. This value were previously 15px in Bootsrap 3.

      So this might be a good thing to support all screen sizes, it may take time for some web designers and developers to get used to it as most of the graphics tools that are being used today like Photoshop, fireworks etc. used pixel on its design.

      If you are using the Sass CSS source version of bootstrap 4, you can control the grid size by changing the following variables:

      • $grid-columns:number of grids horizontally (12 default)
      • $grid-gutter-width:total padding around each grid (30px default)
      • $grid-float-breakpoint:minimum size the navbar becomes uncollapsed ($screen-sm-min default)
      • $grid-float-breakpoint-max:maximum size where the navbar begins collapsing (the default would be the size of the $grid-float-breakpoint – 1)
    3. Typography
      Bootstrap typography is using rems. Unlike px and em, it is not a fixed or relative unit that is direct or nearest to its parent measurement. The rem unit is dynamic and relative to the root HTML tag. However, you can still use px, em and pt on Bootstrap projects if you want.To give you an idea how rems work, you can divide the target to base size of html in pixels.
      Let’s say we have the following code
      html{
      font-size: 16px;
      }
      p{
      font-size: 1rem; /* 1rem = 16px */
      }
      h1 {
      font-size: 1.875rem; /* 30px / 16px = 1.875rem */
      }
      In the example above, we set out paragraph tag into 1 rem which is equivalent to 16px as our html root size. While h1 tag will have 1.875rem if you will divide the target size which is 30px to the html root size of 16px.Bootstrap 4 pulled rems units into scene to have 100% perfect scaling of the entire application. This makes it easier to scale up or down for devices. It also worth noting that size of the html tag can be customized to your preferred size.
    4. Improved media query
      I still remember when I teach media query to my team they told that it’s really frustrated to know the size of device and define in media query.In bootstrap 3 we write media query something like this
      /* Extra small devices (phones, less than 768px) */
      /* No media query since this is the default in Bootstrap */
      /* Small devices (tablets, 768px and up) */

      @media (min-width: @screen-sm-min) { ... }
      /* Medium devices (desktops, 992px and up) */
      @media (min-width: @screen-md-min) { ... }
      /*Large devices (large desktops, 1200px and up) */
      @media (min-width: @screen-lg-min) { ... }
      So now in bootstrap 4 grid system has been completely revamped with em based values, we need to change them as such:
      // Extra small devices (portrait phones, less than ???px)
      // No media query since this is the default in Bootstrap
      // Small devices (landscape phones, 34em and up)
      @media (min-width: 34em) { ... }
      // Medium devices (tablets, 48em and up)
      @media (min-width: 48em) { ... }
      // Large devices (desktops, 62em and up)
      @media (min-width: 62em) { ... }
      // Extra large devices (large desktops, 75em and up)
      @media (min-width: 75em) { ... }
    5. Cards
      In Bootstrap 4, panels, thumbnails and wells were removed and replaced with cards. This component can be used to display information as a page or a container which supports different kinds of content such as links, text, images, headers, footers and many more with a variety of background colors.To enable cards, add the .card and .card-block classes to an element. There are also some more classes that you can use inside the .card class.

      • .card-title for heading title
      • .card-text for the text element
      • .card-header for the header
      • .card-footer for the footer
    6. Tooltips
      The Bootstrap tooltip plugin was originally based on the jQuery.tipsy plugin written by Jason Frame. However, in Bootstrap 4, it move to Tether, a third party plugin. If you want to use this new feature include tether.js just before the bootstrap.js.
    7. No more IE8 Support
      IE8 support was dropped. Dropping support for IE8 means we can take advantage of the best parts of CSS without being held back with CSS hacks or fallbacks. It also means that the maintainers can focus on new technologies and pushing forward.
      It’s currently unclear if there will be a partial support with a HTML5 shiv and respond.js or not. It seems though that if you need Internet Explorer 8 support, you’ll have to stick to using Bootstrap 3.

Now safe to use JQuery 2.0!
Now that Internet Explorer 8 support is dropped. It’s safe to always use jQuery 2.0 with Bootstrap. jQuery 2.0 is smaller, faster, and has more features.

Smaller then Bootstrap 3
Bootstrap 4 is 30% smaller than the latest Bootstrap 3 build! It previously was around ~123kb and now is a mere ~88kb. This is a huge reduction for not losing any features.

My verdict on Bootstrap 4
Even though bootstrap 4 is only in alpha, it is still really exciting and safe to use. Bootstrap has come a long way. It is advised to always check the official documentation and for the future updates.

Need PDF as output to your email, website???

Last night I was just reading some blogs and I come across one website which was very interesting one. First I thought I must be some kind of spam maker or something. But I couldn’t stop myself when I say some screenshot that how this website works.

It was pretty simple to understand what these website do. As a designer I always want some solution like this, to give my colleagues who always come with some kind of content to convert in PDF.

Trust me still people don’t know much tool which make their life easier.

Just imagine when you are traveling and when you are accessing something on web or in your email and want to convert that in PDF to send someone. You have to wait till you get your system and then you go all the way down to convert your content in pdf.

This website which I’m going to show will do the same job and that too free of cost.

Pdfconvert.me

If you want to convert your any email in PDF format then send original mail on pdfconvert@pdfconvert.me and you will get your email which you want to convert in PDF as a PDF attachment.

mailtopdf

Mail to pdf

mailtopdf02

Mail back

 

pdfasattachment

PDF as attachment

Ok so now you might have question like, what will happen when I have an attachment in my email. Of course above email will not work but you can convert this also when you send this mail on attachconvert@pdfconvert.me

Now the website feature will not end here. If you want to convert a webpage in PDF then just type the URL in a mail body and send this email to webconvert@pdfconvert.me and you will get that web page in PDF format.

Information which this websites collects

According to this website policy they say:

This service keeps a copy of the messages you send to it only as long as is required to convert them to PDF and return them to you.

Some metadata from the message is retained on the server in logs or database records, primarily sender email and subject/URL (to assist in debugging in case of problems).

How to read and write cookies with Adobe Flash

This is one of my very old blog which i have written on Blogger but due to some issues with blogger some on my friend asked me to re-share this on some better blog side. So I’m here with new blog side with new topics.

So lets start here with the cookies with Adobe Flash

After searching tones of pages on Google I really got disappointed that Adobe Flash is not having any capability to talk directly with cookie. Whenever I search for “cookies with Adobe Flash” people always talks about ShareObject or super cookies. I know ShareObject very well and also know the usage of shareObject.

Recently on one of my project, my client asked me to read and write cookie through flash .swf file. First I try to play with ShareObject, but when I got the requirement like they need to play with social networking websites cookies, I felt ShareObject is not the right thing which I should use on this project. Then I start searching about Cookie with flash but didn’t got any luck.

Finally I created this work around to achieve the desire result. Now I would like to share this solution for those who don’t want to use ShareObject and want to play with cookies.

For this work around I created one HTML page with small JavaScript code. But first we’ll create a basic flash swf file

Your Flash File should looks like this.

Now go to Flash and create one new document with “200×350” Action Script 1.0 create 2 input text field on stage and give var name as “name” and “txComment“.

Also create 2 Buttons on stage one for “Write Cookie” and second one for “Read Cookie”

flash

Adobe Flash

Now write this code on “Write Cookie” Button

on (release)
{ 
  getURL("javascript:cookit(\'name\',\'" + /:name + "\',\'txComment\',\'" + /:txComment + "\')", "");
}

Now write this code on “Read Cookie” Button

on (release)
{
  getURL("javascript:if(document.cookie.length<1){alert(\'No cookie for%20this site.\')}else{alert(\'Your Cookie is:\'+document.cookie)}");
}

Note: you can choose any file name but make sure you use same swf name in html code also

Now save your flash file as flookies.Fla and render .swf file

HTML page with JavaScript

<script type="text/javascript">
 exLenght = 9
 exDate = new Date
 exDate.setMonth(exDate.getMonth()+exLenght)

function cookit() {
 for(i=0;i<cookit.arguments.length;i++) {
  ckThing = cookit.arguments[i] + '=' + cookit.arguments[i+1]
  i++
  document.cookie = ckThing + '; expires=' + exDate.toGMTString() + '; path=/'
  } 
 }

ckStr = "?"  
 if(document.cookie != "") {
  theCook = document.cookie.split("; ")
  for (i = 0; i < theCook.length; i ++) {
   ckStr += theCook[i] + "&"
   }
  }
</script>

Open you HTML page in IE and test also check your Temporary Internet folder and fond the cookie.