first_img“The pace of the game has changed. The 50-over game “The pace of the game has changed. The 50-over game contributed to that in the 90s and its probably been fast-tracked again. But, I dont think its a bad thing. People in this day and age want to be entertained,” Gilchrist said. “Occasionally, we get wickets that are so batsman-friendly that bowlers hardly have a chance but there are other extremes as well. A middle path has to be found,” said the former Deccan Chargers player. Gilchrist feels that different challenges are good for the game and he is not of the opinion that T20 cricket is diminishing the following of Test cricket. “You might not see huge crowds in Test cricket but that has been the case the world over for sometime. I still feel that Test cricket continues to enjoy a loyal following. These days, its often difficult for viewers to dedicate five days or even a day to a cricket match. “But, they continue to follow a Test match on their phones, tablets, computers, radio, TV theres still a massive love for the game. Empty stands are obviously a big issue but a cricketer, even after winning the T20 world cup, would like to be remembered as a Test player,” he added. Gilly was all praise for the West Indies team that won the ICC World T20 in spite of differences over financial issues with the administrators back home. “Its not an ideal situation. I dont think anyone wanted it to be that way — players or administrators. But, it seems that the players used it as some sort of a motivating factor. I would suspect that it was not the driving force. They played good cricket, enjoyed themselves and wanted to win,” he said, adding that the ICC “can” step in to solve the problem. Another cricketer that received accolades from the former Aussie superstar was Virat Kohli. Asked about Indias dependence on the Delhi batsman, Gilchrist said, “I think, its a bit of a reverse. Hes (Kohli) been so good that he often doesnt give others a chance to bat. You cant really question a team or a player that is producing phenomenal results. Hes batting the full 20 overs,” said the veteran of 96 Test matches and 286 ODIs who does not have a problem with pink ball Test cricket anymore. “The purist in me was saying that no, thats not Test cricket. But, I had to argue with the spectacle it produced, the interest it generated. There are many positives,” Gilchrist signed off. PTI RC AH KHSadvertisementlast_img read more

Irani rejects demand for waiving off punishment to students

first_imgNew Delhi, May 6 (PTI) HRD minister Smriti Irani today rejected a demand for waiving off rustication and other punishments meted out to students in universities, terming it a “Pandoras Box” and saying that these institutions have been granted autonomy to handle administrative matters. Iranis comments in Rajya Sabha came in the backdrop of recent action by JNU authorities imposing fine on student leader Kanhaiya Kumar and rustication of some other students in connection with the controversial February 9 campus event against Afzal Gurus hanging. Her reaction came during a debate on the functioning of her ministry when Congress member Ananda Bhaskar Rapolu said the students were looking at Iranis “magnanimity” to waive off punishments and rustication of students in various universities. In her response, Irani said “this minister is a mere mortal who is tied to this very Parliament and this Parliament does not allow intervention in the administrative matter of any University. “My request is only this. This is a pandoras box, I am sure you dont want to open that….Let the University be autonomous enough.” Earlier in the day, members in Rajya Sabha had sought the governments intervention in resolving the protests by JNU students by advising the authorities to reconsider their decision to severely penalise some of them. Deputy Chairman P J Kurien had also said the government should resolve the issue and had asked Minister of State for Parliamentary Affairs Mukhtar Abbas Naqvi to convey the feeling of the House to the concerned Ministers. Irani, in her 70-minute long reply, also lamented that there appeared to be a “Sanskrit phobia” and said the Government or NCERT have not carried out any change in the curriculum. Referring to Rapolu who she said had called her Sanskrit Irani, she said a recent circular to IITs only asked them to pick up those parts of work in Sanskrit language which contained scientific knowledge. She said a US university academic came to Tamil Nadu to do research on the oldest treatise in Geometry but not many in India know about the contributions made by the country. “The challenge is where do you bridge the gap. Where do you introduce the subject or for that matter, give the freedom to academicians to absorb it, without being called communal or saffron,” Irani said. (More) PTI ADS ARCadvertisementlast_img read more

Team USAs Women Are An Olympic Powerhouse

