teleren/devto huggingface dataset:
Five JS Libraries to Help you Build a Standout Personal Website
Published: 2021-07-01 14:05:30


> For web developers, personal websites can be a great way to stand out among the crowd. More than just serving as a way to host your resume and portfolio, the website itself can convey a lot about your creativity, ability to code, and design skills.

###Here are five libraries that can help your personal website stand out:

###1. Bootstrap
For web developers, a poorly designed personal website can do more harm than good. That's why it's helpful to use a design framework like Bootstrap to help make your website both responsive and aesthetically pleasing.

[https://getbootstrap.com/](https://getbootstrap.com/)

If you haven't worked with Bootstrap before, it is essentially a library full of CSS and Javascript-based templates, components, and design tools. It can save you a lot of time, especially when it comes to making your website responsive.

###2. EmailJS
If you're looking to create a great contact form without too much backend work, look no further than EmailJS.

https://www.emailjs.com/

EmailJS is a super-intuitive tool for sending emails securely with vanilla Javascript. In addition, if all you are looking to do is set up a contact form, their free tier will be more than sufficient for your needs.

###3. ThreeJS
If you're a front-end developer and are up for the challenge, ThreeJS allows you to build and render beautiful 3D graphics with Javascript. When done well, this can make your personal website really stand out to hiring managers. Check out these personal websites that leveraged ThreeJS to make themselves more memorable.

https://richardmattka.com/
https://bruno-simon.com/
https://tkmh.me/

###4. SEO Improvement libraries
Ideally, you want your website to be a top result in google search rankings. A common problem that people face is that the web framework that they are using (such as create-react-app) doesn't prerender the site's content and therefore has trouble being crawled by Google's Web Crawlers. While Google's bots have gotten better over the years, this can still harm your SEO.

While the James Smiths of the dev world might need to throw in the towel, there are plenty of great tools that can improve your website's SEO to ensure you're on the front page. Libraries like NextJS for React and NuxtJS for Vue use Server-Side Rendering(SSR) to increase performance for web crawlers.

###5. SanityIO - Headless CMS
If you have content that is frequently being edited or replicated, it may be helpful to have a CMS so you do not have to constantly dive into HTML and CSS to format content. SanityIO is a personal favorite, but there are countless headless CMS's on the market.

https://www.sanity.io/

With a CMS, updating resumes, portfolios, and blogs can be seamless.

---

What did we leave off the list? If you're proud of your personal website, drop the URL down below.
Happy coding from your friends at [Codesphere](https://link.codesphere.com/AS), the next-generation cloud provider.
Scrape Google Autocomplete Suggestion with Python
Tags: python, webscraping, html, tutorial
Published: 2021-07-09 13:05:21

Contents: intro, imports, what will be scraped, process, code, links, outro.

### Intro
This blog post is a continuation of Google's web scraping series.
Here you'll see examples of how you can scrape Autocomplete Suggestion using Python. An alternative API solution will be shown.

### Imports
```python
import os, requests, json
```

### What will be scraped
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i165f4fuo1ir2k7p5kmh.png)
 

### Process

All that needs to be done is to add `/complete/` and `client` parameter (`...&client=chrome...)` the search URL.
```lang-none
This URL: https://www.google.com/search?q=minecraft is better than  # no '/complete/' word in the url
Becomes this URL: http://google.com/complete/search?client=chrome&q=minecraft is better than # added '/complete/' as well as 'client' param
```

### Code
```python
import requests, json

headers = {
    "User-Agent":
    "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 Edge/18.19582"
}
# client param could be replaced with firefox or other browser
response = requests.get('http://google.com/complete/search?client=chrome&q=minecraft is better than', headers=headers)
for result in json.loads(response.text)[1]:
    print(result)

-----------
'''
minecraft is better than roblox
minecraft is better than fortnite
minecraft is better than terraria
minecraft is better than fortnite memes
minecraft is better than among us
minecraft is better than roblox and fortnite
minecraft is better than fortnite song
minecraft is better than fortnite reddit
'''
```

### Using [Google Autocomplete API](https://serpapi.com/google-autocomplete-api)
SerpApi is a paid API with a free trial of 5,000 searches and essentially it does the same as a code above except you can use some of the advanced autocomplete parameters such as:
* Cursor pointer which can be used to refine completion. 

Example with below query `q`: `minecraft is better than` and `cp`:`8` will give completely different results as you see in the code below.
```python
import os 
from serpapi import GoogleSearch

params = {
  "engine": "google_autocomplete",
  "q": "minecraft",
  "api_key": os.getenv("API_KEY"), # environment variable 
}

search = GoogleSearch(params)
results = search.get_dict()

for result in results["suggestions"]:
  print(result['value'])

--------------
'''
default (0) "cp" param
minecraft java
minecraft 1.17
minecraft classic
minecraft mods
....

"cp" param set to 2
minecraft classic
minecraft 1.17
minecraft education edition
minecraft free
'''
```


### Links
[Code in the online IDE](https://replit.com/@DimitryZub1/Scrape-Google-Autocomplete-python-serpapi#custom_results.py) • [Google Autocomplete API](https://serpapi.com/google-autocomplete-api)
Clean Code by Robert C. Martin
Tags: codequality, codereview, codenewbie, programming
Published: 2021-07-01 18:53:08

The book opens with an infographic that clearly sums up every developer's life. He calls the skill for developing clean code as craftsmanship, best acquired in two ways:

1.Knowledge of principles, patterns, practices, and heuristics
2. Practice

![Depicting Frustrating Code Review](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6jjw5u37z9w3cm6n6q2k.jpeg)

This will be multiple-part series where I will dissect the chapters of the book and write about key takeaways that resonate with me.

Hopefully, this will enable me to get out the never-ending cycle of technical debt and increase my efficiency as a developer.

![Tech Debt is annoying](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sixyhfqdbdzaqcei33st.png)

[Part 1: Meaningful Names](https://dev.to/tanisha03/clean-code-part-1-meaningful-names-4khp)
[Part 2: Functions](https://dev.to/tanisha03/clean-code-part-2-functions-43mj)
[Part 3: Comments](https://dev.to/tanisha03/clean-code-part-3-comments-4757)
Salesforce Apex Trigger Program to Calculate Age from Birth Date in (Day, Month, Year)
Published: 2021-07-01 19:31:14

<!-- wp:paragraph -->
<p>Firstly we have to create an object of name "<strong> Date_OF_Birth_Calculat__c</strong> ".</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":293,"width":778,"height":281,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large is-resized"><img src="https://salesforceforfresher.files.wordpress.com/2021/06/image-19.png?w=1024" alt="" class="wp-image-293" width="778" height="281"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> Add two additional Custom fields  Fields : <strong>Birth_date__c </strong>, <strong>Present_Age__c</strong></p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":295,"width":778,"height":325,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large is-resized"><img src="https://salesforceforfresher.files.wordpress.com/2021/06/image-20.png?w=1024" alt="" class="wp-image-295" width="778" height="325"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"fontSize":"large"} -->
<p class="has-large-font-size"><strong>Approach used below is as follows</strong>&nbsp;−</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Input the birth date of a person</li><li>Check for the conditions<ul><li>If current month is less than the birth month, then we will not consider the current year because this year has not been completed yet and to compute the differences in months by adding 12 to the current month.</li><li>If the current date is less than the birth date, then we will not consider month and for generating subtracted dates add number of month days to the current date and the result will difference in the dates.</li></ul></li><li>When this conditions are meet just subtract the days, months and year to get the final result</li><li>Transfer the final age present age</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph {"fontSize":"large"} -->
<p class="has-large-font-size">Algorithm</p>
<!-- /wp:paragraph -->

Continue reading :- “ Salesforce Apex Trigger Program to Calculate Age from Birth Date in (Day, Month, Year) ”
https://salesforceforfresher.wordpress.com/2021/06/05/salesforce-apex-trigger-program-to-calculate-age-from-birth-date-in-day-month-year/
Apply Functional Programming to Convert Strings to URL Slugs
Tags: javascript, devops, programming, beginners
Published: 2021-07-04 15:00:02

#### Alright now with everything we've learned so far, let's apply it to another problem.
* Many sites have the titles of a post added to part of the URL. For example, if you write a Medium post titled `anime bookbags`, it's likely the URL would have some form of the title string in it `(.../anime-bookbags)`.
* Let's complete this function so it converts a string title and returns the hyphenated version for the URL.

#### Here are some Hints:
1. The input is a string with spaces and title-cased words
2. The output is a string with the spaces between words replaced by a hyphen (-)
3. The output should be all lower-cased letters
4. The output should not have any spaces
```
function url(title) {


}
```
* Answer:
```
function url(title) {
return title
    .toLowerCase()
    .split(" ")
    .filter(str => str != "") // <-- basically saying if the str being passed is not equal to an empty string return that str
    .join("-")  
}
console.log(url(" Good Anakin  Good"))
```
* `ur.lSlug(" Good Anakin  Good")` returns the string "Good-Anakin-Good"
Learning Git and and comitting through "I.S"
Tags: codenewbie, webdev, beginners, learning
Published: 2021-07-02 17:33:57

Hey Guys!
Malcolm/Mika here!

Its been 2 weeks 😭 and I havent posted!

Well to be honest last week Even though I have done alot in terms of coding and work in the background I decided not to post my progress... Why is that?

I guess facing Imposter syndrome like every other Dev on here it comes and goes in ebs and flows, but with the help of my Mentor I'm able to uncloud my head and keep going.

There will be days where you are truly unmotivated and some days full of motivation. The sticking to placing yourself infront of the screen for hours at a time has atleast helped me commit to coding and not giving up again like many times in the past. But alass we are here.

So! Last week I took part in a coding challenge from a Coding bootcamp called Code Institute. There I participated with a bunch of other new Devs and did a daily coding challenge taking on basic principles of HTML, CSS and Javascript. It was a good challenge to say the least that definitely kept the momentum going when there were days where I didnt feel like coding at all.
I was able to complete the course and get a ceritifcation Woopee!! 😁

After that this week, I have been really struggling with my projects and getting them off the ground but after a meeting with my mentor they helped me realise that Coders in the industry rarely build sites from scracth and mostly use templates that the company would already provide. In the case of WebDevs they introduced me to Bootstrap where I believe I'll be able to utilize the templated and build on top of them well which I will try throughout the following week.

I also learned today how to use GITHUB properly. When I first started I was using Github but I had no clue as to what I was doing. Whats a commit? Whats a pull request? Merge? I was just confused at the beginning but now that I have learned the basics I will try to use this to my advantage and make full use of the site in conjuction with my projects.

For those of you beginners who have no idea how to use GITHUB just like me try these 2 sites.

https://guides.github.com/activities/hello-world/
https://learngitbranching.js.org/

Thanks for tuning in guys I will update you with my progress next week! ✌🏿

Mika/Malcolm
The Problem With Rockstar Culture In Tech
Tags: culture, tech, work
Published: 2021-07-02 19:05:34

---
title: The Problem With Rockstar Culture In Tech
published: true
description:  Some of the common problems that I've observed in the companies and cultures I've worked in, and heard from friends around.
tags: culture,tech,work
cover_image: https://images.unsplash.com/photo-1586473219010-2ffc57b0d282?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80
canonical_url: https://arihantverma.com/posts/2021/07/02/the-problem-with-rockstar-culture/
---

## Disclaimer

> These points are made out of observation and experience and in no way attempts to generalise.

## Let's Talk Rockstar Culture In Tech

1. It's draining, impersonal and segregating but monetarily rewarding.
2. Values only outputs rather than processes that enable tech innovations and helps multiple people reach results. In this process, the silent hard workers, who might have tremendous potential to make tech that makes business product development extremely easy are seldom recognized.
3. It's doesn't necessarily lead to collaboration.
4. It isn't a good motivator.
5. It's tightly coupled with performance based appraisal. It feels like school and college exams all over again.

    Imagine being able to choose between two motivators
    1. Having the privilege to work with the people who are much smarter than you.
    2. Chasing a variable pay based on performance, [where most of the work demands that you sit alone and code](web.archive.org/web/20210628231425/https://kyleshevlin.com/whats-going-on-mid-2021).

    Which one would you choose? It's surprising – the amount of work that a company can get done if they hire top of the skill developers, [drop the appraisal system altogether](https://www.goodreads.com/book/show/49099937-no-rules-rules) and [just pay them properly instead, while leaving them to do wonderful things together.](https://www.goodreads.com/book/show/36417234-powerful?ac=1&from_search=true&qid=PAnPc88Y2l&rank=1)

6. It doesn't aid learning. But then again, most of the tech jobs are a tradeoff — making things just work, rather than doing things properly in the best way possible, because of course, the company doesn't have time to slow down the pace. If they do they tend to suffer. Maybe there's a middle ground? ( Hint: It's hiring people smarter than each other ).
7. It values hustling culture: late night working, celebrating achieving things quickly at the cost of mental and physical health. Of course HR and leadership in such companies would ask their employees to value their health first. But the stature in doing so silently slips through the back door, because in doing so, one wouldn't be able to perform as much as over working would help achieve.
8. It leaves people, especially programmers in this weird mental space where when once in a blue moon they get free time before their late bed time, they feel restless, jittery, not being able to rest, because they've gotten so used to working that they don't know what to do otherwise, anymore.
How to calculate date and time involving time zone? doesn't have to be hard.
Tags: java, localdatetime, zoneddatetime
Published: 2021-07-03 07:36:59

---
title: How to calculate date and time involving time zone? doesn't have to be hard.
published: true
date: 2021-06-16 04:10:10 UTC
tags: java, LocalDateTime, ZonedDateTime
canonical_url: http://bazlur.com/2021/06/how-to-calculate-date-and-time-involving-time-zone-doesnt-have-to-be-hard./
---

Calculating time with a zone was never this easy. Using the date-time API, you can calculate with timezone pretty much effortlessly.

Let’s assume we have a flight from Toronto (YYZ) to Dubai (DXB) today. The flight takes off at 21:45. The total duration of the flight is 12 hours and 45 minutes. What would be the local time when the plane lands?

The following code will allow you to calculate that easily-

![100DaysOfProgramming_Day008](http://bazlur.com/img/Day010.png "100DaysOfJava")

for **copy/paste** pleasure: [https://github.com/rokon12/100DaysOfJava/blob/main/src/main/java/com/bazlur/Day010.java](https://github.com/rokon12/100DaysOfJava/blob/main/src/main/java/com/bazlur/Day010.java)
How to hide an HTML element or tag without using CSS styles or JavaScript?
Tags: html
Published: 2021-06-29 00:00:00

---
  title: How to hide an HTML element or tag without using CSS styles or JavaScript?
  published: true
  tags: HTML5
  date: Tue Jun 29 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/hide-html-element-tag-without-css-styles-or-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-4f8f29bc3642a8d2caabacd0ef6ce8af.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/hide-html-element-tag-without-css-styles-or-javascript)
  
To hide an HTML element tag without using CSS styles or using JavaScript, we can use the `hidden` attribute on the HTML tag.

For example, to hide a `div` HTML tag, we can use the `hidden` attribute like this,

```html
<!-- Hide div HTML tag -->
<div hidden>I'm hidden</div>
```

That's it! No more css `display: none` CSS property or any other tricks to hide an element, you can just do it using the `hidden` attribute in the HTML tag itself.

It also has better support in browsers nowadays. So no need to worry about compatibility or support issues 🎊. See [`hidden` attribute report on Can I Use](https://caniuse.com/?search=hidden).

See the above code live in [JSBin](https://jsbin.com/xoyeqaruho/2/edit?html,output).

### Feel free to share if you found this useful 😃.

---
What I Learned This Week: Next.js and API Keys
Tags: nextjs, devjournal, react
Published: 2021-07-03 21:14:30

If you've read my previous blogs then you're aware that I have been learning Next.js recently as I tackle my next project, WatchNext. If you have not read my previous blogs, a quick update for you: I kickstarted a new project to keep the gears in my brain spinning as I search for my first engineering role. During the kickoff process, I quickly encountered an obstacle (I wanted this projet to be frontend only). That obstacle being, how to properly hide my keys on a frontend application without them accidentally being exposed to a client after deployment. Nicholas Papadakis recommended using Next.js and thus my journey to learn it began.

Now that we're caught up let's get to the point of this blog. API KEYS!

The main tidbit of information that I've learned while exploring Next.js is how to keep my secret keys an actual secret. Next.js offers you the ability to create an API directory within your Pages directory. This API directory allows you to create API endpoints for your applications. You can then access these endpoints to get data from your external API as needed. The best thing... everything in it will be private! Including your ENV variables. Seeing as this was my first major obstacle this is a **GREAT** bonus for me and my current needs.

Using ENV variables is a tad different than how you would implement them on a backend application. To utilize them in Next.js, you will create a file in the highest level of your application and title it `.env.local` (don't forget to ensure it is included in your `.gitignore` file so you don't accidentally make it public!). In this file is where you will store your ENV variable like you would normally do in the backend. Now, to access it, you would interpolate it where it's needed and call `process.env.ENV_VAR_NAME`

```
/// In .env.local
API_SECRET=PUT_SECRET_HERE

// Whichever file you need to call the ENV variable, within the API directory
const URL = 'https://myapi.org/info?api_key=${process.env.API_SECRET}'
```

**VIOLA!!** You have accessed your external API without exposing your precious keys or creating a backend.

If what you've read so far about Next.js sounds like it can be useful to you, I would highly recommend using Next.js for your next project or even migrating a current project that you have to utilize the benefits that Next.js has to offer.
Just a reminder, I am still learning and growing. I am open to any tips and tricks you may have as well as open to answering any questions you may have to the best of my ability. Happy learning! 

Resources: 
* https://nextjs.org/docs/basic-features/environment-variables
Google Search Dark Theme
Published: 2021-07-03 23:16:31

Here is a nice way to save energy - search in the dark theme.  Google's search service has a fantastic setting - Dark theme.  Turn it on.  It's fun.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mo3ruevzjk2grwgalh58.png)

Steps:

1. Visit Google
1. Search for 'Dark Mode'
1. Click the settings icon on the right
1. Toggle 'Dark theme' to On

Climate change is no hoax.  Maybe you are searching for ways to save energy.  Saving energy is a simple way to stand up for cleaner computing.  Dark mode is showing up all over the web. It's a popular one. Please leave a comment if you have other nice suggestions to reduce the amount of energy used by a computer. I thank you.
Think of your process as a product (100 Bytes Of Wisdom: Day 59)
Tags: career, journey, advice
Published: 2021-07-04 06:00:15

---
title: Think of your process as a product (100 Bytes Of Wisdom: Day 59)
published: true
description: Bytes of Wisdom is a new project by Sam Jarman that brings together snippets of advice for software engineers
tags: career, journey, advice
//cover_image: https://direct_url_to_image.jpg
---

![Think of your process as a product](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/td895g08f8do09ct8mer.png)

Think of your process as a product - it may have bugs, nice features, might be highly custom. It may also accept bug fixes, new features, or even pull requests.  It might need documentation, onboarding or instructions to use effectively.
All of these things we do as product people applies to process. If yours to mould for your needs and all the metaphors apply. Process isn't your enemy - its a tool for greatness, if it's in the right hands.

Heads up: As with any terse bit of advice, there will be exceptions of course, and subtleties and nuance that can't possibly be captured in a Byte of Wisdom. This has been what I've experienced, I'd love to hear yours in the comments too!

You can catch up with all the other bytes at http://bytesofwisdom.com/