IT |
ITmedia 総合記事一覧 |
[ITmedia PC USER] サンワ、高感度マイクを搭載した会議室向けUSBスピーカーフォン |
https://www.itmedia.co.jp/pcuser/articles/2210/17/news125.html
|
itmediapcuser |
2022-10-17 15:36:00 |
IT |
情報システムリーダーのためのIT情報専門サイト IT Leaders |
CTC、メインフレームとのデータ連携Web APIを生成する「OpenLegacy」、FinTech向けに販売 | IT Leaders |
https://it.impress.co.jp/articles/-/23912
|
CTC、メインフレームとのデータ連携WebAPIを生成する「OpenLegacy」、FinTech向けに販売ITLeaders伊藤忠テクノソリューションズCTCは年月日、メインフレーム接続API生成ツール「OpenLegacy」の取り扱いを開始すると発表した。 |
2022-10-17 15:51:00 |
Ruby |
Rubyタグが付けられた新着投稿 - Qiita |
includeとextendの違いについて |
https://qiita.com/pyon_kiti_jp/items/89d62602eb4246c4923a
|
extend |
2022-10-17 15:47:10 |
Azure |
Azureタグが付けられた新着投稿 - Qiita |
Azure IoTを触ってみた |
https://qiita.com/takess/items/33ecdb4231b13913105e
|
azureiot |
2022-10-17 15:46:53 |
海外TECH |
DEV Community |
How we developed our company website using NextJS |
https://dev.to/josemukorivo/how-we-developed-our-company-website-using-nextjs-2ga5
|
How we developed our company website using NextJSI sat down with my close friends that I had been working with for a while at the start of to discuss about starting a software company that merged aesthetics and functionality We made the decision to combine our various skill sets to form that business and complexus was established We completed a few projects for other clients before deciding to concentrate on our website We began by conducting research on our target market and then the team began to work on the initial iteration of the site s design OverviewIn this article I ll primarily discuss the tools we utilized and how we used them to create our dynamic website These are the tools we typically employ for our clients projects DesignThe design team used figma to create the site s design and a screenshot of the initial version is seen below The design was finished after four iterations the first of which was a low fidelity wireframe Almost everyone contributed to the design in some way ContentWe had someone in charge of copywriting for the site s material and they collaborated with the design team to ensure that what they were writing was consistent with the design DevelopmentWe went on to build the website after creating the design and the content Let me list some of the things that the website is powered by before I get into the technicalities React for the UINextJS for SSG SSR ISSGTailwind css for stylingCSS modules styling without class name collisionGSAP JavaScript animationsMailchimp for the mailing listVercel CI CD and hostingFramer motion JavaScript animationsTypeScript for adding type safety to our codebaseI will probably spend a little more time at this stage because development was the most fascinating phase Reactjs is the foundation of the website and all the components were built upon it Below is a sample reusable Button component and its styles Button tsximport FC forwardRef ButtonHTMLAttributes JSXElementConstructor ReactElement from react import Link from next link import motion from framer motion import cn from classnames import s from Button module scss interface ButtonProps extends ButtonHTMLAttributes lt HTMLButtonElement gt href string className string disabled boolean rightIcon ReactElement leftIcon ReactElement active boolean target blank self parent top size sm md lg variant primary secondary white black naked outlineBlack outlineWhite square as button a JSXElementConstructor lt any gt export const Button FC lt ButtonProps gt forwardRef props buttonRef gt const as Tag button variant primary size md target self href active rightIcon leftIcon className disabled children rest props const classes cn s root s primary variant primary s outlineBlack variant outlineBlack s outlineWhite variant outlineWhite s secondary variant secondary s white variant white s naked variant naked s black variant black s square variant square s md size md s sm size sm s lg size lg flex items center gap rightIcon leftIcon amp amp size md s dFlex rightIcon leftIcon amp amp size lg s active active className return lt motion span className inline block initial y opacity transition duration type spring damping whileInView opacity y viewport once true amount gt href lt Tag rest gt lt Link href href gt lt a className classes target target gt leftIcon lt span gt children lt span gt rightIcon lt a gt lt Link gt lt Tag gt lt Tag disabled disabled className classes rest gt leftIcon lt span gt children lt span gt rightIcon lt Tag gt lt motion span gt Button displayName Button Button module scss root apply mb transition duration ease linear dFlex apply flex items center gap primary apply relative overflow hidden border border primary bg primary text white span svg apply relative z amp after content apply absolute top left block h full w bg white transition width duration ease linear amp hover apply text primary amp hover after apply w full naked apply bg transparent black apply relative border border black bg black text white amp after content apply absolute top left block h full w bg white mix blend difference transition width duration ease linear amp hover after apply w full white apply border border white bg white text primary secondary apply border border secondary bg secondary text white outlineBlack apply relative border border black amp after content apply absolute top left block h full w bg white mix blend difference transition width duration ease linear amp hover after apply w full square apply relative flex h w items center justify center rounded full border border black p hover scale xl h xl w xl border important outlineWhite apply relative border border white text white amp before content apply absolute left bottom px h px w bg black transition left amp after content apply absolute right top px h px w bg black transition right amp hover before apply left amp hover after apply right amp hover apply opacity sm apply px py md apply px py px xl px lg apply px py text sm font medium xl py rem xl px xl text base xl px xl py xl text lg The components were code using TypeScript for type safety TypeScript also helps with writing code that is self documenting For styling we went with tailwindcss but note that classes in our react components are clean because the tailwind utility classes are in a separate css file which is a CSS module CSS modules helps in avoiding namespace collision for CSS classes Below will be how the Button can be used lt Button variant black size lg href contact className relative ml rightIcon lt Line gt gt Get in touch lt Button gt All of our reusable components are coded this way These small components like the Button Text Link and Box are located in the components ui folder and exported using using a single index ts file so that they can be imported like soimport Text Box Container Link Button from components ui Common elements like the Navigation and Footer are in the components shared folder and elements that are specific to a page are in the components pages page name folder SEOWe had to make sure that our website is search engine friendly so we created a Page component that takes some SEO data as props and every page on the site uses it as a parent Page tsximport FC from react import Head from next head interface Props title string description string image string canonicalURL string export const Page FC lt Props gt children title description image canonicalURL gt return lt gt lt Head gt lt title gt title lt title gt lt meta name description content description gt lt meta name author content Complexus Technologies gt lt meta name image content image gt lt meta name og title content title gt lt meta name og description content description gt lt meta name og image content image gt lt meta name og url content gt lt meta name og site name content Complexus Technologies gt lt meta name og type content website gt lt meta name twitter card content summary large image gt lt meta name twitter title content title gt lt meta name twitter alt content title gt lt meta name twitter description content description gt lt meta name twitter image content image gt lt meta name theme color content ffe gt lt meta name twitter site content complexus tech gt lt meta name twitter creator content complexus tech gt canonicalURL amp amp lt link rel canonical href canonicalURL gt lt Head gt lt main gt children lt main gt lt gt Example Page usageimport type NextPage from next import Page HowMuch from components shared import Hero Intro Team from components pages about const Home NextPage gt return lt Page title About Complexus Technologies description Complexus helps you achieve your business goals through effective planning design and development image url canonicalURL keywords complexus complexus technologies complex zimbabwe sofware company mobile development it consultancy gt lt Hero gt lt Intro gt lt Team gt lt HowMuch gt lt Page gt export default Home We also used other tools like Google Analytics Google My Business and Google search console for SEO We also used some open graph tags to make sure that the site has some nice priviews when we share it on social media Mailing listIn order to share some information about events at Complexus we are running a mailing list using Mailchimp If you subscribe we d be grateful HostingThe website is hosted on Vercel and it rebuilds every time we push to the main branch on github CTAIf your organization would like to have a website similar to ours please contact us here or email us at hello complexus tech We also do custom software development check our services here |
2022-10-17 06:17:51 |
医療系 |
医療介護 CBnews |
デング熱輸入例の報告数、前年の約7倍の規模に-感染研が情報更新、推定感染地はベトナムが最多 |
https://www.cbnews.jp/news/entry/20221017150203
|
国立感染症研究所 |
2022-10-17 15:20:00 |
金融 |
JPX マーケットニュース |
[TOCOM]最終決済価格(2022年11月限):LNG(プラッツJKM) |
https://www.jpx.co.jp/markets/derivatives/special-quotation/index.html
|
jkmtocom |
2022-10-17 15:15:00 |
海外ニュース |
Japan Times latest articles |
Work forever: Japan’s seniors brace for life without retirement |
https://www.japantimes.co.jp/news/2022/10/17/business/senior-employment-japan/
|
Work forever Japan s seniors brace for life without retirementMany older Japanese can no longer afford to stop working as demographic woes pressure the nation s labor market and social security system |
2022-10-17 15:30:45 |
海外ニュース |
Japan Times latest articles |
In Japan, body hair removal transcending age and gender boundaries |
https://www.japantimes.co.jp/news/2022/10/17/national/body-hair-removal/
|
hairless |
2022-10-17 15:01:15 |
ニュース |
BBC News - Home |
Met officer faced 11 misconduct allegations |
https://www.bbc.co.uk/news/uk-england-london-63278266?at_medium=RSS&at_campaign=KARANGA
|
sexual |
2022-10-17 06:46:23 |
ニュース |
BBC News - Home |
Ukraine war: Kyiv attacked by kamikaze drones say officials |
https://www.bbc.co.uk/news/uk-63280523?at_medium=RSS&at_campaign=KARANGA
|
ukraine |
2022-10-17 06:37:26 |
ニュース |
BBC News - Home |
Dartford Crossing closure: Two people climb up QE2 Bridge |
https://www.bbc.co.uk/news/uk-england-essex-63281841?at_medium=RSS&at_campaign=KARANGA
|
bridgethere |
2022-10-17 06:02:10 |
ニュース |
BBC News - Home |
Pound rises as chancellor moves to reassure markets |
https://www.bbc.co.uk/news/business-63278821?at_medium=RSS&at_campaign=KARANGA
|
pound |
2022-10-17 06:50:49 |
ニュース |
BBC News - Home |
Watch: Hong Kong protester beaten up in China consulate grounds |
https://www.bbc.co.uk/news/uk-63282230?at_medium=RSS&at_campaign=KARANGA
|
manchester |
2022-10-17 06:34:32 |
ニュース |
BBC News - Home |
Iga Swiatek beats Donna Vekic to win San Diego Open |
https://www.bbc.co.uk/sport/tennis/63281797?at_medium=RSS&at_campaign=KARANGA
|
diego |
2022-10-17 06:12:33 |
ビジネス |
ダイヤモンド・オンライン - 新着記事 |
【寄稿】中国との実戦準備、米国は不十分 - WSJ発 |
https://diamond.jp/articles/-/311422
|
米国 |
2022-10-17 15:09:00 |
ビジネス |
不景気.com |
マネーフォワードの22年11月期は最大97億円の最終赤字へ - 不景気com |
https://www.fukeiki.com/2022/10/money-forward-2022-loss.html
|
最終赤字 |
2022-10-17 06:28:42 |
北海道 |
北海道新聞 |
東証反落、終値314円安 FRB金融引き締め継続を警戒 |
https://www.hokkaido-np.co.jp/article/746465/
|
日経平均株価 |
2022-10-17 15:29:00 |
北海道 |
北海道新聞 |
「ピアノ法話」を開く浦臼の住職 米田弘教(よねた・こうきょう)さん |
https://www.hokkaido-np.co.jp/article/746302/
|
空知管内 |
2022-10-17 15:28:49 |
北海道 |
北海道新聞 |
北海道内1175人感染、3人死亡 新型コロナ |
https://www.hokkaido-np.co.jp/article/746463/
|
北海道内 |
2022-10-17 15:23:00 |
北海道 |
北海道新聞 |
NHL、ゴールデンナイツ3連勝 西カンファレンス太平洋地区 |
https://www.hokkaido-np.co.jp/article/746452/
|
連勝 |
2022-10-17 15:04:46 |
北海道 |
北海道新聞 |
後志管内46人感染 小樽市は21人 新型コロナ |
https://www.hokkaido-np.co.jp/article/746462/
|
新型コロナウイルス |
2022-10-17 15:18:00 |
ビジネス |
東洋経済オンライン |
旧統一教会に質問権行使で「河野氏」存在感増す訳 岸田首相にとっては「引くも地獄、進むも地獄」 | 国内政治 | 東洋経済オンライン |
https://toyokeizai.net/articles/-/626503?utm_source=rss&utm_medium=http&utm_campaign=link_back
|
予算委員会 |
2022-10-17 15:50:00 |
ニュース |
Newsweek |
NY州の「超リベラル」下院議員候補、注目を集めるため自分のセックス動画を公開 |
https://www.newsweekjapan.jp/stories/world/2022/10/post-99873.php
|
自らを「非常にリベラル」と語るイツキスは、「政治について話すだけでは、セックスの問題に対する私の強い信念を示すことはできないと思った」と、シティステートに語った。 |
2022-10-17 15:50:12 |
IT |
週刊アスキー |
エネチェンジ、広島に新規オープンする複合商業施設にEV用充電器4基を導入 |
https://weekly.ascii.jp/elem/000/004/109/4109175/
|
enechange |
2022-10-17 15:30:00 |
IT |
週刊アスキー |
サンコー、工事不要でシンク横に置けるタンク式食洗機「ラクアmini Plus」を発売 |
https://weekly.ascii.jp/elem/000/004/109/4109194/
|
miniplus |
2022-10-17 15:30:00 |
IT |
週刊アスキー |
人気北海道グルメおよそ80店舗が大集合! 横浜高島屋「第63回 大北海道展」10月19日~11月3日開催 |
https://weekly.ascii.jp/elem/000/004/109/4109199/
|
高島屋 |
2022-10-17 15:30:00 |
IT |
週刊アスキー |
秋の味覚をシカゴピザで楽しもう! Ark Lounge 新宿西口店にて「パンプキンシカゴピザ」「さつまいもシカゴピザ」販売中 |
https://weekly.ascii.jp/elem/000/004/109/4109203/
|
lounge |
2022-10-17 15:30:00 |
IT |
週刊アスキー |
『CoD: Modern Warfare II』のキャンペーン報酬を早期アクセス期間中に獲得してローンチを有利に進めよう! |
https://weekly.ascii.jp/elem/000/004/109/4109205/
|
activision |
2022-10-17 15:20:00 |
コメント
コメントを投稿