The United States brought home more gold medals than any other country at the Rio Games this summer. As has become usual, the U.S.’s excellence owes much to the success of American women.In Rio, the U.S. women shined with 61 of 121 medals, including 27 out of 46 golds (59 percent). The U.S. was also atop the medal table at the end of the previous Summer Games, in London, and women were responsible for more than half the gold medals that year as well. Worldwide, more women than ever are competing in the Olympic Games: In Rio, around 45 percent of the athletes competing were women, and women’s events accounted for 47 percent of the 306 total. Of those 145 gold medals available for women, the Americans took 27 of them (19 percent). The U.S. men, meanwhile, won gold medals in 19 of the 161 male events that took place in Rio (12 percent). In the 2012 Games, the U.S. women took 29 of the 140 available gold medals (21 percent) while their male counterparts took 17 of the 162 available gold medals (10 percent). This has been the trend in most Summer Olympic Games, which leads to this inescapable conclusion: The only thing limiting the success of American women at the Olympics is the number of events available to them.Naturally, this brings us to Title IX, which was passed into law in 1972 and prohibits discrimination against girls and women in federally funded educational programs, including sports. The share of U.S. gold medals won by women at the Summer Olympics dipped in 1976, but with the 1984 Games in Los Angeles, the U.S. women began a rapid ascent into equilibrium with the U.S. men: If we take into account that women have participated in fewer events than men in all modern Summer Olympics — and therefore competed for a smaller number of medals — the divide between men and women looks even more drastic. In 19 of the 26 Summer Olympic Games in which American men and women fought for medals,1This excludes the 1896 Olympics, which had no female events, and the 1980 Moscow Olympics, which the U.S. did not compete in. the women won a greater share of the available gold medals than the men did. That’s right — if there were a gold medal for who performed better in the Olympics, women would bring that one home too. The International Olympic Committee hopes to achieve an equal number of male and female events and athletes at the 2020 Summer Olympics, being held in Japan. That’s good news for everyone, but considering recent history, perhaps even better news for Team USA. read more

How to create a generic reusable section for a single page based

