39 |
40 |
41 |
${item.content}
42 |
43 |
44 |
45 |
Watch a video
46 |
49 |
50 |
59 | `;
60 | return div;
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/css/sec2.css:
--------------------------------------------------------------------------------
1 | :root{
2 | --element-color: black;
3 | --element1-color:rgba(0, 0, 0, 0.5);
4 | --element2-color:rgba(0, 0, 0, 0.8);
5 |
6 | }
7 |
8 |
9 | .sec2{
10 | /* border: 2px solid red; */
11 | height: 34vw;
12 | }
13 |
14 | .sec2buttons{
15 | width: 20vw;
16 | margin-left: 9.5vw;
17 | }
18 | .sec2btn2{
19 | cursor: pointer;
20 | height: 2.5vw;
21 | width: 7.2vw;
22 | margin: 0 1.3vw;
23 | border-radius: 1vw;
24 | border: none;
25 | border: 1px solid #ff765d;
26 | background-color: white;
27 | margin: 0 1vw;
28 | font-size: 0.8em;
29 | color: black;
30 | }
31 | .sec2btn2-recent:hover{
32 | color: #fff;
33 | background-color: #ff765d;
34 | }
35 | /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
36 | .sec2content{
37 | /* border: 1px solid black; */
38 | width: 90vw;
39 | height: 25vw;
40 | margin-top: 2.4vw;
41 | display: flex;
42 | align-items: center;
43 | margin-left: 5vw;
44 |
45 | }
46 | .sec2content>img{
47 | height: 23vw;
48 | width: 29vw;
49 | object-fit: fill;
50 | margin: 0 5vw;
51 | border-radius: 2vw;
52 | }
53 |
54 | .s2text{
55 | /* border: 1px solid green; */
56 | height: 23vw;
57 | width: 45vw;
58 | /* margin: 0 3vw; */
59 | }
60 | /* .div{
61 | margin: 1.3vw 0;
62 | font-family: 'Poppins';
63 | font-style: normal;
64 | font-weight: 600;
65 | font-size: 0.9em;
66 | line-height: 30px;
67 | color: var(--element1-color)} */
68 | .s2text h1{
69 | margin: 1vw 0;
70 | font-size: 1.8em;
71 | width: 30vw;
72 | font-family: 'Poppins';
73 | font-style: normal;
74 | font-weight: 700;
75 | line-height: 42px;
76 | color: var(--element-color);
77 | }
78 | .s2text p{
79 | font-family: 'Poppins';
80 | font-style: normal;
81 | font-weight: 500;
82 | font-size: 1.2em;
83 | line-height: 30px;
84 | color: var(--element-color);
85 |
86 | }
87 | .author{
88 | display: flex;
89 | align-items: center;
90 | margin-top: 1.5vw;
91 | }
92 | .author>img{
93 | height: 3vw;
94 | width: 3vw;
95 | border-radius: 10vw;
96 | }
97 | .authorsname{
98 | margin-left: 1vw;
99 | }
100 |
--------------------------------------------------------------------------------
/css/sec3.css:
--------------------------------------------------------------------------------
1 |
2 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&display=swap');
3 | :root{
4 | --element-color: black;
5 | --element1-color:rgba(0, 0, 0, 0.5);
6 | --element2-color:rgba(0, 0, 0, 0.8);
7 | }
8 |
9 |
10 | .sec3{
11 | /* border: 2px solid red; */
12 | height: 62vw;
13 | display: flex;
14 | justify-content: center;
15 | }
16 | .s3boxes{
17 | /* border: 1px solid black; */
18 | height: 26vw;
19 | width: 90vw;
20 | display: flex;
21 | margin-left: 6vw;
22 | margin-bottom: 3vw;
23 | }
24 | .mainContainer{
25 | display: flex;
26 | flex-wrap: wrap;
27 | flex-grow: 1;
28 | align-items: center;
29 | justify-content: center;
30 |
31 | }
32 | .box1{
33 | /* border: 1px solid green; */
34 | padding-bottom: 2vw;
35 | height: 27vw;
36 | width: 25vw;
37 | margin: 0 2vw;
38 | display: flex;
39 | flex-direction: column;
40 | align-items: center;
41 | }
42 | .box1>img{
43 |
44 | height: 15vw;
45 | width: 23vw;
46 | object-fit: fill;
47 | /* margin: 0 5vw; */
48 | border-radius: 1vw;
49 | }
50 |
51 | .flex{
52 | display: flex;
53 | flex-wrap: wrap;
54 | max-width: 95%;
55 | margin: auto;
56 | }
57 |
58 |
59 | .flex a{
60 | color: black;
61 | text-decoration: none;
62 | }
63 |
64 | .boxtext{
65 | /* border: 1px solid green; */
66 | height: 11vw;
67 | width: 20vw;
68 | margin-left: 1vw;
69 | }
70 | .boxdiv{
71 | margin: 0.4vw 0;
72 | font-size: 0.8em;
73 | color: var(--element1-color);
74 | line-height: 18px;
75 | font-family: 'Poppins', sans-serif;
76 | font-weight: 600;
77 | }
78 | .boxtext h1{
79 | margin: 0.5vw 0;
80 | font-family: 'Poppins', sans-serif;
81 | font-style: normal;
82 | font-weight: 600;
83 | line-height: 27px;
84 | color: var(--element-color);
85 | width: 15vw;
86 | font-size: 1em;
87 | }
88 | .boxContent{
89 | font-size: 0.7em;
90 | font-family: 'Poppins';
91 | font-style: normal;
92 | font-weight: 500;
93 | line-height: 21px;
94 | color: var(--element2-color);
95 |
96 |
97 |
98 | }
99 | .author{
100 | display: flex;
101 | align-items: center;
102 | margin-top: 1.5vw;
103 | }
104 | .boxauthor{
105 | display: flex;
106 | margin-top: 0.5vw;
107 | }
108 | .boxauthor>img{
109 | height: 2vw;
110 | width: 2vw;
111 | border-radius: 10vw;
112 |
113 | }
114 | .boxauthorsname{
115 | margin-left: 0.5vw;
116 | font-size: 0.8vw;
117 | }
118 | .namestyle{
119 | font-family: 'Poppins';
120 | font-style: normal;
121 | font-weight: 500;
122 | font-size: 0.8vw;
123 | line-height: 15px;
124 | color: var(--element-color);
125 | }
126 | .datestyle{
127 | font-family: 'Poppins';
128 | font-style: normal;
129 | font-weight: 500;
130 | font-size: 0.5vw;
131 | line-height: 18px;
132 | color: var(--element1-color);
133 |
134 | }
--------------------------------------------------------------------------------
/chatBot/script.js:
--------------------------------------------------------------------------------
1 | const chatbotToggle = document.querySelector('.chatbot__button');
2 | const sendChatBtn = document.querySelector('.chatbot__input-box span');
3 | const chatInput = document.querySelector('.chatbot__textarea');
4 | const chatBox = document.querySelector('.chatbot__box');
5 | const chatbotCloseBtn = document.querySelector('.chatbot__header span');
6 |
7 | let userMessage;
8 | // Need GPT key
9 | const inputInitHeight = chatInput.scrollHeight;
10 | const API_KEY = '033f3bcc57msh4cbeceaaa74b3fbp172fd5jsn8008c32db481'; // ~IMPORTANT~
11 |
12 | const createChatLi = (message, className) => {
13 | const chatLi = document.createElement('li');
14 | chatLi.classList.add('chatbot__chat', className);
15 | chatLi.innerHTML = `
${message}
`;
16 | return chatLi;
17 | };
18 |
19 | const generateResponse = (incomingChatLi) => {
20 | const API_URL = 'https://chatgpt53.p.rapidapi.com/';
21 | const messageElement = incomingChatLi.querySelector('p');
22 |
23 | const requestOptions = {
24 | method: "POST",
25 | headers: {
26 | "Content-Type": "application/json",
27 | "X-RapidAPI-Key": "033f3bcc57msh4cbeceaaa74b3fbp172fd5jsn8008c32db481", // ! IMPORTANT !
28 | "X-RapidAPI-Host": "chatgpt53.p.rapidapi.com",
29 | },
30 | body: JSON.stringify({
31 | messages: [{ role: "user", content: userMessage }],
32 | }),
33 | };
34 |
35 | console.log('Sending API request:', requestOptions);
36 |
37 | fetch(API_URL, requestOptions)
38 | .then((res) => res.json())
39 | .then((data) => {
40 | console.log('API response:', data);
41 | console.log(data.choices[0].message.content);
42 | messageElement.textContent = data.choices[0].message.content;
43 | })
44 | .catch((error) => {
45 | console.log('API error:', error);
46 | messageElement.classList.add('error');
47 | messageElement.textContent = 'Oops! Please try again!';
48 | })
49 | .finally(() => chatBox.scrollTo(0, chatBox.scrollHeight));
50 | };
51 |
52 |
53 | const handleChat = () => {
54 | userMessage = chatInput.value.trim();
55 | if (!userMessage) return;
56 | chatInput.value = '';
57 | chatInput.style.height = `${inputInitHeight}px`;
58 |
59 | chatBox.appendChild(createChatLi(userMessage, 'outgoing'));
60 | chatBox.scrollTo(0, chatBox.scrollHeight);
61 |
62 | setTimeout(() => {
63 | const incomingChatLi = createChatLi('Typing...', 'incoming');
64 | chatBox.appendChild(incomingChatLi);
65 | chatBox.scrollTo(0, chatBox.scrollHeight);
66 | generateResponse(incomingChatLi);
67 | }, 600);
68 | };
69 |
70 | chatInput.addEventListener('input', () => {
71 | chatInput.style.height = `${inputInitHeight}px`;
72 | chatInput.style.height = `${chatInput.scrollHeight}px`;
73 | });
74 | chatInput.addEventListener('keydown', (e) => {
75 | if (e.key === 'Enter' && !e.shiftKey && window.innerWidth > 800) {
76 | e.preventDefault();
77 | handleChat();
78 | }
79 | });
80 | chatbotToggle.addEventListener('click', () =>
81 | document.body.classList.toggle('show-chatbot')
82 | );
83 | chatbotCloseBtn.addEventListener('click', () =>
84 | document.body.classList.remove('show-chatbot')
85 | );
86 | sendChatBtn.addEventListener('click', handleChat);
87 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing Guidelines
2 |
3 | Welcome to the project! We appreciate your interest and contributions. Before getting started, please take a moment to review the following guidelines.
4 |
5 | ## Table of Contents
6 |
7 | - ###
How Can You Contribute
8 | - ### Code Contribution
9 | - ### Bug Reports
10 | - ### Feature Requests
11 | - ### Community Guidelines
12 | - ### License
13 |
14 | ## How Can You Contribute
15 |
16 | There are several ways you can contribute to this project:
17 |
18 | - Reporting bugs and issues
19 | - Requesting new features
20 | - Fixing bugs and implementing new features
21 | - through pull requests
22 | - Improving documentation
23 | - Providing feedback and suggestions
24 |
25 | ## Code Contribution
26 |
27 | If you would like to contribute code to the project, please follow these steps:
28 |
29 | - Step 1: [Fork](https://github.com/DSC-JSS-NOIDA/blogzen) the repo first
30 |
31 | - Step 2: Go to your Git terminal and clone it on your machine.
32 | ```
33 | git clone https://github.com/
/UMatter.git
34 | ```
35 | - Step 3: Add an upstream link to the main branch in your cloned repo
36 | ```
37 | git remote add upstream https://github.com/MonalikaPatnaik/UMatter.git
38 | ```
39 | - Step 4: Keep your cloned repo up to date by pulling from upstream (this will also avoid any merge conflicts while committing new changes)
40 | ```
41 | git pull upstream main
42 | ```
43 | - Step 5: Create your feature branch (This is a necessary step, so don't skip it)
44 | ```
45 | git checkout -b
46 | ```
47 | - Step 6: Track and stage your changes.
48 |
49 | ```
50 | # Track the changes
51 | git status
52 |
53 | # Add changes to Index
54 | git add . or git add
55 | ```
56 |
57 | - Step 7: Commit your changes (Write commit message as "Small Message")
58 | ```
59 | git commit -m "Write a meaningful but small commit message"
60 | ```
61 | - Step 8: Push the changes for review
62 | ```
63 | git push -u origin
64 | ```
65 | - Step 9: Create a PR on Github. (Don't just hit the create a pull request button, you must write a PR message to clarify why and what are you contributing)
66 |
67 | ## Bug Reports
68 |
69 | If you encounter any bugs or issues while using the project, please follow these steps:
70 |
71 | 1. Check if the issue has already been reported by searching the existing issues.
72 | 1. If the issue has not been reported, open a new issue.
73 | 1. Provide a clear and descriptive title for the issue.
74 | 1. Include steps to reproduce the issue.
75 | 1. Describe the expected behavior and the actual behavior.
76 | 1. Provide any relevant error messages or screenshots.
77 |
78 | ## Feature Requests
79 |
80 | If you have a feature request, please follow these steps:
81 |
82 | 1. Check if the feature has already been requested by searching the existing issues.
83 | 1. If the feature has not been requested, open a new issue.
84 | 1. Provide a clear and descriptive title for the feature request.
85 | 1. Describe the problem or use case that the feature would address.
86 | 1. Provide a clear description of the proposed solution or implementation.
87 |
88 | ## Community Guidelines
89 |
90 | When participating in discussions and contributing to the project, we kindly ask you to follow our community guidelines. These guidelines ensure a positive and inclusive environment for everyone involved. Please review the `README.md` file for more information.
91 |
92 | ## License
93 |
94 | By contributing to this project, you agree that your contributions will be licensed under the `LICENSE` of the project.
95 |
--------------------------------------------------------------------------------
/chatBot/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
2 |
3 | .chatbot__button {
4 | position: fixed;
5 | bottom: 15px;
6 | right: 20px;
7 | width: 60px;
8 | height: 60px;
9 | display: flex;
10 | justify-content: center;
11 | align-items: center;
12 | background: #227ebb;
13 | color: #f3f7f8;
14 | border: none;
15 | border-radius: 50%;
16 | outline: none;
17 | cursor: pointer;
18 | }
19 | .chatbot__button span {
20 | position: absolute;
21 | }
22 | .show-chatbot .chatbot__button span:first-child,
23 | .chatbot__button span:last-child {
24 | opacity: 0;
25 | }
26 | .show-chatbot .chatbot__button span:last-child {
27 | opacity: 1;
28 | }
29 | .chatbot {
30 | position: fixed;
31 | bottom: 100px;
32 | right: 40px;
33 | width: 420px;
34 | background-color: #f3f7f8;
35 | border-radius: 15px;
36 | box-shadow: 0 0 128px 0 rgba(0, 0, 0, 0.1) 0 32px 64px -48px rgba(0, 0, 0, 0.5);
37 | transform: scale(0.5);
38 | transition: transform 0.3s ease;
39 | overflow: hidden;
40 | opacity: 0;
41 | pointer-events: none;
42 | }
43 | .show-chatbot .chatbot {
44 | opacity: 1;
45 | pointer-events: auto;
46 | transform: scale(1);
47 | }
48 | .chatbot__header {
49 | position: relative;
50 | background-color: #0f466b;
51 | text-align: center;
52 | padding: 16px 0;
53 | }
54 | .chatbot__header span {
55 | display: none;
56 | position: absolute;
57 | top: 50%;
58 | right: 20px;
59 | color: #202020;
60 | transform: translateY(-50%);
61 | cursor: pointer;
62 | }
63 | .chatbox__title {
64 | font-size: 1.4rem;
65 | color: #f3f7f8;
66 | }
67 | .chatbot__box {
68 | height: 400px;
69 | overflow-y: auto;
70 | padding: 30px 20px 100px;
71 | background-image: url(../img/ds.jpeg);
72 | background-repeat: no-repeat;
73 | background-size: cover;
74 | filter: brightness(1);
75 | }
76 | .chatbot__chat {
77 | display: flex;
78 | }
79 | .chatbot__chat p {
80 | max-width: 75%;
81 | font-size: 0.95rem;
82 | white-space: pre-wrap;
83 | color: #202020;
84 | background-color: #019ef9;
85 | border-radius: 10px 10px 0 10px;
86 | padding: 12px 16px;
87 | }
88 | .chatbot__chat p.error {
89 | color: #721c24;
90 | background: #f8d7da;
91 | }
92 | .incoming p {
93 | color: #202020;
94 | background: #bdc3c7;
95 | border-radius: 10px 10px 10px 0;
96 | }
97 | .incoming span {
98 | width: 32px;
99 | height: 32px;
100 | line-height: 32px;
101 | color: #f3f7f8;
102 | background-color: #227ebb;
103 | border-radius: 4px;
104 | text-align: center;
105 | align-self: flex-end;
106 | margin: 0 10px 7px 0;
107 | }
108 | .outgoing {
109 | justify-content: flex-end;
110 | margin: 20px 0;
111 | }
112 | .incoming {
113 | margin: 20px 0;
114 | }
115 | .chatbot__input-box {
116 | position: absolute;
117 | bottom: 0;
118 | width: 100%;
119 | display: flex;
120 | gap: 5px;
121 | align-items: center;
122 | border-top: 1px solid #227ebb;
123 | background: #0f466b;
124 | padding: 5px 20px;
125 | }
126 | .chatbot__textarea {
127 | width: 80%;
128 | min-height: 20px;
129 | max-height: 80px;
130 | font-size: 0.95rem;
131 | padding: 16px 15px 16px 0;
132 | color: #202020;
133 | border: none;
134 | outline: none;
135 | resize: none;
136 | background: transparent;
137 | }
138 | .chatbot__textarea::placeholder {
139 | font-family: 'Poppins', sans-serif;
140 | color:#fff;
141 | }
142 | .chatbot__input-box span {
143 | font-size: 1.75rem;
144 | color: #202020;
145 | cursor: pointer;
146 | visibility: hidden;
147 | }
148 | .chatbot__textarea:valid ~ span {
149 | visibility: visible;
150 | }
151 |
152 | @media (max-width: 490px) {
153 | .chatbot {
154 | right: 0;
155 | bottom: 0;
156 | width: 100%;
157 | height: 100%;
158 | border-radius: 0;
159 | }
160 | .chatbot__box {
161 | height: 90%;
162 | }
163 | .chatbot__header span {
164 | display: inline;
165 | }
166 | }
167 |
--------------------------------------------------------------------------------
/css/navbar.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Baloo+Bhaina+2:wght@500&display=swap");
2 | @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
3 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&display=swap');
4 |
5 | ::-webkit-scrollbar {
6 | width: 10px;
7 |
8 | }
9 |
10 | /* Track */
11 | ::-webkit-scrollbar-track {
12 | background: white;
13 |
14 | }
15 | ::-webkit-scrollbar:hover {
16 | background: white;
17 | width:10px;
18 | }
19 | /* Handle */
20 | ::-webkit-scrollbar-thumb {
21 | background: #7D41E2;
22 | border-radius: 80px;
23 | }
24 |
25 | /* Handle on hover */
26 | /* ::-webkit-scrollbar-thumb:hover {
27 |
28 |
29 | } */
30 |
31 |
32 |
33 | *{
34 | margin: 0;
35 | padding: 0;
36 | }
37 |
38 |
39 | body{
40 | overflow-x: hidden;
41 | font-family: 'Poppins', sans-serif;
42 | /* background-color: black; */
43 |
44 | }
45 | :root{
46 | --txtColor1: #000000a8;
47 | }
48 | .darktheme{
49 | --element-color:white;
50 | --element1-color:#9DB2BF;
51 | --element2-color: #DDE6ED;
52 | background-color: black;
53 | color: white;
54 | transition: all 1s;
55 |
56 | }
57 |
58 | #themeImg {
59 | cursor: pointer;
60 | width: 25px;
61 | height: 25px;
62 | border: none;
63 | }
64 |
65 | .themechangebtn {
66 | background-color: transparent;
67 | border: transparent;
68 | }
69 |
70 | .navbar.dark {
71 | background-color: black;
72 | }
73 |
74 | .navbar {
75 |
76 | width: 100vw;
77 | height: 80px;
78 | left: 0px;
79 | top: 0px;
80 | display: flex;
81 | justify-content: space-between;
82 | background-color: white;
83 | transition: background-color 1s ease;
84 | z-index: 9999;
85 | position: fixed;
86 | }
87 |
88 | /* Sec-1 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
89 | .navs1 {
90 | /* border: 1px solid black; */
91 | width: 15vw;
92 | height: 80px;
93 | display: flex;
94 | align-items: center;
95 | margin-left: 3.5vw;
96 | }
97 |
98 | .navs1 img {
99 | /* border: 1px solid black; */
100 | width: 3vw;
101 | height: 3vw;
102 | border-radius: 10vw;
103 | }
104 |
105 | .navs1 a {
106 | text-decoration: none;
107 | color: #7D41E2;
108 | }
109 |
110 | .span1 {
111 | margin-left: 1vw;
112 | font-size: 2em;
113 | font-weight: bold;
114 | color: #7D41E2;
115 | }
116 |
117 | .span2 {
118 | font-size: 2em;
119 | font-weight: bolder;
120 | color: #7D41E2;
121 | }
122 |
123 |
124 | #signup:hover{
125 | border: 1px solid #208FF4;
126 | background-color: transparent;
127 | color: #2a95f6;
128 | }
129 |
130 |
131 | /* Sec-2 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
132 | .navs2 {
133 | /* border: 1px solid black; */
134 | /* width: 25vw; */
135 | height: 80px;
136 | display: flex;
137 | align-items: center;
138 | margin-right: 1vw;
139 | }
140 |
141 | .navs2>img {
142 | cursor: pointer;
143 | width: 2vw;
144 | height: 2vw;
145 | margin: 0 0.5vw;
146 |
147 | }
148 | .button_nav{
149 | display: flex;
150 | align-items: center;
151 | justify-content: center;
152 | margin-right: 20px;
153 | height: 30px;
154 | background-color: #208FF4;
155 | padding-top: 10px;
156 | padding-bottom: 10px;
157 | padding-left: 20px;
158 | padding-right: 20px;
159 | border-radius: 10px;
160 | color: #ffffff;
161 | font-family: 'Poppins', sans-serif;
162 | font-size: 14px;
163 | margin-left: 5px;
164 | border: none;
165 | cursor: pointer;
166 | }
167 |
168 | .navbtn2 {
169 | cursor: pointer;
170 | height: 2vw;
171 | width: 9vw;
172 | margin: 0 1vw;
173 | border-radius: 0.5vw;
174 | border: none;
175 | background-color: #2a95f6;
176 | display: flex;
177 | align-items: center;
178 | justify-content: center;
179 | }
180 |
181 | .navbtn2>img {
182 | border: 1px solid black;
183 | width: 1vw;
184 | height: 1vw;
185 | /* margin: 0 0.5vw; */
186 | }
187 |
188 | .navbtn2 span {
189 | margin-left: 0.3vw;
190 | }
191 |
192 | .txtColor {
193 | color: white;
194 | }
195 | .txtColor1{
196 | color: var(--txtColor1);
197 | }
198 | .darktheme .txtColor1{
199 | color: rgba(0, 0, 0, 0.7);
200 | }
201 |
--------------------------------------------------------------------------------
/js/Landingpage.js:
--------------------------------------------------------------------------------
1 | // const dataArray = JSON.parse(jsonData);
2 | // console.log(dataArray)
3 | console.log("jsonData")
4 |
5 |
6 |
7 |
8 | // let tbody = document.getElementById("tbody")
9 |
10 | // document.addEventListener("DOMContentLoaded", function() {
11 | // var tbody = document.getElementById("tbody");
12 |
13 | // // fetch function
14 | // fetch("http://localhost:3000/blogs")
15 | // .then(res => res.json())
16 | // .then(json => {
17 | // json.map(data => {
18 | // console.log("data1",data)
19 | // // tbody.append(td_fun(data));
20 | // tbody.innerHTML += td_fun(data);
21 |
22 | // })
23 | // }) .catch(error => {
24 | // console.error('Error:', error);
25 | // });
26 | // });
27 |
28 | // // create td
29 | // function td_fun(item) {
30 | // console.log("item",item)
31 | // let td = document.createElement('div');
32 | // td.innerHTML = `
33 | //
34 | //
![]()
35 | //
36 | //
Technology
37 | //
Lorem ipsum, dolor sit amet, consectetur adipisicing elit.
38 | //
39 | // Lorem ipsum dolor sit amet consectetur adipisicing elit.
40 | // Temporibus fuga reiciendis voluptatum rerum enim eligendi,
41 | // incidunt eveniet distinctio corporis repudiandae.
42 | //
43 | //
44 | //
![]()
45 | //
46 | //
${item.author}
47 | //
xx.xx.xxxx
48 | //
49 | //
50 | //
51 | //
63 |
Other blogs related to this category
64 |
65 |
66 |
67 |
68 |
Technology
69 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
70 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus consequat orci vitae
71 | hendrerit.
72 |
73 |
74 |
75 |
Author Name
76 | XX.XX.XXXX
77 |
78 |
79 |
80 |
81 |
82 |
Technology
83 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
84 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus consequat orci vitae
85 | hendrerit.
86 |
87 |
88 |
89 |
Author Name
90 | XX.XX.XXXX
91 |
92 |
93 |
94 |
95 |
96 |
97 |
Technology
98 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
99 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus consequat orci vitae
100 | hendrerit.
101 |
102 |
103 |
104 |
Author Name
105 | XX.XX.XXXX
106 |
107 |
108 |
109 |
110 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 | ## Blogzen
12 |
13 | [](https://github.com/DSC-JSS-NOIDA/blogzen/issues)
14 | [](https://github.com/DSC-JSS-NOIDA/blogzen/pulls)
15 | [](https://github.com/DSC-JSS-NOIDA/)
16 | [](https://github.com/DSC-JSS-NOIDA/blogzen) [](https://github.com/DSC-JSS-NOIDA/blogzen) [](https://github.com/DSC-JSS-NOIDA/blogzen) [](https://twitter.com/DSCJSSATEN)
17 |
18 | A collection of resources categorised by tech domains, languages, expertise and much more. Blogzen gives you a quick access to all the resources that you could need at a single place, within a click!
19 |
20 |
24 |
25 | ## Browser Support
26 |
27 | - **Firefox**: version 4 and up
28 | - **Chrome**: any version
29 | - **Safari**: version 5.2 and up
30 | - **Internet Explorer/Edge**: version 8 and up
31 | - **Opera**: version 9 and up
32 |
33 |
34 | ## Technology Stack used:
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 | - **Frontend**: HTML5, CSS3, JavaScript
43 |
44 | - **IDE**: VS Code
45 | - **Version Control**: Git and GitHub
46 |
48 |
49 |
52 |
53 |
54 |
60 |
61 |
62 |
63 |
64 |
65 | ## Our Contributors !! ✨
66 | ### Thanks to these wonderful people: ✨
67 |
68 |
77 |
78 | ## Get Started
79 |
80 | ### Demo
🎥
81 |
82 | #### Website for this repository :
83 |
84 |
85 |
86 | ### Steps for Contributing
87 |
88 |
Frontend
89 |
90 | - Fork and clone the Repo by typing the following commands in the terminal
91 |
92 | ```
93 | $ git clone https://github.com/
/blogzen.git
94 | $ cd blogzen
95 | ```
96 |
97 |
102 |
103 |
104 | - Now to add your resource to website, add an object with keys same as listed in existing objects in the file.
105 | - Save and commit your code.
106 | - Push to your fork of the repository , navigate to original repository and make a pull request.
107 |
108 |
118 |
119 | [](https://postimg.cc/BXXJkpyf)
120 |
121 |
122 |
123 | [](https://postimg.cc/K1CzxXb7)
124 |
125 | [](https://postimg.cc/CRR13h3L)
126 |
127 |
128 |
129 | - Make changes to the code(for ex- add an update route)
130 | - Stage your changes using:
131 |
132 | ```
133 | $ git add .
134 | ```
135 |
136 | - Commit your changes using:
137 |
138 | ```
139 | $ git commit -m "add any comment"
140 | ```
141 |
142 | - Push the changes to the forked repository using:
143 |
144 | ```
145 | $ git push
146 | ```
147 |
148 | - Navigate to the original repository and make a pull request
149 | ```
150 | Showing Your Remotes
151 |
152 | $ git remote
153 |
154 | $ git remote -v
155 | ```
156 | Adding Remote Repositories
157 | ```
158 | git remote add upstream https://github.com/DSC-JSS-NOIDA/blogzen.git
159 | ```
160 | Pulling from Your Remote
161 | ```
162 | $ git pull upstream main
163 | ```
164 |
165 | ## Design
166 | - The Prospective design of this project is here [Blogzen - Flutter](https://www.figma.com/file/lTsgJbWw8MRxWLa3c0PwWh/Blog-Project?type=design&node-id=0%3A1&t=9fkc7cb59hN4TlHW-1)
167 |
168 | ## Resources
169 |
170 | - **Git and Github**: [Git and Github for Beginners](https://www.youtube.com/watch?v=RGOj5yH7evk)
171 | - **Frontend**: [Frontend development for Beginners](https://www.youtube.com/playlist?list=PL9ooVrP1hQOH2k1SANK5rvq_EAgUKTPoK)
172 |
173 |
174 | #### Happy?? Star ⭐ this Repo. 🤩
175 |
176 | [](https://github.com/DSC-JSS-NOIDA/blogzen)
177 | [](https://github.com/DSC-JSS-NOIDA/blogzen)
178 | [](https://github.com/DSC-JSS-NOIDA/blogzen)
179 | [](https://github.com/DSC-JSS-NOIDA/blogzen)
180 |
181 | > Made By GDSC JSS NOIDA with ❤️
182 |
183 |
184 |
185 | [](https://github.com/DSC-JSS-NOIDA/blogzen)
186 | [](https://github.com/DSC-JSS-NOIDA/blogzen)
187 |
188 | > **_Need help?_** > **_Feel free to contact us @ [dscjssnoida@gmail.com](mailto:idscjssnoida@gmail.com?Subject=DSCHackFest2023)_**
189 |
190 | ## Connect with us
191 |
192 |
219 |
220 |
221 |
222 | ## License
223 |
224 | Licensed under the [MIT license](LICENSE).
225 |
226 |
--------------------------------------------------------------------------------
/database/jsonData.json:
--------------------------------------------------------------------------------
1 | {
2 | "blogs": [
3 | {
4 | "id": "001",
5 | "title": "How Technology Has Changed the Way We Work.",
6 | "author": "Piyush Gupta",
7 | "imageurl":"https://image.slidesharecdn.com/howtechnologyhaschangedthewaywework-140502122618-phpapp01/85/how-technology-has-changed-the-way-we-work-1-320.jpg?cb=1668200547",
8 | "img0":"https://i.postimg.cc/Cx4Vw3YM/Whats-App-Image-2022-05-17-at-9-03-36-PM.jpg",
9 | "date": "2021-05-05",
10 | "content": "Technology has had a profound impact on the way we work. From email to video conferencing, technology has made it easier than ever to communicate with colleagues and clients from around the world. But technology has also made work more demanding, as employees are expected to be constantly connected and available. One of the biggest changes brought about by technology is the rise of remote work. With the advent of high-speed internet and powerful mobile devices, it is now possible for employees to work from anywhere in the world. This has led to a shift away from traditional office spaces and towards more flexible working arrangements. Another way technology has changed the workplace is through automation. Many routine tasks can now be automated using software, freeing up employees to focus on more strategic activities. However, this also means that some jobs are becoming obsolete, as machines take over repetitive tasks. Despite these changes, technology has also created new job opportunities in areas such as software development, data analysis, and cybersecurity. These are all fields that require specialized knowledge and skills, and are likely to remain in high demand for the foreseeable future. In conclusion, technology has transformed the way we work, enabling us to be more productive and connected than ever before. However, it is important to recognize the potential downsides of technology, such as increased pressure to be constantly available and the risk of job displacement. As we continue to adapt to these changes, it is crucial that we find ways to make technology work for us, rather than the other way around.",
11 | "tags": [
12 | "Development",
13 | "Internet of Things (IoT)",
14 | "Technology"
15 | ],
16 | "comments": [
17 | {
18 | "author": "Katherine Davis",
19 | "date": "2021-06-08",
20 | "content": "Great article!"
21 | },
22 | {
23 | "author": "Christopher Lee",
24 | "date": "2023-06-17",
25 | "content": "Thanks for this valuable information."
26 | }
27 | ]
28 | },
29 | {
30 | "id": "002",
31 | "title": "The Rise of Artificial Intelligence in Healthcare",
32 | "author": "Sarah Johnson",
33 | "imageurl":"https://dashtechinc.com/wp-content/uploads/2021/05/Main-Banner-1.png",
34 | "img0":"https://www.pngitem.com/pimgs/m/214-2145309_blank-profile-picture-circle-hd-png-download.png",
35 | "date": "2021-03-15",
36 | "content": "Artificial intelligence (AI) is transforming the healthcare industry in numerous ways. From improving patient outcomes to reducing costs, AI is proving to be a valuable tool for healthcare providers. One of the key benefits of AI in healthcare is its ability to analyze vast amounts of data quickly and accurately. This data can be used to identify patterns and insights that would be difficult or impossible for humans to detect. For example, AI can analyze medical images to identify early signs of disease or help identify the best treatment plan for a patient based on their medical history. AI is also being used to develop new treatments and drugs. By analyzing vast amounts of data on the genetic makeup of patients and diseases, AI can identify potential drug candidates more quickly and accurately than traditional methods. This can lead to faster development of new treatments and improved patient outcomes. Another area where AI is having a significant impact is in patient monitoring. Wearable devices and other sensors can collect data on a patient's vital signs and activity levels, which can be analyzed in real-time using AI algorithms. This can help identify potential health issues before they become serious and allow for early intervention. Despite these benefits, there are also concerns about the use of AI in healthcare. One of the biggest concerns is the potential for bias in AI algorithms, which could lead to unequal treatment of patients. It is important that healthcare providers and AI developers work together to ensure that these algorithms are fair and unbiased. In conclusion, AI is transforming the healthcare industry in numerous ways, from improving patient outcomes to reducing costs. While there are certainly challenges to be addressed, the potential benefits of AI in healthcare are too significant to ignore. As we continue to develop and refine these technologies, we must remain mindful of their potential impact on patients and work to ensure that they are used ethically and responsibly. ",
37 | "tags": [
38 | "Natural Language Processing (NLP)",
39 | "Neural Networks",
40 | "Programming"
41 | ],
42 | "comments": [
43 | {
44 | "author": "William Thompson",
45 | "date": "2021-03-28",
46 | "content": "Exited for these futuristic tools."
47 | },
48 | {
49 | "author": "Andrew Wilson",
50 | "date": "2021-05-02",
51 | "content": "Lets rule the world :)"
52 | }
53 | ]
54 | },
55 | {
56 | "id": "003",
57 | "title": "The Importance of Branding in Today's Marketplace",
58 | "author": "Jane Williams",
59 | "imageurl":"https://www.thebalancemoney.com/thmb/LprfZw2yjM27mss9cNvMO6tdnmM=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/why-is-branding-important-when-it-comes-to-your-marketing-2294845-v4-5b4cb2b146e0fb003753f801.png",
60 | "img0":"https://www.pngitem.com/pimgs/m/214-2145309_blank-profile-picture-circle-hd-png-download.png",
61 | "date": "2021-06-10",
62 | "content": "Branding is more important than ever in today's competitive marketplace. With so many products and services vying for consumers' attention, a strong brand can help differentiate your business and build customer loyalty. One of the key benefits of branding is that it helps establish a company's identity and reputation. A strong brand communicates to customers what a business stands for, what it offers, and why it is unique. This can help attract and retain customers, as well as differentiate the business from its competitors. Another way branding can benefit a business is by increasing its perceived value. A strong brand can create a sense of quality, reliability, and trustworthiness, which can make customers more willing to pay a premium for its products or services. This can ultimately lead to increased profitability and long-term growth. Branding can also help a business build a sense of community and connection with its customers. By creating a strong brand identity and a compelling brand story, businesses can foster a sense of loyalty and emotional attachment among their customers. This can lead to increased customer retention, repeat business, and positive word-of-mouth referrals. Despite these benefits, many businesses neglect their branding efforts or fail to invest in them properly. This can be a costly mistake, as a weak or inconsistent brand can make it difficult for a business to stand out in a crowded marketplace. It is important for businesses to prioritize their branding efforts and work with experienced professionals to develop a strong, consistent brand identity. In conclusion, branding is essential for businesses looking to succeed in today's marketplace. By establishing a clear identity, building a strong reputation, and fostering a sense of community among customers, businesses can differentiate themselves and build long-term success. Whether you are just starting out or looking to refresh your brand, investing in branding is a critical step towards achieving your business goals. ",
63 | "tags": [
64 | "Brand Identity",
65 | "Logo Design",
66 | "Marketing Strategy"
67 | ],
68 | "comments": [
69 | {
70 | "author": "Olivia Martin",
71 | "date": "2021-06-14",
72 | "content": "Is personal branding is deffernt from product branding?"
73 | },
74 | {
75 | "author": "Ethan Baker",
76 | "date": "2022-02-09",
77 | "content": "Nice one."
78 | }
79 | ]
80 | },
81 | {
82 | "id": "004",
83 | "title": "The Importance of Effective Communication in Management",
84 | "author": "David Lee",
85 | "imageurl":"https://managementstudyguide.com/images/effective-communication-in-organization.png",
86 | "img0":"https://www.pngitem.com/pimgs/m/214-2145309_blank-profile-picture-circle-hd-png-download.png",
87 | "date": "2021-09-20",
88 | "content": "Effective communication is a critical skill for any manager. Whether you are leading a team, working with clients, or collaborating with other departments, clear and effective communication is essential for achieving your goals. One of the key benefits of effective communication in management is that it helps build trust and respect among team members. When managers communicate clearly and transparently, it helps create a sense of trust and openness among team members. This can lead to better collaboration, improved problem-solving, and increased productivity. Another way effective communication can benefit a manager is by improving their ability to influence and persuade others. When managers are able to communicate their ideas clearly and persuasively, it can help them gain buy-in from stakeholders, build support for their initiatives, and ultimately achieve their goals more effectively. Effective communication can also help managers identify and address problems more quickly. When managers are able to communicate with team members in a timely and effective manner, it can help identify issues before they escalate, and allow for prompt action to be taken. Despite these benefits, many managers struggle with communication, whether it be due to a lack of confidence, unclear messaging, or poor listening skills. To improve their communication skills, managers can seek out training and development opportunities, practice active listening, and seek feedback from team members. In conclusion, effective communication is a critical skill for managers looking to achieve their goals and build successful teams. By building trust, influencing others, and addressing problems more quickly, managers can improve their performance and build a stronger, more productive team. Whether you are a new manager or a seasoned pro, investing in your communication skills is a critical step towards achieving your goals. ",
89 | "tags": [
90 | "Leadership",
91 | "Organizational Behavior",
92 | "Project Management"
93 | ],
94 | "comments": [
95 | {
96 | "author": "Avery Jones",
97 | "date": "2022-01-21",
98 | "content": "Ya! I actually felt a a lot of problems due to poor communication..."
99 | },
100 | {
101 | "author": "Jacob Kim",
102 | "date": "2022-04-22",
103 | "content": "Inner management is more important before outer management :)"
104 | }
105 | ]
106 | },
107 | {
108 | "id": "005",
109 | "title": " The Power of Storytelling in Design",
110 | "author": "Emily Chen",
111 | "imageurl":"https://www.socialbeat.in/design-beat/wp-content/uploads/2020/08/DesignBeatBlog-ArtOfStorytelling-3.png",
112 | "img0":"https://www.pngitem.com/pimgs/m/214-2145309_blank-profile-picture-circle-hd-png-download.png",
113 | "date": "2021-05-03",
114 | "content": "Storytelling is a powerful tool in design that can help create a deeper emotional connection between users and products. By crafting a compelling narrative that resonates with users, designers can help create more engaging and memorable experiences. One of the key benefits of storytelling in design is that it can help differentiate products in a crowded market. By telling a unique and compelling story, designers can help products stand out and create a lasting impression in the minds of users. This can lead to increased brand recognition, customer loyalty, and positive reviews. Another way storytelling can benefit design is by creating a sense of empathy and understanding between users and products. When designers tell stories that are relatable and relevant to users' lives, it can help users feel more connected to products and more invested in their success. This can lead to increased engagement, repeat usage, and overall satisfaction. Storytelling can also be used to convey complex or technical information in a more accessible and engaging way. By using metaphors, analogies, and other storytelling techniques, designers can help make complex ideas more understandable and memorable for users. Despite these benefits, many designers overlook the importance of storytelling in their work or fail to use it effectively. To incorporate storytelling into their design process, designers can start by identifying the key values, emotions, and themes they want to convey, and then crafting a narrative that brings those elements to life. They can also work with copywriters, illustrators, and other creatives to help bring their stories to life. In conclusion, storytelling is a powerful tool in design that can help create more engaging, memorable, and successful products. By using storytelling to differentiate products, create empathy and understanding, and convey complex ideas, designers can build deeper connections with users and achieve greater success. Whether you are designing a website, product, or service, incorporating storytelling into your design process is a critical step towards creating a truly compelling experience. ",
115 | "tags": [
116 | "User Experience (UX) Design",
117 | "Interior Design",
118 | "Graphic Design"
119 | ],
120 | "comments": [
121 | {
122 | "author": "Zoey Garcia",
123 | "date": "2021-05-14",
124 | "content": "My favorit story teller is Steve Jobs."
125 | },
126 | {
127 | "author": "Gabriel Rivera",
128 | "date": "2021-07-10",
129 | "content": "I love Designing"
130 | }
131 | ]
132 | },
133 | {
134 | "id": "006",
135 | "title": "Native vs Hybrid App Development: Which One to Choose?",
136 | "author": "Amina Khan",
137 | "imageurl":"https://cdn.mindbowser.com/wp-content/uploads/2020/10/16155121/Native-Vs-Hybrid-App.jpg",
138 | "img0":"https://www.pngitem.com/pimgs/m/214-2145309_blank-profile-picture-circle-hd-png-download.png",
139 | "date": "2021-06-15",
140 | "content": "When it comes to developing mobile apps, there are two main approaches: native and hybrid. Both have their advantages and disadvantages, and choosing the right approach can be critical for the success of your app. Here's what you need to know: Native apps are built for specific platforms such as iOS or Android and are written in platform-specific languages such as Swift or Java. Native apps provide the best performance, user experience, and access to device features. They are ideal for complex apps that require high performance and rich features. Hybrid apps are built using web technologies such as HTML, CSS, and JavaScript and are wrapped in a native container that allows them to run on multiple platforms. Hybrid apps provide a cost-effective solution and can be developed quickly. They are ideal for simple apps that don't require advanced features. So which approach should you choose? It depends on your app's requirements and budget. If you need high performance and access to device features, native app development may be the right choice. If you're on a tight budget and need to develop an app quickly, hybrid app development may be a better option. In conclusion, both native and hybrid app development have their strengths and weaknesses, and choosing the right approach is crucial for the success of your app. By understanding the differences between the two, you can make an informed decision about which approach is right for your business.",
141 | "tags": [
142 | "Development",
143 | "App Development ",
144 | "Programming"
145 | ],
146 | "comments": [
147 | {
148 | "author": "Mia Turner",
149 | "date": "2021-09-14",
150 | "content": "Nice..."
151 | },
152 | {
153 | "author": "Samuel Scott",
154 | "date": "2022-07-07",
155 | "content": "Good!!!"
156 | }
157 | ]
158 | },
159 | {
160 | "id": "007",
161 | "title": "How to Edit Videos: The Complete Guide for Beginners",
162 | "author": "Kristi Hines",
163 | "imageurl":"https://assets-static.invideo.io/images/large/Guide_to_Video_Editing_7a591c7941.png",
164 | "img0":"https://www.pngitem.com/pimgs/m/214-2145309_blank-profile-picture-circle-hd-png-download.png",
165 | "date": "2022-08-28",
166 | "content": "If you're new to video editing, it can be overwhelming to know where to start. But with the right tools and a little bit of guidance, anyone can learn how to edit videos like a pro. In this comprehensive guide on video editing, writer and marketer Kristi Hines breaks down the basics of video editing for beginners. She covers everything from choosing the right video editing software to importing and organizing footage, trimming and editing clips, and adding transitions, effects, and music to create a polished final product. Hines explains that one of the most important decisions you'll make when starting out is choosing the right video editing software. There are many options available, from free programs like iMovie to more advanced tools like Adobe Premiere Pro. She recommends researching different software options and trying out a few to find the one that works best for you. Once you have your software, Hines walks you through the process of importing and organizing your footage. She explains the importance of creating a project folder to keep all of your assets in one place, and provides tips for naming and categorizing your files for easy reference later on. From there, Hines covers the basics of trimming and editing your clips, including how to use the timeline and different editing tools to make precise cuts and adjustments. She also provides tips for adding transitions between clips, as well as effects and music to enhance your video and make it more engaging for your audience. Throughout the article, Hines provides step-by-step instructions and screenshots to help beginners follow along and gain confidence in their video editing skills. She also includes a list of additional resources and tutorials for those who want to continue learning. Overall, 'How to Edit Videos: The Complete Guide for Beginners' is a valuable resource for anyone looking to dive into the world of video editing. With Hines' expert guidance and easy-to-follow instructions, you'll be well on your way to creating professional-looking videos in no time. The article includes tags such as.",
167 | "tags": [
168 | "Video editing",
169 | "Video marketing",
170 | "Content creation"
171 | ],
172 | "comments": [
173 | {
174 | "author": "Sophia Hernandez",
175 | "date": "2022-12-24",
176 | "content": "Editing is all about creativity"
177 | },
178 | {
179 | "author": "Ava Flores",
180 | "date": "2023-02-20",
181 | "content": "Bigginers should try to observe more."
182 | }
183 | ]
184 | },
185 | {
186 | "id": "008",
187 | "title": "Google’s Bard AI chatbot can now generate and debug code",
188 | "author": "Kirsten Korosec",
189 | "imageurl":"https://atlasiko.com/asserts/news/google-chatbot-bard-can-write-and-debug-code.jpg",
190 | "img0":"https://www.pngitem.com/pimgs/m/214-2145309_blank-profile-picture-circle-hd-png-download.png",
191 | "date": "2023-06-21",
192 | "content": "Google’s conversation AI tool Bard can now help software developers with programming, including generating code, debugging and code explanation — a new set of skills that were added in response to user demand. Coding has been one of the top requests Google has received from users, according to a Friday blog post by Google Research product lead Paige Bailey. Google said Friday it is launching these software development capabilities in more than 20 programming languages including C++, Go, Java, JavaScript, Python and TypeScript. Users can export Python code to Google Colab. Bard can also help with writing functions for Google Sheets. Collectively, this means that Bard, the generative AI experiment Google launched earlier this year, can review and help users debug their source code line by line. Google said developers can tell Bard “this code didn’t work, please fix it,” and it will help debug. It can also translate code from one language to another and explain code snippets, a helpful feature for those new to programming. Bard, which was created to compete with ChatGPT and other language models, didn’t quite stack up to its AI peers in TechCrunch’s own testing on chatbot performance. This latest set of skills could help Bard at least keep apace with ChatGPT and Claude — at least on paper. How well Bard is able to create, translate and debug code is another question. As Bailey cautioned in the blog post, Bard is still an early experiment and “may sometimes provide inaccurate, misleading or false information while presenting it confidently.” For instance, Bard may give developers working code that is incomplete or doesn’t produce the expected output. “Despite these challenges, we believe Bard’s new capabilities can help you by offering new ways to write code, create test cases, or update APIs. If Bard quotes at length from an existing open source project, it will cite the source,” Bailey wrote.",
193 | "tags": ["Google", "AI", "Bard"],
194 | "comments": [
195 | {
196 | "author": "Ryan Mercer",
197 | "date": "2023-06-22",
198 | "content": "If only I understood the full contours of a program before I started writing it. By the time I've supplied enough prompts, I've written the code. I can really only see this as being useful for improving IDEs, compilers, and related bug detection. Perhaps let it make some minor modifications to stuff in the standard library, but all new tools from scratch? Doubting it."
199 | },
200 | {
201 | "author": "Will Campbell",
202 | "date": "2023-06-23",
203 | "content": "Just a reminder to anyone. Bard does not know code. Bard is a language model and Google has put rules in place to suppress certain output, so that they don't look silly. Google has allowed Bard to reply in this way, and possibly added additional training, though the article doesn't give that information. Bard makes a best guess, on a per word bases, taking into account the prompt and the last few thousand words, and essentially replies with a word cloud that makes it seem as if it knows and can debug code. This is incredibly useful as Bard may generate code examples that contain information the user didn't know existed, and allow them to include that in their code. If it writes a fully functional program, it is only because it has been trained on so many examples of similar programs that it can generate with confidence, but Bard isn't aware of itself. It doesn't know programming languages, it doesn't even know what it seems to know. It just repeats what it has read, based on how likely each next word is, based on the last few thousand words."
204 | }
205 | ]
206 | },
207 | {
208 | "id": "009",
209 | "title": "Mastering the Art of Time Management: Tips for a Productive Workday",
210 | "author": "Emily",
211 | "imageurl":"https://uploads-ssl.webflow.com/62a77d20fd9ecb4a52626c7b/640b33064af92c10dcf1f2b7_timemanage%20(1).jpg",
212 | "img0":"https://www.pngitem.com/pimgs/m/214-2145309_blank-profile-picture-circle-hd-png-download.png",
213 | "date": "2023-05-04",
214 | "content": "Do you frequently struggle with completing your work tasks within the given deadline? Do you feel like you're always racing against the clock? If your answer is affirmative, then you're not alone. Time management is a skill that many of us find difficult, but it's crucial to master if we want to have a productive workday. In this post, we'll be providing you with some tips and tricks to enhance your time management abilities and maximize your workday. One of the most crucial things you can do to manage your time effectively is to prioritize your tasks. Begin by listing all the tasks you need to accomplish in a day and then sort them by importance. This will help you concentrate on the most crucial tasks first and ensure that you finish them on time. It's also critical to set realistic deadlines for each task and adhere to them. Another method to improve your time management skills is to eliminate distractions. It's easy to become sidetracked by notifications from social media, emails, or even office chitchat. To reduce distractions, attempt to turn off your phone or email notifications during work hours and locate a peaceful location to work if feasible. Finally, take frequent breaks throughout the day to restore your energy levels. Research indicates that taking short breaks can help boost productivity and creativity. Utilize this time to go for a stroll, stretch, or have a nutritious snack. By prioritizing tasks, minimizing distractions, and taking regular breaks, you can master the art of time management and have a productive workday. Remember, time is a valuable resource, and managing it effectively can assist you in achieving your objectives and maintaining a healthy work-life balance.",
215 | "tags": ["Time Management", "Productivity", "Work-Life Balance"],
216 | "comments": [
217 | {
218 | "author": "Jane",
219 | "date": "2023-05-05",
220 | "content": "Great tips, John! Prioritizing tasks has been a game-changer for me."
221 | },
222 | {
223 | "author": "Mark",
224 | "date": "2023-05-06",
225 | "content": "I struggle with distractions, but turning off my notifications has helped me stay focused"
226 | }
227 | ]
228 | },{
229 | "id": "010",
230 | "title": "Create High-Quality Video Content in Minutes with This AI Tool",
231 | "author": "Edmund Green",
232 | "imageurl":"https://i.ytimg.com/vi/sZHbKIDYyHI/maxresdefault.jpg",
233 | "img0":"https://www.pngitem.com/pimgs/m/214-2145309_blank-profile-picture-circle-hd-png-download.png",
234 | "date": "2023-05-06",
235 | "content": "Pictory.ai is an innovative solution that offers concise and engaging video content to help businesses capture the attention of their audience. The attention span of potential customers has decreased, and it has become more challenging to engage them with long-form content. Pictory uses AI technology to generate videos that are visually stunning and have high-quality graphics, animations, and text overlays. Pictory helps businesses stand out in a crowded market and keep their audience engaged by providing content that is both visually and intellectually stimulating. Additionally, Pictory’s video content can be easily shared on various online platforms, making it a versatile tool for digital marketers. Pictory can also help businesses save time and money in the content creation process. Instead of spending hours writing and editing lengthy blog posts or recording and editing long videos, businesses can use Pictory’s AI-generated videos to create concise and engaging content that resonates with their audience. One of Pictory’s main features is its text-to-video software which is very easy to use. Users can paste in their own script or give it the URL to an article, and Pictory will automatically create a script for them to use. Pictory has a massive stock library of media – over 3 million stock clips – and will pair the script with imagery and video. Users can then edit the video however they want by adding and deleting scenes, swapping media, or uploading their own pictures and video. Pictory also gives users the opportunity to customise things like the colour scheme and font and even add their own brand’s logo as a watermark. Pictory’s video creation feature is beneficial for content creators, social media managers, marketers, online course creators, and small business owners. By providing an affordable and easy-to-use solution, Pictory stands out as the best way to create engaging videos online.",
236 | "tags": ["AI", "Content Creation", "Digital Marketing"],
237 | "comments": [
238 | {
239 | "author": "Manu Mathur",
240 | "date": "2023-05-06",
241 | "content": "I'm blown away by the number of stock clips available in Pictory's media library over 3 million! That's an incredible resource for businesses looking to create engaging videos without breaking the bank. I'm excited to see how I can incorporate this tool into my social media strategy."
242 | },
243 | {
244 | "author": "Sagar",
245 | "date": "2023-05-06",
246 | "content": "Wow, Pictory.ai sounds like a game-changer for businesses struggling to capture their audience's attention. With decreasing attention spans, it's essential to have visually stunning and intellectually stimulating content, and Pictory offers just that. Plus, the ability to easily share videos across various online platforms is a huge bonus. I can't wait to give it a try!"
247 | }
248 | ]
249 | }
250 | ,{
251 | "id": "011",
252 | "title": "The Rise of NFTs: A New Era for Digital Art",
253 | "author": "Zain Mümtaz",
254 | "imageurl":"https://www.prayananimation.com/blog/wp-content/uploads/2022/02/The-revoltionary-rise-of-NFTs-in-the-Digital-Art-world.jpg",
255 | "img0":"https://www.pngitem.com/pimgs/m/214-2145309_blank-profile-picture-circle-hd-png-download.png",
256 | "date": "2023-05-03",
257 | "content": "In recent years, a new trend has emerged in the world of art: the rise of NFTs or non-fungible tokens. NFTs are unique digital assets that are stored on the blockchain, making them verifiable and immutable. They have become increasingly popular among digital artists who are looking for new ways to monetize their work. With NFTs, artists can sell their digital creations as one-of-a-kind items, allowing them to retain ownership and control over their work. This has opened up a new era for digital art, where creators can now make a living from their work in ways that were previously impossible. NFTs have also attracted attention from collectors and investors, who are interested in owning unique pieces of digital art. Some NFTs have sold for millions of dollars, including a digital artwork by Beeple that sold for $69 million at a Christie's auction in March 2021. This has sparked a new wave of interest in NFTs, with more and more artists and creators jumping on board. However, the rise of NFTs has also raised questions about the environmental impact of blockchain technology, which is used to create and store NFTs. Critics have pointed out that the energy consumption required for mining and maintaining the blockchain is unsustainable and could have a significant impact on the environment. Despite these concerns, NFTs are here to stay and are poised to transform the world of digital art in ways that we have yet to fully understand. As technology continues to evolve, it's exciting to think about the new possibilities that NFTs will bring to the world of art and beyond.",
258 | "tags": ["NFTs", "Digital Art", "Blockchain", "Technology", "Cryptocurrency"],
259 | "comments": [
260 | {
261 | "author": "Bertrand",
262 | "date": "2023-05-03",
263 | "content": "Interesting read on NFTs and their investment potential. Got me thinking about diversifying my portfolio beyond traditional investments."
264 | },
265 | {
266 | "author": "Jones Leroy",
267 | "date": "2023-05-04",
268 | "content": "Interesting article on NFTs and how they can change the art industry. Technology constantly impacts our lives, and it's fascinating to see how."
269 | }
270 | ]
271 | }
272 | ,{
273 | "id": "012",
274 | "title": "Mind-reading technology has arrived",
275 | "author": "Sigal Samuel",
276 | "imageurl":"https://scottamyx.com/wp-content/uploads/2017/08/mind-reading.jpg",
277 | "img0":"https://www.pngitem.com/pimgs/m/214-2145309_blank-profile-picture-circle-hd-png-download.png",
278 | "date": "2023-05-04",
279 | "content": "Well, the technology is no longer just “coming.” It’s here. With the help of AI, scientists from the University of Texas at Austin have developed a technique that can translate people’s brain activity — like the unspoken thoughts swirling through our minds — into actual speech, according to a study published in Nature. In the past, researchers have shown that they can decode unspoken language by implanting electrodes in the brain and then using an algorithm that reads the brain’s activity and translates it into text on a computer screen. But that approach is very invasive, requiring surgery. It appealed only to a subset of patients, like those with paralysis, for whom the benefits were worth the costs. So researchers also developed techniques that didn’t involve surgical implants. They were good enough to decode basic brain states, like fatigue, or very short phrases — but not much more. Now we’ve got a non-invasive brain-computer interface (BCI) that can decode continuous language from the brain, so somebody else can read the general gist of what we’re thinking even if we haven’t uttered a single word. How is that possible? It comes down to the marriage of two technologies: fMRI scans, which measure blood flow to different areas of the brain, and large AI language models, similar to the now-infamous ChatGPT. In the University of Texas study, three participants listened to 16 hours of storytelling podcasts like The Moth while scientists used an fMRI machine to track the change in blood flow in their brains. That data allowed the scientists, using an AI model, to associate a phrase with how each person’s brain looks when it hears that specific phrase. Because the number of possible word sequences is so vast, and many of them would be gibberish, the scientists also used a language model — specifically, GPT-1 — to narrow down possible sequences to well-formed English and predict which words are likeliest to come next in a sequence. The result is a decoder that gets the gist right, even though it doesn’t nail every single word. For example, participants were asked to imagine telling a story while in the fMRI machine. Later, they repeated it aloud so the scientists could see how well the decoded story matched up with the original. When the participant thought, “Look for a message from my wife saying that she had changed her mind and that she was coming back,” the decoder translated: “To see her for some reason I thought she would come to me and say she misses me.” Here’s another example. When the participant thought, “Coming down a hill at me on a skateboard and he was going really fast and he stopped just in time,” the decoder translated: “He couldn’t get to me fast enough he drove straight up into my lane and tried to ram me.” It’s not a word-for-word translation, but much of the general meaning is preserved. This represents a breakthrough that goes well beyond what previous brain-reading tech could do — and one that raises serious ethical questions.",
280 | "tags": ["AI", "Reasearch", "Language", "Technology"],
281 | "comments": [
282 | {
283 | "author": "David",
284 | "date": "2023-05-05",
285 | "content": "Breakthrough in brain-computer interface technology raises ethical concerns about privacy. Will thoughts remain private or accessible through technology? Implications must be considered."
286 | },
287 | {
288 | "author": "Maria",
289 | "date": "2023-05-06",
290 | "content": "I see the benefits of this technology for those unable to speak due to conditions like paralysis, but we must consider how it could be misused. Could it be used to extract information from individuals without their consent? We need to proceed with caution and carefully consider the potential consequences."
291 | }
292 | ]
293 | }
294 | ,{
295 | "id": "013",
296 | "title": "Tim Cook addresses rising interest in AI, saying more future Apple products will use it",
297 | "author": "Daniel Sims",
298 | "imageurl":"https://images.cointelegraph.com/cdn-cgi/image/format=auto,onerror=redirect,quality=90,width=1434/https://s3.cointelegraph.com/uploads/2023-05/fbf0370a-0012-4580-8ae0-5703aa773118.jpg",
299 | "img0":"https://www.pngitem.com/pimgs/m/214-2145309_blank-profile-picture-circle-hd-png-download.png",
300 | "date": "2023-05-06",
301 | "content": "As tech companies increasingly latch onto generative AI as the latest dominant trend, Apple remains suspiciously quiet on the topic. CEO Tim Cook finally commented on the technology in the company's Q2 2023 earnings call, expressing interest without revealing any concrete plans. Apple CEO Tim Cook admitted that Apple is interested in the potential of emerging AI technology in a recent earnings call. However, he also expressed the need for caution as competitors like Google and Microsoft dive into generative AI applications in a way some have called clumsy. Cook reiterated Apple's policy of keeping its future roadmaps private in response to a question about AI, but he admitted the potential is huge. He pointed out how Apple has already used AI for features like crash detection and heart monitoring, and said the company will keep incorporating AI. However, the CEO stressed that Apple will approach AI carefully, noting that there are still issues to solve. Cook was likely referring to the controversies surrounding generative AI technologies like ChatGPT or Midjourney. Microsoft, Google, and others are developing chatbots based on OpenAI's technology underpinning ChatGPT, but anyone who has used it so far knows it often makes things up. AI-based image generators like DALL-E, Stable Diffusion, and Midjourney, create impressive and often believable images but are trained on human-made pictures, raising copyright-related questions. Adobe is traversing those murky waters while incorporating generative AI into its suite. Additionally, Amazon recently unveiled Bedrock, a tool to help businesses to leverage AI models. Apple, meanwhile, hasn't unveiled any products or services utilizing generative AI. Cook's latest comments confirm speculation that Apple wants to avoid the problems that have emerged from tools like ChatGPT. Prior reports allege that Apple's caution has caused internal friction regarding the development of its AI companion, Siri. A sticking point was the company's preference to have Siri generate pre-written responses instead of relaying responses from the internet to avoid something like ChatGPT's hallucinations. Eventually, three Siri engineers left Apple to join Google. Cook's remarks were part of an earnings call for the quarter ending April 1 in which the company exceeded projected expectations. Although Mac and iPad revenue were down, iPhone growth helped drive a positive quarter for the company.",
302 | "tags": ["AI", "Google", "Microsoft", "Chatbots", "Generative AI"],
303 | "comments": [
304 | {
305 | "author": "Hexic",
306 | "date": "2023-05-06",
307 | "content": "Tim Cook addresses rising interest in AI, saying more future Apple products will use it ...after the rest of the market adopts AI for years, and works out the kinks ahead of time. Just like it's always been. This is the way."
308 | },
309 | {
310 | "author": "Uncle Al",
311 | "date": "2023-05-06",
312 | "content": "Isn't Cook way overdue for retirement?"
313 | }
314 | ]
315 | }
316 | ,{
317 | "id": "014",
318 | "title": "Google introduces blue verified checkmarks to Gmail",
319 | "author": "Rob Thubron ",
320 | "imageurl":"https://ebuzzpro.com/wp-content/uploads/2023/05/Google-Gmail-Verified-Blue-Checkmarks-1024x576.webp",
321 | "img0":"https://www.pngitem.com/pimgs/m/214-2145309_blank-profile-picture-circle-hd-png-download.png",
322 | "date": "2023-05-04",
323 | "content": "What just happened? We can't seem to escape blue verification marks these days. With Twitter, Instagram, Facebook, and others embracing verified checkmarks, Google is joining the party with its own blue icon for Gmail. It's not just an ego thing, though; the company says these icons will help users identify scam emails. The blue checkmark will automatically appear in emails from companies that are part of Gmail's Brand Indicators for Message Identification (BIMI) feature, which arrived in 2021. BIMI requires senders to use strong authentication with DMARC (Domain-based Message Authentication, Reporting, and Conformance) and verify their brand logo with a VMC, issued by a Certification Authority such as Entrust or DigiCert. This allows senders to display a logo in the avatar slot in emails, next to the their name and address. Gmail users will now see a checkmark icon for senders that have adopted BIMI, further helping them identify which emails are legitimate and which ones are impersonators. If you find a blue seal with a white tick in a Gmail message, you can hover over it to see a pop-up that reads. The sender of this email has verified that they own and the logo in the profile image. The pop-up also contains a link that directs to more information about the checkmark. Google says that strong email authentication helps users and email security systems identify and stop spam while enabling senders to leverage their brand trust. The Gmail brand verification has now started rolling out. It will be available for free to those with personal Google accounts, all Google Workspace customers, and legacy G Suite Basic and Business customers. Admins can visit the Help Center to learn more about setting up BIMI. The timing of Gmail's new feature comes as Twitter and Elon Musk are embroiled in a very public verification shambles. The company got rid of its legacy blue ticks last week, and there are reports that Musk has been giving some celebs the verified mark for free after they refused to pay the $8 per month. According to the LA Times, such a move could land Musk in legal trouble for violating US Federal Trade Commission regulations surrounding consumer protection and false advertising.",
324 | "tags": ["Google", "Gmail", "Verification"],
325 | "comments": [
326 | {
327 | "author": "Plutoisaplanet",
328 | "date": "2023-05-04",
329 | "content": "I guarantee these blue checkmarks will be used to phish people"
330 | },
331 | {
332 | "author": "Wiyosaya",
333 | "date": "2023-05-04",
334 | "content": "Undoubtedly. And, IMO, its hypocritical. Google is constantly mining everyone's data for info that they can market and, at the same time, trying to convince everyone that they are trying to protect them and their privacy. This is just another one of those efforts, as I see it. Maybe as an aside or a possible example - I use sneakemail to maintain anonymity with vendors on the internet and it has kept my e-mail virtually spam-free over the years. A recent vendor that I dealt with has a gmail address as a contact address. When I tried to send an email to that vendor with a sneakemail address as the return address, gmail just gave an automatic bounce message giving, to me, anyway, a BS explanation that the from address was not verifiable and therefore must be a scam. The only thing that I could think was how hypocritical of them - they scan everyone's e-mails, and likely mine and market the data, then sell that to their clients, and they are policing their users' e-mail in the name of protection? 🤣 This crap is why I avoid using google as if google were Ebola."
335 | }
336 | ]
337 | }
338 | ,{
339 | "id": "015",
340 | "title": "How to bring your designs to life with interactive animation",
341 | "author": "Renee Fleck",
342 | "imageurl":"https://framerusercontent.com/images/THZTTBgxQcFA39a6du4XWbZvsM.jpeg",
343 | "img0":"https://www.pngitem.com/pimgs/m/214-2145309_blank-profile-picture-circle-hd-png-download.png",
344 | "date": "2023-05-02",
345 | "content": "Immersive content has gained popularity in recent years due to advancements in interactivity and animation. Interactive animation allows designers to create more engaging user experiences that respond to user input in real-time. This animation allows viewers to interact and engage with the design on multiple levels, creating a dynamic and engaging experience. The benefits of interactive animation are numerous. It can help to improve engagement and conversions by prompting users to take specific actions. It also helps to explain complex concepts in a more interactive and engaging way, guiding users through complex processes or actions. Additionally, it can add an element of fun and playfulness to the user experience, resulting in increased brand loyalty. For those looking to incorporate interactive animation into their designs, there are a few tips to keep in mind. Firstly, it's essential to choose the right tools. Rive is a great option for creating visually stunning and thematically flawless interactive animations. Secondly, it's important to use animations sparingly and intentionally, only animating what is necessary to capture the audience's attention. Finally, testing is crucial to ensure that the animations work as intended on different browsers and devices. In conclusion, interactive animation is an excellent tool for enhancing design work with interactivity. When used thoughtfully, it can help to improve engagement and conversions, make difficult concepts easy to understand, and add an element of fun to the user experience. By choosing the right tools, using animations sparingly and intentionally, and testing designs thoroughly, designers can successfully incorporate interactive animation into their product designs.",
346 | "tags": ["Design", "Tools", "User Experience"],
347 | "comments": [
348 | {
349 | "author": "Sarah",
350 | "date": "2023-05-08",
351 | "content": "This is a great overview of interactive animation and its benefits. I especially like the tip about using animations sparingly and intentionally to avoid overwhelming the user."
352 | },
353 | {
354 | "author": "Lisa",
355 | "date": "2023-05-09",
356 | "content": "This post does a great job of explaining the benefits of interactive animation, especially how it can improve engagement and conversions. I'm definitely going to look into incorporating more interactive elements into my designs."
357 | }
358 | ]
359 | },
360 | {
361 | "id": "016",
362 | "title": "React Hooks Complete Guide | useState() | useEffect() | Rules for React Hooks ",
363 | "author": "CronJ",
364 | "imageurl":"https://i.pinimg.com/564x/b8/b0/94/b8b094d897ac458e6bb1bb1e04c7fc6d.jpg",
365 | "img0":"https://www.pngitem.com/pimgs/m/214-2145309_blank-profile-picture-circle-hd-png-download.png",
366 | "date": "2023-05-02",
367 | "content": "React Hooks is a feature introduced in React 16.8 that revolutionized the way developers write components. With React Hooks, developers can now add state, lifecycle methods, and other React features to functional components, eliminating the need for class components.React Hooks provides a set of predefined hooks such as useState, useEffect, useContext, and more, which can be easily integrated into functional components. The useState hook allows for managing local component state, enabling dynamic rendering and interactive behavior. The useEffect hook enables handling side effects, such as fetching data from an API or subscribing to events. With useContext, components can access global state and share data without prop drillingOne of the significant advantages of React Hooks is that it simplifies component logic and promotes code reusability. Developers can extract custom hooks, encapsulating stateful logic, and share them across multiple components.React Hooks also promotes cleaner code by reducing the nesting of higher-order components and making it easier to reason about the component's behavior. It enhances the readability and maintainability of the codebase, leading to faster development cycles and fewer bugs.In conclusion, React Hooks has transformed the way developers write components in React, providing a more elegant and functional approach. It offers improved code organization, better reusability, and a simpler mental model for understanding and managing stateful behavior in functional components.",
368 | "tags": ["React", "useState", "UseEffect","Hooks"],
369 | "comments": [
370 | {
371 | "author": "Harry",
372 | "date": "2023-05-08",
373 | "content": "I love reading the React tutorials on this blog. They are beginner-friendly and take a hands-on approach, guiding you step-by-step through building real-world applications. The code snippets and explanations make it easy to follow along and grasp the concepts quickly."
374 | },
375 | {
376 | "author": "Jenny",
377 | "date": "2023-05-09",
378 | "content": "The React blog has a great mix of tutorials, case studies, and opinion pieces. It's refreshing to read articles that tackle real-world challenges and share insights from experienced React developers. The blog fosters a sense of community and encourages discussion and collaboration among readers."
379 | }
380 | ]
381 | },
382 | {
383 | "id": "017",
384 | "title": "JavaScript Array Group",
385 | "author": "David Walsh",
386 | "imageurl":"https://i.pinimg.com/564x/eb/22/48/eb2248728fbdf271a3047f42d7bd2b87.jpg",
387 | "img0":"https://www.pngitem.com/pimgs/m/214-2145309_blank-profile-picture-circle-hd-png-download.png",
388 | "date": "2023-05-02",
389 | "content": "Array grouping is a fundamental concept in JavaScript that allows developers to organize and manipulate data efficiently. Whether you're working with large datasets, building complex applications, or performing data analysis, understanding how to effectively group arrays can greatly enhance your coding capabilities. In this blog post, we will explore the ins and outs of array grouping in JavaScript and provide you with valuable insights and techniques to level up your programming skills.Array grouping involves categorizing elements in an array based on certain criteria, such as a shared property or value. This process allows you to organize data into logical groups, making it easier to access, process, and display information. By leveraging array grouping techniques, you can streamline your code, improve performance, and create more robust applications.We will dive into various techniques for array grouping, starting with the basics such as grouping by a single property or multiple properties. You will learn how to use built-in JavaScript methods like reduce and forEach to efficiently group arrays. Additionally, we will explore advanced concepts like nested grouping, key transformation, and custom grouping logic, empowering you to handle complex data structures with easeEfficient array grouping becomes crucial when dealing with large datasets. We will discuss strategies to optimize performance, including using hash maps, memoization, and implementing algorithms with lower time complexity. These techniques will enable you to process and group arrays quickly and effectively, even with substantial amounts of data.To demonstrate the practicality of array grouping, we will showcase real-world use cases. From e-commerce applications to task management systems, you will see how array grouping can be applied to solve common programming challenges. By understanding these practical examples, you'll gain a deeper appreciation for the versatility and power of array grouping.Mastering array grouping in JavaScript opens up a world of possibilities for organizing and manipulating data. By learning the various techniques and strategies covered in this blog post, you will become a more proficient JavaScript developer, equipped with the tools to tackle complex projects and optimize performance. So, let's embark on this journey together and unlock the full potential of array grouping in JavaScript. Happy coding!",
390 | "tags": ["Javascript", "Arrays", "Data Structure","Grouping"],
391 | "comments": [
392 | {
393 | "author": "Lima",
394 | "date": "2023-05-08",
395 | "content": "The blog post was incredibly informative and well-written. It provided a comprehensive overview of the topic and explained the concepts in a clear and concise manner. The examples and code snippets were particularly helpful in understanding the implementation. Overall, a great resource for anyone looking to learn about JavaScript array grouping"
396 | },
397 | {
398 | "author": "Divine",
399 | "date": "2023-05-09",
400 | "content": "The blog post on JavaScript array grouping exceeded my expectations. The author not only explained the basic grouping techniques but also delved into more advanced concepts like nested grouping and key transformation. The inclusion of real-world use cases and practical scenarios made it easy to see the relevance and application of the concepts. I thoroughly enjoyed reading this post and gained valuable knowledge from it."
401 | }
402 | ]
403 | },
404 | {
405 | "id": "018",
406 | "title": "CSS in real life",
407 | "author": "Michelle Barker",
408 | "imageurl":"https://i.pinimg.com/564x/8e/95/47/8e95479da2c5e493b835c8533c2d5ba5.jpg",
409 | "img0":"https://www.pngitem.com/pimgs/m/214-2145309_blank-profile-picture-circle-hd-png-download.png",
410 | "date": "2023-05-02",
411 | "content": "It’s been a while since my last article on here (well, a month is a while for me, anyway 😅), as I’ve been busy with my head down preparing for my talk on modern CSS layout at Beyond Tellerand, which is (checks notes) tomorrow!Although I haven’t had much time for blogging, it has given me a chance to delve once again into messaging about with CSS layout and the :has() pseudo-class, or “parent selector”. I’ve already written about :has() in a previous post, and you can read an in-depth guide by Jen Simmons on the Webkit blog. But to recap, :has() allows us to select a parent or sibling of an element by taking a relative selector list as its argument (to paraphrase MDN).But what I’m realising as I continue to play around with :has() is that in practice, we can select any element in the DOM relative to another, as long as they share a common ancestor — which they should, right? As any element that we want to select is going to have the as its ancestor. This makes it pretty powerful.So here a couple of demos to that effect. (You’ll need to view these in a browser that supports :has(), e.g. Chrome or Safari.) In this one, hovering on a list item on the left animates our grid tracks on the right. They share a common wrapper element as their ancestor, but they don’t necessarily have to.In this second demo, we’re adding a background colour to the element targeted by a link in another on hover or click. This is perhaps a bit of a silly demo, but I can see some potential use cases, such as providing a visual clue for users as to the targeted section of a document.Lastly, this demo (best viewed on desktop) opens a panel (using animated grid tracks) when the user clicks the link on the left. The link’s target is hidden within the collapsed panel. (It also combines container queries for the content on the right.) Hiding and revealing content is often something that should be done with JS, and there are likely some accessibility issues here — I’m not suggesting you should do anything like this in production. But it’s interesting to see the power of CSS today!",
412 | "tags": ["CSS", "Life", "User Interface","Styling"],
413 | "comments": [
414 | {
415 | "author": "David",
416 | "date": "2023-05-08",
417 | "content": "I stumbled upon the 'CSS in Real Life' blog while searching for CSS resources, and I must say it's been a game-changer for me. The blog posts are filled with practical examples and tutorials that have helped me improve my CSS skills significantly. The explanations are clear, concise, and easy to follow, making it a valuable resource for both beginners and experienced developers. The author's attention to detail and focus on real-life scenarios make the content relatable and applicable to real-world projects. I highly recommend the 'CSS in Real Life' blog to anyone looking to level up their CSS game."
418 | },
419 | {
420 | "author": "Monty",
421 | "date": "2023-05-09",
422 | "content": "I've been a fan of the 'CSS in Real Life' blog for quite some time now, and it never fails to impress me. The blog consistently delivers high-quality content that goes beyond the basics of CSS. The author dives deep into various CSS techniques and covers topics like responsive design, flexbox, and grid layout in a practical and engaging manner. What sets this blog apart is the inclusion of real-life examples and code snippets that allow readers to see the concepts in action. The 'CSS in Real Life' blog has become my go-to resource for staying up-to-date with the latest CSS trends and techniques"
423 | }
424 | ]
425 | },
426 | {
427 | "id": "019",
428 | "title": "Figma for Beginners: The Basics",
429 | "author": "cPrime",
430 | "imageurl":"https://i.pinimg.com/564x/cb/6d/79/cb6d79547234e4ecebdb898b4078ce65.jpg",
431 | "img0":"https://www.pngitem.com/pimgs/m/214-2145309_blank-profile-picture-circle-hd-png-download.png",
432 | "date": "2023-05-02",
433 | "content": "Figma is an online design and prototyping tool. It’s also a collaborative design tool for teams and designers. It’s free to use, but it also has a paid professional and organizational plan. You can use Figma for UI/UX designs, graphics design, wireframing, diagramming, brainstorming, and remote designs.To get started with Figma, visit figma.com and sign up for a free account. The free plan covers three design files, one project, unlimited Figma drafts, and FigJam. As your project scales up with more collaborators and files, you might need a paid plan. But for this tutorial, the free plan is enough.After signing up for an account, you’ll get a pop-up that prompts you to create a team for your project.Next, select a design type. The options are Figma or FigJam. For the purpose of this post, select the Figma type because you’ll design and prototype your designs. Then, select a blank canvas to begin your design from scratch.The Figma editor is where you create your design files, prototype, and collaborate with your team.After opening up the editor, edit the filename by clicking on the word “Untitled” in the center of the top bar. Let’s briefly go over the editor’s panels.The panel on the left side of the Figma editor contains the layers tab and assets tab.The layers tab contains your design file pages. You can create more pages, but under the free plan, you can have a maximum of three pages. The layers tab is also where you can see your design layers, which allow you to edit and rearrange each component of your design.The basis for your design relies on how well you can use the tools panel to create a complete and meaningful design. The tools panel contains all the building blocks for your designs.An arrow icon represents tools you can use to move design components. There are two tools hereThe move tool is used to move your designs in the editor without editing the design itself.The scale tool is used to scale objects in the canvas either larger or smaller.The region tools are used specify any region on the design canvasThe frame panel, located on the left side of your editor, is where you can find different frames. These frames include phone, tablet, desktop, paper, watch, presentation, and social media.The slice tool can slice an object in the design canvas.The shape tool contains the most important building blocks for your design. These shapes serve as the foundation for your designs. In it, you’ll find the rectangle, line, arrow, eclipses, polygon, and star tools.The remaining tools, like the comment, share, and play buttons, are for collaboration and prototyping.In this post, you learned how to get started with Figma. You created a design using the design tools in the Figma editor. If you’re interested in getting started with UI/UX design, you can check out the Cprime course on Figma for UX/UI Design.",
434 | "tags": ["Figma", "User Experience", "User Interface","Prototyping"," UI/UX Design","Graphic Design"],
435 | "comments": [
436 | {
437 | "author": "Hardwell",
438 | "date": "2023-05-08",
439 | "content": "The 'Figma for Beginners: The Basics' blog post was incredibly helpful in introducing me to the world of Figma. As someone new to design tools, I found the step-by-step explanations and visuals to be clear and easy to follow. The author did a great job covering the essential features of Figma, from creating artboards to working with layers and components. This blog post provided a solid foundation for me to start exploring Figma and gave me the confidence to design my own projects. I highly recommend this blog post to anyone looking to get started with Figma"
440 | },
441 | {
442 | "author": "chris",
443 | "date": "2023-05-09",
444 | "content": "The 'Figma for Beginners: The Basics' blog post exceeded my expectations. The author's writing style is engaging and concise, making it easy to grasp the fundamentals of Figma quickly. The step-by-step tutorials were particularly useful, as they allowed me to follow along and practice what I learned. I appreciated the inclusion of tips and shortcuts, which showed me how to work efficiently in Figma. Whether you're a designer or a developer looking to learn Figma, this blog post is a fantastic starting point. It covers all the essential aspects and empowers you to create beautiful designs."
445 | }
446 | ]
447 | },
448 | {
449 | "id": "020",
450 | "title": "Adobe XD:Getting Started",
451 | "author": "Arden",
452 | "imageurl":"https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/16/courses/1316/preview_image/beginner-to-advanced-with-adobe-xd-auto-animate-400x277.png",
453 | "img0":"https://www.pngitem.com/pimgs/m/214-2145309_blank-profile-picture-circle-hd-png-download.png",
454 | "date": "2023-05-02",
455 | "content": "Adobe XD is a leading design and prototyping tool that has gained popularity among UI/UX designers. With its comprehensive set of features and intuitive interface, XD empowers designers to create interactive prototypes, wireframes, and user interfaces for various digital products. The software enables designers to seamlessly collaborate, iterate, and share their designs with team members and stakeholders. From its powerful design tools to responsive design capabilities and integration with other Adobe products, Adobe XD offers a robust platform for designers to bring their creative visions to life and streamline the design-to-development process.",
456 | "tags": ["Adobe XD", "User Experience", "User Interface","Prototyping"," UI/UX Design","Graphic Design"],
457 | "comments": [
458 | {
459 | "author": "Max",
460 | "date": "2023-05-08",
461 | "content": "Prototype complex interactions and animations effortlessly with Adobe XD's auto-animate and voice interaction features."
462 | },
463 | {
464 | "author": "Tim",
465 | "date": "2023-05-09",
466 | "content": "Design and prototype with ease using Adobe XD's intuitive interface and comprehensive feature set."
467 | }
468 | ]
469 | },
470 | {
471 | "id": "021",
472 | "title": "Bootstrap: A poweful front-end framework",
473 | "author": "Marry",
474 | "imageurl":"https://tuhoclaptrinh.edu.vn/upload/post/16/00/35/hoc-bootstrap-co-ban-787640.jpg",
475 | "img0":"https://www.pngitem.com/pimgs/m/214-2145309_blank-profile-picture-circle-hd-png-download.png",
476 | "date": "2023-05-02",
477 | "content":"Bootstrap is a powerful framework for web development that offers rapid development capabilities, responsiveness, cross-browser compatibility, customization options, and a supportive community. It provides pre-designed components and a flexible grid system, allowing developers to quickly prototype and launch websites that look great on different devices. With Bootstrap, you can ensure consistency in design and easily customize and extend its functionality. Its active community and comprehensive documentation make it an excellent choice for developers of all levels. Embrace Bootstrap to simplify your web development process and create visually appealing, user-friendly websites.",
478 | "tags": ["Bootstrap", "User Experience", "CSS","Prototyping","Styling","Web design"],
479 | "comments": [
480 | {
481 | "author": "Ally",
482 | "date": "2023-05-08",
483 | "content": "Simplify your front-end development with Bootstrap's pre-designed components."
484 | },
485 | {
486 | "author": "Harley",
487 | "date": "2023-05-09",
488 | "content": "Harnessing the power of Bootstrap for rapid prototyping and development."
489 | }
490 | ]
491 | },
492 | {
493 | "id": "022",
494 | "title": "Tailwind CSS: Utility Framework",
495 | "author": "Allen",
496 | "imageurl":"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20230310132857/TailwindCSS.jpg",
497 | "img0":"https://www.pngitem.com/pimgs/m/214-2145309_blank-profile-picture-circle-hd-png-download.png",
498 | "date": "2023-05-02",
499 | "content":"Tailwind CSS is a utility-first CSS framework that has gained significant popularity among web developers. Unlike traditional frameworks that focus on pre-defined components, Tailwind CSS takes a different approach by providing a comprehensive set of utility classes that can be directly applied to HTML elements. These utility classes offer a wide range of styling options, such as margin, padding, typography, colors, and more. With Tailwind CSS, developers have granular control over every aspect of their website's design. The framework promotes a rapid and efficient development process, allowing developers to quickly build and customize unique user interfaces without the need for writing custom CSS. By utilizing Tailwind CSS's utility classes, developers can create clean and maintainable code while still achieving a highly customized and visually appealing design. ",
500 | "tags": ["Tailwind","CSS","Prototyping","Styling","Web design"],
501 | "comments": [
502 | {
503 | "author": "Hardin",
504 | "date": "2023-05-08",
505 | "content": "Streamline your styling process with Tailwind's extensive utility class library."
506 | },
507 | {
508 | "author": "Rose",
509 | "date": "2023-05-09",
510 | "content": "Develop responsive websites faster with Tailwind's utility-first methodology."
511 | }
512 | ]
513 | },
514 | {
515 | "id": "023",
516 | "title": "Next.js: Getting started",
517 | "author": "Molly",
518 | "imageurl":"https://mobisoftinfotech.com/resources/wp-content/uploads/2022/04/next-JS-framework.png",
519 | "img0":"https://www.pngitem.com/pimgs/m/214-2145309_blank-profile-picture-circle-hd-png-download.png",
520 | "date": "2023-05-02",
521 | "content":"Next.js is a powerful and popular React framework for building modern web applications. It provides a comprehensive set of tools and features that streamline the development process and enable developers to create high-performance and scalable applications. Next.js offers server-side rendering (SSR) and static site generation (SSG) capabilities, allowing websites to load quickly and be easily indexed by search engines. The framework also includes features like automatic code splitting, prefetching, and caching, which optimize the performance and user experience. Next.js simplifies routing with its built-in routing system and offers a wide range of plugins and extensions for added functionality. It seamlessly integrates with popular technologies and tools, such as React, TypeScript, and CSS-in-JS libraries. With Next.js, developers can build robust applications with ease, taking advantage of its efficiency, performance optimization, and excellent developer experience. Whether you're creating a small personal project or a large-scale enterprise application, Next.js provides the tools and flexibility to bring your ideas to life in a fast and efficient manner.",
522 | "tags": ["Next.js","Framework","Prototyping","Hooks","Web design"],
523 | "comments": [
524 | {
525 | "author": "Shaby",
526 | "date": "2023-05-08",
527 | "content": "Efficiency meets performance with Next.js's optimized rendering and caching capabilities."
528 | },
529 | {
530 | "author": "Tessa",
531 | "date": "2023-05-09",
532 | "content": "Next.js: Bridging the gap between React and server-side rendering for enhanced UX."
533 | }
534 | ]
535 | },
536 | {
537 | "id": "024",
538 | "title": "Angular: Type-script based framework",
539 | "author": "Joe",
540 | "imageurl":"https://i0.wp.com/blog.knoldus.com/wp-content/uploads/2020/06/angular.png?fit=1024%2C538&ssl=1",
541 | "img0":"https://www.pngitem.com/pimgs/m/214-2145309_blank-profile-picture-circle-hd-png-download.png",
542 | "date": "2023-05-02",
543 | "content":"Angular is a comprehensive and widely used JavaScript framework for building web applications. Developed and maintained by Google, Angular provides developers with a structured approach to creating dynamic and feature-rich applications. It follows the Model-View-Controller (MVC) architectural pattern and offers a plethora of tools and features that simplify the development process. Angular's powerful data binding capabilities enable seamless synchronization between the application's data and the UI, enhancing the user experience. The framework also includes a robust dependency injection system, allowing for efficient management of components and services. Angular's declarative syntax, combined with its extensive library of reusable components, streamlines the creation of complex user interfaces. It also provides excellent support for testing, making it easier to ensure the reliability and stability of the application. With its large and active community, Angular offers extensive documentation, tutorials, and support resources, facilitating the learning and adoption of the framework. ",
544 | "tags": ["Angular","Framework","Prototyping","Typescript","Web design"],
545 | "comments": [
546 | {
547 | "author": "Paul",
548 | "date": "2023-05-08",
549 | "content": "Streamline application development with Angular's structured approach and MVC architecture."
550 | },
551 | {
552 | "author": "Steave",
553 | "date": "2023-05-09",
554 | "content": "Angular: Enhancing developer productivity with its comprehensive set of tools and features."
555 | }
556 | ]
557 | }
558 | ]
559 |
560 | }
561 |
--------------------------------------------------------------------------------
37 |
38 |
39 | 
44 |
46 |
47 | 
196 |
197 |
198 | 
199 |
200 |
201 | 
202 |
203 |
204 | 
205 |
206 |
207 | 
208 |
209 |
210 | 
211 |
212 |
213 | 
214 |
215 |
216 | 
217 |
218 |
52 |
58 |