Unlock the Power of BingAI: Experience the Future, Today! ¹​

Microsoft has made Bing AI accessible to the public, eliminating the waitlist requirement. Users can now try out the AI bot by signing in to Bing using their Microsoft account on the Edge browser. The latest update introduces several exciting features powered by OpenAI's technologies.

Also, Bing AI now supports rich "visual answers," displaying graphs, charts, and formatted content. The Bing Image Creator has been upgraded to support over 100 languages, enabling the generation of AI images based on text prompts and visual examples. Additionally, users can export and share chats, benefit from improved summarization capabilities for long documents, and enjoy actions within Edge for quicker access to relevant content. Microsoft is also developing third-party plug-ins to expand functionality within Bing Chat.

LinkedIn's Intelligent Assistance: Craft the Perfect Job Application ²​

LinkedIn is reportedly testing an AI-powered feature that provides personalized writing suggestions for job seekers, aiming to help them create tailored job applications. The feature generates short cover letter-like messages using information from the user's profile, the hiring manager's profile, the job description, and the targeted company. While the AI-generated drafts serve as a starting point, LinkedIn emphasizes the importance of customization and encourages users to review and edit the suggestions to reflect their own voice and style.

This development builds upon LinkedIn's existing AI writing tool for profile creation. The adoption of AI in job application drafting reflects the growing interest in artificial intelligence, with its potential to enhance user experiences and improve outcomes in various industries, including recruitment and career development.

YOLO-NAS: Revolutionizing Object Detection with Unprecedented Precision ³​

Deci AI, a deep learning firm, has unveiled YOLO-NAS, its latest deep learning model designed for real-time object detection with remarkable performance. Built on Deci's Neural Architecture Search Technology, AutoNAC™, YOLO-NAS outperforms other models like YOLOv6, YOLOv7, and YOLOv8, including the recently launched YOLOv8. AutoNAC democratizes Neural Architecture Search, enabling organizations to create customized, fast, accurate, and efficient deep learning models quickly.

YOLO-NAS delivers superior throughput, achieving 50% more throughput and 1 mAP higher accuracy compared to other YOLO models. It is pre-trained on popular datasets, making it suitable for various real-world applications. The open-source model is available with pre-trained weights for non-commercial research use on Deci's PyTorch-based computer vision training library called SuperGradients.

Introducing StarCoder: Free Code-Generating Assistant ⁴​

Hugging Face and ServiceNow Research have jointly released StarCoder, a free code-generating model that offers an alternative to existing AI systems like GitHub's Copilot. StarCoder, part of the BigCode project, was trained on over 80 programming languages and integrates with Microsoft's Visual Studio Code editor. Unlike other commercial models, StarCoder is royalty-free and available for use by anyone, including corporations.

The project aims to develop state-of-the-art AI systems for code generation in an open and responsible manner. StarCoder's release comes amidst debates around the use of public source code and licensing agreements for training AI models, with efforts made to address privacy concerns and adhere to ethical best practices.

Geoffrey Hinton: AI's Threat Could Be 'More Urgent' Than Climate Change ⁵​

In a recent interview, renowned AI pioneer Geoffrey Hinton expressed his concerns that the threat posed by artificial intelligence (AI) to humanity could be even more urgent than climate change. Hinton, often referred to as one of the "godfathers of AI," believes that the risks associated with AI technology are significant and warrant immediate attention. Having recently left Alphabet, Hinton intends to speak out about these risks without any constraints from his former employer. As the debate around AI's impact on society continues to unfold, Hinton's remarks highlight the need for careful consideration and proactive measures to ensure the responsible and ethical development and deployment of AI technologies.

Accelerating the Quest for New Metals: ML Offers a Promising Solution ⁶​

Machine learning could help develop new types of metals with useful properties, such as resistance to extreme temperatures and rust, according to new research. This could be useful in a range of sectors—for example, metals that perform well at lower temperatures could improve spacecraft, while metals that resist corrosion could be used for boats and submarines. Usually they start off with one well-known element, like iron, which is cheap and malleable, and add one or two others to see the effect on the original material. It’s a laborious process of trial and error that inevitably yields more duds than useful results. Researchers from the Max Planck Institute managed to identify 17 promising new metals using this method.