first_imgThere are countless variations when it comes to different sections that can be incorporated into the design of a single page website. In this tutorial, we will cover how to create a generic section that can be extended to multiple sections. This section provides the ability to display any information your website needs. Single page sections are commonly used to display the following data to the user: Contact form (will be implemented in the next chapter). About us: This can be as simple as a couple of paragraphs talking about the company/individual or more complex with images, even showing the team and their roles. Projects/work: Any work you or the company has done and would like to showcase. They are usually linked to external pages or pop up boxes containing more information about the project. Useful company info such as opening times. These are just some of the many uses for sections in a single page website. A good rule of thumb is that if it can be a page on another website it can most likely be adapted into sections on a single page website. Also, depending on the amount of information a single section has, it could potentially be split into multiple sections. This article is an excerpt taken from the book,’ Responsive Web Design by Example‘, written by Frahaan Hussain. Single page section examples Let’s go through some examples of the sections mentioned above. Example 1: Contact form As can be seen, by the contact form from Richman, the elements used are very similar to that of a contact page. A form is used with inputs for the various pieces of information required from the user along with a button for submission: Not all contact forms will have the same fields. Put what you need, it may be more or less, there is no right or wrong answer. Also at the bottom of the section is the company’s logo along with some written contact information, which is also very common. Some websites also display a map usually using the Google Maps API; these mainly have a physical presence such as a store. Website link— Example 2: About us This is an excellent example of an about us page that uses the following elements to convey the information: Images: Display the individual’s face. Creates a very personal touch to the otherwise digital website. Title: Used to display the individual’s name. This can also be an image if you want a fancier title. Simple text: Talks about who the person is and what they do. Icons: Linking to the individual’s social media accounts. Website link— Example 3: Projects/work This website shows its work off very elegantly and cleanly using images and little text: It also provides a carousel-like slider to display the work, which is extremely useful for displaying the content bigger without displaying all of it at once and it allows a lot of content for a small section to be used. Website link: Example 4: Opening times This website uses a background image similar to the introduction section created in the previous chapter and an additional image on top to display the opening times. This can also be achieved using a mixture of text and CSS styling for various facets such as the border. Website link— Implementing generic reusable single page section We will now create a generic section that can easily be modified and reused to our single page portfolio website. But we still need some sort of layout/design in mind before we implement the section, let’s go with an Our Team style section. What will the Our Team section contain? The Our Team section will be a bit simpler, but it can easily be modified to accommodate the animations and styles displayed on the previously mentioned websites. It will be similar to the following example: Website link— The preceding example consists of the following elements: Heading Intro text (Lorem Ipsum in this case) Images displaying each member of the team Team member’s name Their role Text informing the viewer a little bit about them Social links We will also create our section using a similar layout. We are now finally going to use the column system to its full potential to provide a responsive experience using breakpoints. Creating the Our Team section container First let’s implement a simple container, with the title and section introduction text, without any extra elements such as an image. We will then use this to link to our navigation bar. Add the following code to the jumbotron div: Let’s go over what the preceding code is doing: Line 9 creates a container that is fluid, allowing it to span the browser’s width fully. This can be changed to a regular container if you like. The id will be used very soon to link to the navigation bar. Line 10 creates a row in which our text elements will be stored. Line 11 creates a div that spans all the 12 columns on all screen sizes and centers the text inside of it. Line 12 creates a simple header for the Team section. Line 14 to Line 16 adds introduction text. I have put the first two sentences of “Lorem Ipsum…” inside of it, but you can put anything you like. All of this produces the following result: Anchoring the Team section to the navigation bar We will now link the navigation bar to the Team section. This will allow the user to navigate to the Team section without having to scroll up or down. At the moment, there is no need to scroll up, but when more content is added this can become a problem as a single page website can become quite long. Fortunately, we have already done the heavy lifting with the navigation bar through HTML and JavaScript, phew! First, let’s change the name of the second button in the navigation bar to Team. Update the navigation bar like so: The navigation bar will now look as follows: Fantastic, our navigation bar is looking more like what you would see on a real website. Now let’s change href to the same ID as the Team section, which was #TeamSection like so: Now when we click on any of the navigation buttons we get no JavaScript errors like we would have in the previous chapter. Also, it automatically scrolls to each section without any extra JavaScript code. Adding team pictures Now let’s use images to showcase the team members. I will use the image from the following link for our employees, but in a real website you would obviously use different images: I have modified the image so all the background is removed and the image is trimmed, so it looks as follows: Up until now, all images that we have used have been stored on other websites such as CDN’s, this is great, but the need may arise when the use of a custom image like the previous one is needed. We can either store it on a CDN, which is a very good approach, and I would recommend Cloudinary (, or we can store it locally, which we will do now. A CDN is a Content Delivery Network that has a sole purpose of delivering content such as images to other websites using the best and fastest servers available to a specific user. I would definitely recommend using one. Create a folder called Images and place the image using the following folder structure: Root CSS Images Team Thumbnails Thumbnails.png Index. php JS SNIPPETS This may seem like overkill, considering we only have one image, but as your website gets more complex you will store more images and having an intelligent folder structure/hierarchy will save an immense amount of time. Add the following code to the first row like so: The code we have added doesn’t actually provide any visual changes as it is nothing but empty div classes. But these div classes will serve as structures for each team member and their respective content such as name and social links. We created a new row to group our new div classes. Inside each div we will represent each team member. The classes have been set up to be displayed like so: Extra small screens will only show a single team member on a single row Small and medium screens will show two team members on a single row Large and extra large screens will show four team members on a single row The rows are rows in their literal sense and not the class row. Another way to look at them is as lines. The sizes/breakpoints can easily be changed using the information regarding the grid from this article What Is Bootstrap, Why Do We Use It? Now let’s add the team’s images, update the previous code like so: The preceding code produces the following result: As you can see, this is not the desired effect we were looking for. As there are no size restrictions on the image, it is displayed at its original size. Which, on some screens, will produce a result similar to the monstrosity you saw before; worry not, this can easily be fixed. Add the classes img-fluid and img-thumbnail to each one of the images like so: The classes we added are designed to provide the following styling: img-fluid: Provides a responsive image that is automatically restricted based on the number of columns and browser size. img-thumbnail: Is more of an optional class, but it is still very useful. It provides a light border around the images to make them pop. This produces the following result: As it can be seen, this is significantly better than our previous result. Depending on the browser/screen size, the positioning will slightly change based on the column breakpoints we specified. As usual, I recommend that you resize the browser to see the different layouts. These images are almost complete; they look fine on most screen sizes, but they aren’t actually centered within their respective div. This is evident in larger screen sizes, as can be seen here: It isn’t very noticeable, but the problem is there, it can be seen to the right of the last image. You probably could get away without fixing this, but when creating anything, from a website to a game, or even a table, the smallest details are what separate the good websites from the amazing websites. This is a simple idea called the aggregation of marginal gains. Fortunately for us, like many times before, Bootstrap offers functionality to resolve our little problem. Simply add the text-center class, to the row within the div of the images like so: This now produces the following result: There is one more slight problem that is only noticeable on smaller screens when the images/member containers are stacked on top of each other. The following result is produced: The problem might not jump out at first glance, but look closely at the gaps between the images that are stacked, or I should say, to the lack of a gap. This isn’t the end of the world, but again the small details make an immense difference to the look of a website. This can be easily fixed by adding padding to each team member div. First, add a class of teamMemberContainer to each team member div like so: Add the following CSS code to the index.css file to provide a more visible gap through the use of padding: This simple solution now produces the following result: If you want the gap to be bigger, simply increase the value and lower it to reduce the gap. Team member info text The previous section covered quite a lot if you’re not 100% on what we did just go back and take a second look. This section will thankfully be very simple as it will incorporate techniques and features we have already covered, to add the following information to each team member: Name Job title Member info text Plus anything else you need Update each team member container with the following code: Let’s go over the new code line by line: Line 24 adds a simple header that is intended to display the team member’s name. I have chosen an h4 tag, but you can use something bigger or smaller if you like. Line 26 adds the team member’s job title, I have used a paragraph element with the Bootstrap class text-muted, which lightens the text color. If you would like more information regarding text styling within Bootstrap, feel free to check out the following link. Line 28 adds a simple paragraph with no extra styling to display some information about the team member. Bootstrap text styling link— The code that we just added will produce the following result: As usual, resize your browser to simulate different screen sizes. I use Chrome as my main browser, but Safari has an awesome feature baked right in that allows you to see how your website will run on different browsers/devices, this link will help you use this feature— Most browsers have a plethora of plugins to aid in this process, but not only does Safari have it built in, it works really well. It all looks fantastic, but again I will nitpick at the gaps. The image is right on top of the team member name text; a small gap would really help improve the visual fidelity. Add a class of teamMemberImage to each image tag as it is demonstrated here: Now add the following code to the index.css file, which will apply a margin of 10px below the image, hence moving all the content down: Change the margin to suit your needs. This very simple code will produce the following similar yet subtly different and more visually appealing result: Team member social links We have almost completed the Team section, only the social links remain for each team member. I will be using simple images for the social buttons from the following link: I will also only be adding three social icons, but feel free to add as many or as few as you need. Add the following code to the button of each team member container: Let’s go over each new line of code: Line 30 creates a div to store all the social buttons for each team member Line 31 creates a link to Facebook (add your social link in the href) Line 32 adds an image to show the Facebook social link Line 35 creates a link to Google+ (add your social link in the href) Line 36 adds an image to show the Google+ social link Line 39 creates a link to Twitter (add your social link in the href) Line 40 adds an image to show the Twitter social link We have added a class that needs to be implemented, but let’s first run our website to see the result without any styling: It looks OK, but the social icons are a bit big, especially if we were to have more icons. Add the following CSS styling to the index.css file: This piece of code simply restricts the social icons size to 50px. Only setting the width causes the height to be automatically calculated, this ensures that any changes to the image that involves a ratio change won’t mess up the look of the icons. This now produces the following result: Feel free to change the width to suit your desires. With the social buttons implemented, we are done. If you’ve enjoyed this tutorial, check out Responsive Web Design by Example, to create a cool blog page, beautiful portfolio site, or professional business site to make them all totally responsive. Read Next: 5 things to consider when developing an eCommerce website What UX designers can teach Machine Learning Engineers? To start with: Model Interpretabilitylast_img read more