DEV Community: nexum

Watch: WOMEN in TECH present: TECH(K)NOW DAY

nuriamart — Fri, 06 Aug 2021 06:49:42 +0000

Tech(K)now is a YouTube channel that used International Women's Day as an opportunity to invite over 200 extraordinarily talented experts to the virtual conference WOMEN in TECH present: TECH(K)NOW DAY and hold presentations on all kinds of topics. Here's the link to the youtube channel:
Women in tech channel

The topics presented include:

Mobile & Apps
DevOps & DevSecOps
AI & ML
Cloud & Hosting
Programming Languages
Security & Data Protection
UI & accessibility
Blockchain

These main categories include Entrepreneur, Leading, Mindset, Learning, Health, Productivity, Career, Society, Remote work, and Climate.

A total of almost 70 presentations were assigned to this main category. All topics that are not usually found at conferences.

The next most crucial category includes more than 20 presentations on technologies (general), frameworks, libraries, IoT, 3D printing, and APIs.

AI & ML and Data Science were also the third-largest category and did not miss out with more than ten presentations.

The two categories, Security & Data Protection and UI/UX & Accessibility were equally frequent. Data protection is becoming increasingly critical, and it was great to see that accessibility was also a topic just as often.

The remaining presentations round off the offer very well, so blockchain enthusiasts get their money's worth and AR & MR fans, and of course DevOps & DevSecOps and Open Source.

Here we leave you with some recommendations about 3 interesting videos that we have personally chosen:

Deepthi Goguri is an SQL Server DBA, and in the video, she talks about the magic of Indexes in SQL Server. She shows how to view index internals, B-tree structures, and their utility.
Deepthi Goguri - Method Behind The Magic of Indexes in SQL Server

Tessa talks from her experience about the difficulties of leading and how she felt when she encouraged herself to do it. She gives tips for people to be more confident, even if they are leading a company or a small team.
Tessa Mero - Courage to lead

Shruti introduces GraphQL by telling us how it all started, who is working with and on the GraphQL specification, what tools to use, and she even compares REST with GraphQL. Her tips & tricks and some code examples enrich her presentation. GraphQL is at the forefront and should not be ignored. Definitely worth watching!
Shruti Kapoor - Getting Started with GraphQL in an Enterprise

We leave here a few links to some pages of the girls to look at:

https://blackgirl.tech/ (Dora Militaru, Developer Relations Engineer)

https://erioldoesdesign.com/portfolio/ (Eriol Fox, UX designer)

https://doramilitaru.com/ (Lola Odelola, Developer Advocate)

Deepthi Goguri's SQL Server Blog (dbanuggets.com) (Deepthi Goguiri, SQL Server DBA)

Most developer girls have a GitHub repository, so if anyone is interested in some topics, google the developer's name. Please do it!

In the end, the purpose of this article is to get to know a community of women in technology because it is one of the areas where they have the least visibility. This YouTube channel gives visibility to almost 200 women from all nationalities and ages, covering all technology fields, from cybersecurity to UX design. What all of them have in common is their passion for their work.

Google also used the occasion of International Women's Day to invite women to hold relevant tech presentations. Here, too, we can recommend to have a look at them.

Track 1 - The European Wrap-Up - International Women's Day 2021

Track 2 - The European Wrap-Up - International Women's Day 2021

Authors: Nuria from Spain and Denny from Germany wrote this article for you and enjoyed spending hours watching the many excellent presentations.

ThankYouNext 🖤 - A Next.js starter template

Steve Frenzel — Thu, 27 May 2021 14:19:48 +0000

Website: https://thankyounext.vercel.app/
GitHub: https://github.com/stevefrenzel/thankyounext
Original post: https://dev.to/stvfrnzl/thankyounext-next-js-starter-template-32fg

I first came into contact with Next.js about a year ago and have been a big fan ever since! I love features like routing, image optimization or the flexibility to choose between SSG and SSR (or use both). Especially the developer experience feels more pleasant than with React and the support from people like Lee Robinson and Cassidy Williams is just priceless! To me, Next.js feels like a superset of React, similar like TypeScript to Javascript. 🙂

For this reason, I decided to use Next.js for my personal projects. However, I didn't want to start from scratch every time and painstakingly put everything together until I have a base I feel comfortable coding on. So I decided to create a template to share with the public, as I'm interested in what other people would add, change or improve.

Here you can find an illustration by me dear friend Ingrid, who visualized the flow of this template:

It was bootstrapped with create-next-app and has the following features:

Preact
TypeScript
Sass
ESLint and Prettier configuration
CSS reset by Andy Bell
Absolute imports
React strict mode
Ready-to-use SEO setup
Many security headers

If possible, I recommend deploying it via Vercel, as it's a pain free process and gets you up and running within minutes (hint: This template was deployed via Vercel). More features are:

1. Setup ⚙️

1.1 TypeScript

If you don't feel comfortable using TypeScript or simply don't need it, just rename all .tsx files in the pages folder to js and in the components folder to .jsx. Then run npm uninstall typescript to remove it from your project. You should use it though, especially when working on more complex projects. It's painful at first, but very rewarding once you get the hang of it.

1.2 Preact

This template runs with Preact instead of React, which results in a smaller build and the same developer experience. More info about the differences to React. Want to switch back to React? Easy as cake, just delete or comment out the following in next.config.js:

webpack: (config, { dev, isServer }) => {
  if (!dev && !isServer) {
    Object.assign(config.resolve.alias, {
      react: 'preact/compat',
      'react-dom/test-utils': 'preact/test-utils',
      'react-dom': 'preact/compat',
    });
  }
  return config;
},

If you want to clean up your project, run npm uninstall preact preact-compat to uninstall it.

2. Performance 🏃‍♀️

Inspired by this post from Lee Robinson - Web Fonts in 2021 - I'm using the following web safe fonts to increase performance for this template:

font-family: Georgia, 'Times New Roman', Times, serif;

This template also ships with zero byte of client-side JavaScript, thanks to the following lines of code:

export const config = {
  unstable_runtimeJS: false,
};

If you want to use things like next/image or React hooks though, you will have to remove it, otherwise they will not work.

3. Accessibility 🌍

Make sure your website or application can be used by any human being. If you're not familiar with the topic of accessibility, here are some resources you can check out:

This template already includes some elements that will improve the accessibility of your project, like a skip link, an external link component, keyboard focus (working in all major browsers) and a proper, flexible font size.

4. Security 🔒

Thanks to Lee Robinson's tweet about security headers, I became aware that my standard Next.js project was missing a bunch of them and didn't rank so well at Mozilla Observatory.

I followed his configuration with some slight adjustments, but please configure them according to your project purpose. In next.config.js you will find the following seven security headers:

5. Styling 💅

You have a lot of options to style your project, I just went with good ol' Sass. If it gets more complex, you could also use Sass modules for individual components. Use whatever works best for you, for example:

6. Search engine optimization 🔍

I've created a Meta.tsx component which does all the heavy lifting regarding SEO. You can setup default props or feed it dynamically with data, depending on the context.