Revolutionizing ML: Researchers Unveil a More Agile Approach ⁷​

Artificial intelligence researchers have celebrated a string of successes with neural networks, computer programs that roughly mimic how our brains are organized. In 2020, two researchers at the MIT led a team that introduced a new kind of neural network based on real-life intelligence — but not our own. After a breakthrough last year, the novel networks may now be versatile enough to supplant their traditional counterparts for certain applications.

Liquid neural networks offer an elegant and compact alternative , said Ken Goldberg, a roboticist at the University of California, Berkeley. These networks can run faster and more accurately than other so-called continuous-time neural networks, which model systems that vary over time

Are you one of those engineers who are just engrossed in academics and is looking to do something more than that in your college days? Rotaract Club of TCET is one of the perfect choices to go for. I f you are searching to participate in something interesting where you can develop yourself and volunteer as well, you are at the correct place. To know more continue reading this blog.

‘Boldly Going: Rotaract Club of TCET '

"The purpose of life is to live it, to taste experience to the utmost, to reach out eagerly and without fear for newer and richer experience."

-Eleanor Roosevelt

Whether you're a musician, artist, athlete, writer, or simply someone who loves trying new things, Rotaract Club of TCET offers a welcoming and inclusive community where you can connect with like-minded individuals and pursue your passions. From workshops and classes to group outings and events, RCTCET provides a variety of opportunities for personal growth, skill development, and social interaction.

Types of Projects & Events conducted in RCTCET​

1. Volunteering​

Volunteering in community service related projects or events can help you gain practical experience while also contributing to your community.By volunteering, individuals can gain a deeper understanding of community needs and become more empathetic towards others.Community service volunteering activities are a valuable way to give back to the community and make a positive impact on society. They provide individuals with opportunities to engage in meaningful work, develop new skills, build relationships, and gain a sense of personal fulfillment.

Few volunteering events:​

• TechWorld
This is a flagship (activities which happens throughout the year) activity where we teach the underprivileged about electronic circuits and create awareness amongst them to pursue Engineering as a career, to mentor younger students for their bright future.

• Emergency
The main aim of conduction of this event is to make our budding Engineers well aware how to perform CPR and give first aid to someone in need.

• Beach Cleanup
Such events are conducted by keeping the welfare of the community and balance of ecosystem in mind. This could be possible only with the contribution of people who are genuinely interested in volunteering. Afterall,"If you concentrate on small, manageable steps you can cross unimaginable distances."

2. Space to Socialize​

Joining clubs and organizations is a great way to meet people who share your interests such as sports, music, etc. It is an amazing platform to meet new people and develop bonding. Remember, socializing in college can be challenging at first, but it's important to step out of your comfort zone and take advantage of opportunities to meet new people. Be yourself, have fun, and enjoy the college experience! We have fun Club Service (Avenue) Events which promotes students to know each other irrespective of their branches and to have fun together releasing the academic exhaustion aside.

Examples of such socializing events:​

3. Space to express creativity​

Rotaract Club of TCET provides a cavity to students where they can express their artistic or literary talents. Members can explore different genres of writing, such as poetry, fiction, creative nonfiction, and screenwriting. They can also participate in writing prompts and exercises, which can help them generate new ideas and experiment with different writing styles. Students can showcase their work through public readings and publications. For our members possessing artistic talent, be it in the form of paper or digitalized form of art they can contribute by means of Digital Communication. They can learn, grow and experiment at the same time. For individuals who love to capture beautiful moments they can come forward and give their photography skills a boost. People who are good at branding they are welcomed as well where they can fully utilise their Social Media Marketing skills.

4. Development of Overall Personality​

Participating in co-curricular activities can be extremely beneficial for your personal and professional development. Our club can help you learn about the business side of engineering and develop skills such as project management, leadership, and communication. We often organize events such as pitch competitions, guest speakers, and mentorship programs.

We conduct events wherein students learn how to develop Interpersonal Skills, they can participate in group activities, attend workshops and seminars on communication and collaboration, practice active listening, and seek feedback from peers and instructors. Building strong interpersonal skills takes time and effort, but it is a valuable investment for future success.

5. Last but not the least, it is a platform where you can create amazing memories!​

"Education is not just about academics. It's about building character, improving one's personality, and becoming a better human being."

- Sudha Murty

Joining RCTCET can create can create amazing memories for students. It is a complete new experience where you can participate in different kinds of fun events. Opportunities to travel together, whether it's a weekend camping trip or a day trip to a nearby city the experience is wonderful. Volunteering for a social cause develops a sense of responsibility in young individuals. Competing with your peers gives you confidence to do better than before. Sharing same interests with someone new helps you create memorable experiences. College days are something a student cherishes for life and it is grateful to have a platform as such.

To know more about us:​

Visit our Official Website And do follow us @rc_tcet

Conclusion​

Remember, co-curricular activities are meant to complement your academic studies. Make sure to balance your time and commitments so that you can excel both academically and personally. Don't be afraid to step out of your comfort zone and try something new. Joining a club as Rotaract Club of TCET can be a rewarding and fun experience that creates memories that last a lifetime. Moreover, social clubs can help promote social cohesion and strengthen community ties. They can offer a sense of belonging and provide a platform for individuals to come together and work towards common goals. In short, Rotaract Club of TCET can be a fun and enriching way to connect with others and build community. By joining this club, individuals can expand their horizons, create new friendships, and contribute to a more vibrant and inclusive society.

Web designing (the HTML & CSS part, not the Figma Part) can be a real pain if we don’t understand the design system/rules/procedure it uses. Even after watching HTML and CSS tutorials, we can still struggle to design anything in web. But, after having a decent understanding of divisions into rows and columns and learning about display properties and positioning in detail, you we can have some confidence to turn any Figma design to HTML and CSS. This is not a tutorial on HTML & CSS but a comprehensive usage of them. By reading this blog, I hope you can get the confidence and create the Mental Model of Web Design in your Brain ✨

This Blog also serves as a very precise summary of long web design bootcamp I took with **GenosisX Tech Community, watch here**

TL;DR: Create proper rows and columns for each block of design, put them into proper semantic tags or <div> tags. Use display flex or grid on them. Then style them properly with the fonts, colors, paddings, margins, borders, backgrounds. Position them properly with position property of CSS. Use responsive features of flex and grid. Done!

Prerequisite​

• Basic knowledge of HTML and CSS would help, but not necessary.
• That’s It!

Guide to Divisions

Making proper divisions of design into rows and columns will help you style them better and will make it 100x easier to make them responsive. Let’s get into it.

Visualize Design​

Visualize Design #1

• First think of the separate sections, in this case, there are two, a Header and a Hero section.
• For every block of divisions, first think of sections as in one row or one column, then multiple columns or rows respectively.
• Divisions
  • Here, the whole page is one column which has two rows, Navbar and Hero.
  • Then we clearly see, hero is divided into two columns, so hero itself is one row which has two different distinct columns.
  • You can try to dig further deep into each div visually.

So based upon the divisions, we can conclude the following code.

<body> <!-- First Column, whole page -->
  <header></header> <!-- First Row, Header -->
  <main> <!-- Second Row, Hero section --> 
        <section></section> <!-- First Column, Main Text Section-->
        <section></section> <!-- Second Column, Main Image Section-->
    </main>
</body>

Lets dig deep​

Visualize Design #2

• Divisions - Header - a row
  • Img - Logo - First column
  • Navbar - Second column
  • Button - Third column

<body> <!-- First Column, whole page -->
  <header><!-- First Row, Header -->
    <img src="/.." /> <!-- First column -->
    <nav>bunch of <a></a> Tags</nav> <!-- Second column -->
    <button>Sign up</button> <!-- Second column -->
  </header> 
  <main> <!-- Second Row, Hero section --> 
        <section></section> <!-- First Column, Main Text Section-->
        <section></section> <!-- Second Column, Main Image Section-->
    </main>  
</body>

Use semantic tags wherever possible, they hold some meaning and are very important for SEO, read this article to learn more about them. https://www.pluralsight.com/guides/semantic-html

Visualize Design #3

• Divisions - Main - a row
  • First Column of Hero Section
    • H1 - Main text - First row
    • p - Description text - Second row
    • span - Third Row having two buttons
      • Button - First Column
      • Button - Second Column
  • Second Column of Hero Section
    • img - First Column

<body> <!-- First Column, whole page -->
  <header><!-- First Row, Header -->
    <img src="/.." /> <!-- First column -->
    <nav>bunch of <a></a> Tags</nav> <!-- Second column -->
    <button>Sign up</button> <!-- Second column -->
  </header> 
  <main> <!-- Second Row, Hero section --> 
        <section> <!-- First Column, Main Text Section-->
      <h1>Main text...</h1>
      <p>Description text...</p>
      <span>
        <button>Get Started</button>
        <button>Order Now</button>
      </span>
    </section> 
        <section> <!-- Second Column, Main Image Section-->
      <img src="/.." />
    </section> 
    </main>  
</body>

Guide to Style them

Pat yourself if you reached till here, and understood everything above! Lets go ahead.

For the next part, I’ll use tailwindcss because it’s easier to explain with. If you know CSS, you basically know tailwindcss. Read this article for a quick introduction, I hope you come back here after reading this. https://tailwindcss.com/docs/utility-first

Step-by-Step Linear Process to Design Anything!​

Remember, this is not a hard and fast rule to follow exactly as is. You can add you own flavours to this. Skip steps which are not required. I made this using my personal experience so add modify it if I missed anything.

1. Write HTML, using the divisions approach
2. Set background color
3. Set display - flex (if any child tags)
4. Set width - compulsory
5. Set height - optional
6. set overflow properties
7. Set font → size, weight, line height, letter spacing,
8. Set text colors → paddings → borders → margins
   1. Colors - normal, hover, active any states
   2. Borders - width/thickness , color, radius, style
9. Set position (if want to move the element from its position)
   1. relative - move it from its current position
   2. absolute - move it from its first relative parent start point (top-0, left-0 of relative parent)
   3. fixed - move it from windows start point (top-0, left-0 of whole window)
10. Set z-index - define stack, which element should be above which
11. Anything else that suits your design

This is a linear process, which means you first style the first tag then the second tag then the third tag then the next tag then the next tag and so on!

<body> <!-- First style this #1 -->
  <header><!-- then this #2 -->
    <img src="/.." /> <!-- Then this #3 -->
    <nav> <!-- Then this #4 -->
      <a>..</a> <!-- Then this #5 -->
      <a>..</a> <!-- Then this #6 -->
      <a>..</a> <!-- Then this #7 -->
    </nav> <!-- and so on till the last tag -->
    <button>Sign up</button> 
  </header> 
  <main> 
    <section> 
      <h1>Main text...</h1>
      <p>Description text...</p>
      <span>
        <button>Get Started</button>
        <button>Order Now</button>
      </span>
    </section> 
        <section> 
      <img src="/.." />
    </section>
</body>

Here comes the CSS​

Web Design Bootcamp Design

Take a quick look, and we will start with the linear process

Body - main page​

We can see that the

• background color is different
• width is full screen
• padding left and right i.e x-axis

<body class="bg-[#f3f3f3] w-[100vw] px-16 " > <!-- First Column, whole page -->
  <header  ><!-- First Row, Header -->
    <img src="/.." /> <!-- First column -->
            ...

Header​

Here,

• We see, everything is in one row, so set display as flex
• width is full available space so 100%
• img - logo
  • width of some pixels
• navbar
  • width of fit content (automatic)
  • font weight is medium i.e 500
  • Color is gray for all but black for current one
• button
  • background is orange
  • text is bold
  • longer padding in x-axis, shorted padding in y-axis
  • border radius full rounded

<body class="bg-[#f3f3f3] w-[100vw] px-20 " > <!-- First Column, whole page -->
  <header class="flex w-full" ><!-- First Row, Header -->
    <img class="w-20" src="/.." /> <!-- First column -->
    <nav class="flex w-fit text-[#828282] font-medium" >
      <a id="current" class="text-black" >Home</a>
       <!-- if id="current" then class="text-black" add this login using javascript  -->
      <a>How it works</a>
      ...
    </nav> <!-- Second column -->
    <button class="bg-[#FF6F1E] w-fit text-white px-4 py-2 rounded-full" >Sign up</button> <!-- Second column -->
  </header>
     ...

We won’t do the whole design, but this will give you enough idea on how we go about designing and how to follow the linear process which may seem overwhelming but is really easy to follow.

Responsiveness, how easy is it?​

Desktop First Design Approach​

• First we design the desktop version of our web app
• Then slowly add rules to make it responsive for tablets then mobile
• Desktop → Tablet → Mobile
• This is not recommended

Mobile First Design Approach​

• First we design the mobile version of our web app
• Then slowly add rules to make it responsive for tablets then desktop
• Mobile → Tablet → Desktop
• This is most recommended and used by tailwindcss by default

No media query methods​

• Set max-widths and min-widths
• Use display flex with flex-wrap, flex-grow, flex-shrink, flex-basis
• Use display grid with grid-template-columns, repeat - autofit, minmax
• You can much deeper with maths to avoid media queries but I feel that much is unnecessary.
• Using some media queries to avoid extreme complexity is always a good idea

A good example of minimum media queries​

****The prefix lg: is how we use media queries in tailwindcss, refer this* https://tailwindcss.com/docs/responsive-design

<main class="flex flex-wrap text-lg lg:text-xl m-5 lg:m-10" > <!-- Second Row, Hero section --> 
        <section class="max-w-lg" > <!-- First Column, Main Text Section-->
      ...
    </section> 
        <section class="max-w-lg" > <!-- Second Column, Main Image Section-->
      ...
    </section> 
</main>

Get Creative with Positioning​

When we want to move some elements from their original position to something else, we use position property.

CSS Positions​

• Static
  • Default value
  • Original position, cannot change it.
• Relative
  • Set explicitly
  • Can change position from original using properties - top, left, bottom, right
  • Moves towards the specified direction from its current position.
• Absolute
  • Set explicitly
  • Can change position from original using properties - top, left, bottom, right
  • Move towards the specified direction from the first relative parents start coordinates.
• Fixed
  • Set explicitly
  • Can change position from original using properties - top, left, bottom, right
  • Move towards the specified direction from the coordinates of window (browser tab) itself
  • Does not move on scroll, stays fixed.

This article by MDN teaches all positionings perfectly. https://developer.mozilla.org/en-US/docs/Web/CSS/position

An example of positioning​

Lets look at the image which has blocks of elements floating above it.

• So the concept is we wrap the image in one div
• This div will be set to position: relative
• This div will contain image tag and other elements of those floating blocks
• Don’t change image tag position
• Change position: absolute of all floating elements
• Then set them to their places via top, left, right, bottom

<section class="relative" > <!-- Second Column, Main Image Section-->
        <img class="w-24 h-40"  src="/.." />
        <div class="absolute top-[30%] right-[-10%]" >...</div>
        <div class="absolute top-[50%] left-[-10%]" >...</div>
        <div class="absolute bottom-[-15%] right-[12%]" >...</div>
</section>

Conclusion

• Make proper divisions while writing the whole HTML. Visualize and then create rows and columns.
• Write whole HTML of one section then style the whole section using the step by step linear process.
• Position properly and most of it depends on the parents element position property, so make sure you set those correct.
• Learn flex, grid and positions of CSS very thoroughly.
• Learn tailwindcss because it will make your life easier, trust me on this.